カルーセルバナーの進化版でメッセージを伝えよう

サイト内スライドバナーで素通りユーザーを顧客に変換

カルーセルバナーとは、おもにWebサイトのトップページのトップに設置し、画像を自動的にスライドさせて見せるアレです。一見カッコよく見えるカルーセルバナーですが、これほど、クライアントの期待を裏切るものも珍しいといえます。というのもユーザーにとって、カルーセルバナーは見飽きた広告で、1枚目以外はほとんど見ていないし、クリックもしないからです。

カルーセルバナーの可能性

カルーセルバナーは、日本では2010年頃、Webページ上で動くアイテムとして、爆発的に流行りました。当時は、Flashが使えなくなり、動きのあるアイテムを作るのがむずかしくなっていた時期でした。jQueryとそのプラグインを導入すれば、プログラムが書けなくても、すぐに動かせる! この朗報(?)に多くのWebデザイナーが飛びつき、あちこちのWebサイトでカルーセルバナーが動くようになりました。

一方、一足先に jQuery がブレークしたアメリカでは、カルーセルバナーの成果が検証されるようになっていました。しかし、その結果は期待を大いに裏切るものでした。クリック率はわずか1%。しかも2枚目以降は1枚目の1/5しかない。

衝撃的な調査結果からもう10年以上たちますが、jQuery のプラグインやその亜流はほとんど進歩せず、いまだに効果が疑問視されるまま、広告に流用されています。

そこで、デジタルエイドはカルーセルバナーの弱点を検証し、それを克服するものとして、サイト内スライドバナーを開発しました。

サイト内スライドバナーのコンセプト

カルーセルバナーでは、意味もなく画像がスライドしていました。画像がどんなに素晴らしくても、ユーザーにとって意味がなければ、注目してもらえません。

スライド1枚1枚に意味づけをし、全体としてメッセージを一つのストーリーとして伝える。それがサイト内スライドバナーのコンセプトです。

そのために、サイト内バナーでは1枚の画像が登場すると、その上にテロップ(言葉)を重ねて、画像に意味づけをします。そして画像とテロップをスライドアウトさせ、次の画像を出現させ、テロップで意味づけをし、ストーリーを展開させていきます。そうやってサイトからのメッセージをインパクトを持って伝えます。

サイト内スライドバナーの特長

画像とテロップがお互いに引き立てる

わざわざ画像とテロップを分離しなくても、初めから画像にテロップを書き込んでおけば同じゃないかと思われるかもしれません。しかし、それでは、よほど大きな文字でデザインしない限り、文字は画像の一部になってしまい、読まれなくなります。

サイト内スライドバナーでは、画像とテロップが出現するのに、時間差があり、さらにテロップの動きは逆方向になります。このため、動きが単調にならず、画像とテロップがお互いを引き立てます

スライド枚数は自由

一般に、スライド枚数は4~5枚がよいとされています。だからといって、スライド枚数を4枚なり5枚なりに固定するのは、スライド内バナーを使いにくくしてしまいます。スライド枚数は、作り手が制作しながら、自由に設定できるようになっています。

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

サイト内スライドバナーは、スライドインしたり、スライドアウトしたりするのに、三角ボタンを使います。
この三角ボタンは、設置するWebページのカラートーンに合わせて、次の7色から選べます

オレンジ

ピンク

黒(指定なし)

サイト内スライドバナーの設定項目

  • スライドの縦横サイズ 必須
  • 表示開始日 無期限なら設定不要
  • 表示終了日 無期限なら設定不要
  • ボタン色 7色から選択可
  • リンク先アドレス
  • タイトル 必須
  • 待機秒数
  • 再訪問時の動作
  • 画像ファイル名
  • テロップファイル名
  • タイトル属性

画像ファイルとテロップとタイトル属性の3つで1セットで、スライドの枚数分必要となります。

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

新製品・新サービスの宣伝
製品・サービスのディスカウントセールのご案内
その他記事に関連する製品・サービスのご案内
イベントの参加予約

サイト内スライドバナーのつくり方

