ポップアップバナーをつくろう 第１弾

1. 三角ボタンでバナーを開閉

通常のポップアップバナーは一度開くと、「×」などの閉じるボタンを押さないと、消えません。一度消えると、再読み込みしない限り、表示されません。
まだ本文を読んでいる途中でポップアップバナーが現われると、邪魔なので、バナーの内容を読まずに消す、というユーザーは少なくないでしょう。

サイト内バナーはバナーが表示されると、右側に「閉」という三角ボタンが現われ、これを押すと、バナーがスライドアウトし、右側に「開」という三角ボタンのみ残して閉じます。

三角ボタンの向きから、「開」を押せば、またバナーがスライドインすることが容易に予想できます。
なので、ユーザーはバナーが邪魔と思えばいったん閉じ、後からまた開いて内容を確かめることができます。

2. 三角ボタン色を7色から選択

設置するWebページのカラートーンに合わせて、三角ボタンの色を次の７色から選べます。

3.しつこく表示させない設定

ポップアップバナーの弱点は、そのページにアクセスしたユーザーに有無をも言わせず、バナーを表示するため、ウザいと思われがちな点です。
とくに、サイト内の全ページに同じポップアップバナーを設置している場合、サイト内を遷移するたびに、同じバナーが出現するので、ユーザーをうんざりさせてしまうかもしれません。

サイト内バナーは一度スライドインすると、24時間経たないと、同一ユーザーに同じサイト内バナーをスライドインさせない設定ができます。
つまり、あるユーザーがサイトにアクセスすると、サイト内バナーがスライドインしますが、その後、サイト内バナーが設置されている別のページに遷移したり、再読み込みをしたりしても、サイト内バナーはスライドインせず、右側に「開」ボタンを表示するだけです。
なお、同一ユーザーが翌日アクセスすると、また、スライドインします。

4. 表示期間限定/無期限

イベントの申し込みなど期間が限定される場合、サイト内バナーの表示期間を限定することができます。
つまり、表示期間が過ぎると、スライドインしないだけでなく、三角ボタンすら表示しなくなります。

ですので、これまでのバナーのように、期限が過ぎた直後に、あわてて撤去作業をする必要はありません。ただ、期限が過ぎてもプログラムはユーザーのブラウザに読み込まれますので、ブラウザには負荷がかかります。ですから、表示期間が過ぎたら、都合のよいときに、プログラムを削除し、元の状態に戻すことをお勧めします。

なお、表示期間を設定せず、無期限に表示するという設定もできます。

サイト内バナーの使いどころ

サイト内バナーの使いどころは、ずばり CTA = Call To Action = 行動喚起 です。
つまり、ユーザーにしてほしい行動を画像でわかりやすく示し、行動を促すのです。
具体的には、次のようなシチュエーションが考えられます。

1. イベントの告知
2. 期間限定サービスのご案内
3. 製品・サービスのお申し込み・お問い合わせ
4. 予約・登録など

サイト内バナーのリンク先は、必ずフォームメールを設置し、取りこぼしがないようにしましょう。

サイト内バナーの設置手順

サイト内バナーを設置するには、まず、前段階として、サイト内バナーを入手し、条件設定をする必要がありますが、この部分は基本料金に含まれているので、それほど問題ではありません。
ですから、サイト内バナーの入手方法 は後回しにして、先に設置手順を説明します。設置手順を把握したのち、自力で行うか、誰かに頼むかを判断してください。

サイト内バナーは既存のWebページでもデザインを変えずに、4ステップで設置できます。

1. 会員サイトで設定ファイルを生成する
   初回は不要です。
2. 画像を作成する
   画像形式は png で、作った画像ファイルは image.png という名前にします。
   画像サイズは自由です。ユーザーのデバイスのサイズに合わせて、プログラムが自動的に調整します。ただ、現在では、Webサイトユーザーの8割がスマホで閲覧していますので、読み込みに時間がかかる大きなサイズは避けましょう。
3. 画像と設定ファイルを指定のフォルダに入れ、フォルダごとアップロードする
   作製した image.png と設定ファイル(初回は不要)を site-banner フォルダに入れ、FTPソフトなどで、フォルダごとアップロードします。
4. サイト内バナーを呼び出したいファイルから、プログラムファイルとデザインファイルへリンクする
   site-banner フォルダには、プログラムファイルとデザインファイルがありますので、サイト内バナーを呼び出したいファイルから、上記2つのファイルへのリンクを張ります。

なお、サイト内バナーを購入されると、会員サイトへアクセスできる会員パスがついてきます。会員サイトには、サイト内バナー：設置のしかた というページがあり、リンクのためのサンプルコードが具体的に書かれていますので、ご参照ください。

サイト内バナーQ&A

Q1. 作成した image.png へのリンクはどう書けばいいのですか?

A1. image.png はプログラムから呼び出すので、リンクを張る必要はありません。

Q2. WordPressのテーマを購入して使っています。サイト内バナーを設置したいのですが、頼めますか?

A2. はい、承っております。(別途、設置料金が必要)

Q3. サイト内のどのページにアクセスしても、必ず、サイト内バナーを表示するようにしたいのですが、その場合、全ページからリンクする必要があるのでしょうか? また、設置を依頼した場合、いくらになりますか?

A3. はい、全ページからサイト内バナーへリンクする必要があります。弊社で請け負う場合は、設置箇所数に関係なく、既定の設置料金 16,500円 でOKです。

Q4. 画像の制作を依頼できますか?

A4. はい、承っております。(別途、画像制作料金が必要)

Q5. どうしても、画像を作らなければならないのですか?

A5. 残念ながら、サイト内バナーに関しては、画像が必須です。ただし、カウントダウン30、一行メッセージ、セミナーバナーならば、画像は不要でテキストだけでメッセージをポップアップさせることができます。

Q6. 設定を変えるにはどうしたらいいのですか?

A6. まず、画像を変える必要があるときは、新しい画像を作り、既存のimageファイルに上書きしてください。
次に、会員サイトにアクセスし、サイト内バナー：設定ファイル生成・ダウンロード にアクセスし、設定条件を入力して設定ファイルを生成して、ダウンロードしてください。
最後に、既存の設定ファイルに上書きしてください。

Q7. サイト内バナーを設置できるサイト数に制限はないのですか

A7. はい、サイト内バナーの設置できるサイト数には制限はありません。ただし、会員パスの有効期限はご購入から１年間で、それを過ぎると、設定ファイルの生成ができなくなります。

Q8. 会員パスの有効期限が切れた後で、サイト内バナーを設置したい場合、また同じものを購入しなければならないのですか?

A8. いいえ。年会費11,000円をお支払いいただくか、他のWebツールをご購入いただくと、サイト内バナー：設定ファイル生成・ダウンロード へアクセスできるようになります。

サイト内バナーの料金

2024年4月22日改定

サイト内バナーを入手するには

サイト内バナー：自動見積