サイト内スライドバナーをつくるには、まず、画像とテロップを作ります。次にサイト内スライドバナーのプログラム一式を入手し、いくつか設定をします。それから、全ファイルをアップロードします。最後に、Webページからリンクを張ります。

サイト内スライドバナーの入手のしかたについては後でご説明します。まずは、全体の流れをご理解ください。

  1. 会員サイトで設定ファイルを生成する
    初回は弊社が設定ファイルを用意するので、不要です。
  2. 全ファイルをアップロードする
    画像と設定ファイルを slide-banner フォルダに入れます。
    次にFTPソフトなどで、フォルダごとアップロードします。
  3. Webページからリンクを張る
    サイト内スライドバナーを呼び出したいWebページから、slide-banner フォルダ内のプログラムファイルとデザインファイルへのリンクを張ります。

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

サイト内スライドバナーQ&A

Q1. なぜ、サイト内スライドバナーは、カルーセルのように、横長の枠に画像を並べてスライドさせないのですか?
A1. サイト内スライドバナーは画像1枚1枚に見せる順番があるからです。
Q2. サイト内スライドバナーで、特定のスライドで止めるにはどうすればいいのですか?
A2. 特定のスライドで止める機能はあえてつけていません。ストーリーにそって順番通りに見てほしいからです。
Q3. サイト内スライドバナーの視聴を中断するにはどすればいいのですか?
A3. [閉]とある三角ボタンをクリックしてください。バナーが閉じて、スライドが終わります。
Q4. カルーセルバナーでは画像の読み込みが遅いのが問題でした。サイト内スライドバナーはテロップがある分、さらに遅くなるのではありませんか?
A4. いいえ。画像の読み込みが遅くなるのは、画像の容量が大きすぎるからです。テロップ画像は色数が少ないため、画像の容量は小さくて済みます。また、カルーセルバナーでは、JavaScript 側でスライドの処理をするため、ブラウザに負荷がかかり、画像の読み込みが遅くなったり、動きが乱れたりします。サイト内スライドバナーでは、独自のアルゴリズムでこの問題をかいしょうしています。
Q5. スライド制作はどのようにすればいいのですか?
A5. まず、スライドに文字が重なった状態の最終形を作ります。それから画像部分とスライド部分を分離してください。縦横サイズを両者同じにします。
Q6. 画像はjpgとpngが混じってもいいのですか?
A6. はい、構いません。ただし、サイズは全部同じにしてください。
Q7. スライド制作を依頼する場合、画像とテロップはどう数えるのですか?
A7. 画像とテロップと合わせて1枚と数えます。

サイト内スライドバナーの料金

2024年6月11日改定

項目 明細 料金
基本料金 初回、お客様の指示に基づき設定ファイルを生成して、スライドファイルを除く全ファイルをご提供いたします。改変不可。 24,200円
スライド制作料金
(オプション)
バナー内で動くスライドを制作いたします。 5,500円/枚
設置代行料金
(オプション)
ご提供したファイルをホームページ領域に設置し、意図通り動くのを確認します。FTP情報の貸与が必要。自力で設置する場合は不要。 16,500円
フォームメール制作料金
(オプション)
お申し込みページとプログラム制作 19,800円
(税込み)

サイト内スライドバナーを申し込むには

下記お問い合わせフォームの目的欄で「見積を依頼する」を選択したうえで、ご送信ください。
見積書を送付いたします。

お問い合わせ 電話 Web会議 終了 設定条件 お見積 ご注文 ご請求 お支払い ファイル引き渡し/ 設置完了
  1. 自動見積で、Webツールの要件を設定して、料金をお確かめください。
  2. 見積額に納得していただけましたら、ご送信ください。それが打ち合わせ依頼となります。
  3. 見積内容を軸に打ち合わせをいたします。
  4. 打ち合わせで詳細が確定しましたら、ご請求書を送信いたします。
  5. ご請求金額をクレジットカードまたは銀行振込でお支払いいただけます。
  6. 入金確認後、自動見積でお約束し納期までにファイル一式を送付、または、設置作業等を完了いたします。

※ Facebookページや WiX.com など、FTP情報が提供されないサイトでは、Webツールが設置できません。導入の前に、よくお確かめください。