レスポンシブのフローティングバナー(追従バナー)の作り方【コピペOK】

  • このエントリーをはてなブックマークに追加
フローティングバナー(追従バナー)

ページのサイドや下部に追従してくるフローティングバナーは、重要なページへの導線をユーザーに向けて常に提示できるため、マーケティングの観点で非常に有効です。

バナーをページの下部にのみ設置するパターンだと、「バナーを目にするユーザー = ページ下部までたどり着いたユーザー」 になり、クリックするのはその中でさらに一部のユーザーに絞られるため、最終的なクリック率はかなり低くなる傾向があります。

一方、常に追従してくるフローティングバナーなら、「ページ訪問ユーザー = バナーを目にするユーザー」になるため、その他の条件が同じであればクリック率は通常多くなります

バナーがフローティング(追従)する場所は、ページの種類にもよりますが、ブログ型の場合、PCならサイド、スマホなら下部に設定するのが典型的なパターンです。

そこでこの記事では、PCの画面幅で見られた時はサイド、スマホの画面幅なら下部、中間のタブレットサイズでは非表示という具合にレスポンシブで切り替わるフローティングバナーの作り方を解説します。

また、バナーそのものは画像で用意するケースとコーディングで作成するケースがありますので、どちらのパターンも解説します。

フローティングバナーを画像で作るパターン

まずは、バナーを画像で作り、それをフローティングさせるパターンについて解説します。デモページは下記になります。

フローティングバナー(画像)のデモページ

この方法の場合は、事前にPC用とスマホ用のバナー画像を用意しておく必要があります。今回は以下の2つを使って進めます。

PC用のバナー

PC用のフローティングバナー

スマホ用のバナー

スマホ用のフローティングバナー

さっそくコードを見ていきましょう。HTMLとCSSだけで、分量も少なくシンプルです。


<div class="floating-banner">
    <a href="リンク先ページのURL">
	    <img class="pc" src="PC用のフローティングバナーのURL" alt="PC用のフローティングバナー">
	    <img class="sp" src="スマホ用のフローティングバナーのURL" alt="スマホ用のフローティングバナー">
    </a>
</div>


.floating-banner {
    position: fixed; /* 追従 */
    z-index: 99999; /* 他の要素の下に隠れないように */
    top: 80px; /* バナーの上下の位置 */
    right: 40px; /* バナーの左右の位置 */
}
.pc {
    width: 300px; /* バナーの横幅を指定 */
}
.floating-banner:hover {
    opacity: .8; /* ホバーで少し透過 */
}
.sp {
    display: none; /* PCではスマホ用のバナーは非表示に */
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
    .pc {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
}

@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
    .sp {
        display: inline-block; /* 消していたスマホ用のバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    }
    .floating-banner  {
        top: unset; /* PCで指定していた上下の位置指定をクリア */
        right: 0; /* 左右の隙間が空かないように */
        bottom: 0; /* 画面の最下部にぴったりくっつくように指定 */
    }
}

CSSのすべての行にコメントをつけ、サイトの内容に合わせて値の変更が必要な箇所をハイライトしました。

top: 80px; /* バナーの上下の位置 */

バナーの上下の位置(y方向)を、上からの距離をpxで指定することで設定しています。

right: 40px; /* バナーの左右の位置 */

バナーの左右の位置(x方向)を、右からの距離をpxで指定することで設定しています。

width: 300px; /* バナーの横幅を指定 */

バナーの横幅を指定しています。バナーそのものは画像で作っているため、横幅を表示させたいサイズで指定すれば、縦幅は画像の縦横比に応じて自然と決まります。

他のCSSによってこの<img>に具体的な縦幅の指定が当たってしまっている場合は、height: auto;を追記することで画像本来の縦横比で表示されるようになります。

なお、今回はタブレットサイズでは何も表示していませんが、タブレット用の比率のバナー画像も用意して、PC用の画像を非表示にするのと同時に切り替えることももちろん効果的です。

フローティングバナーをHTMLとCSSだけで作るパターン

バナーを画像ではなくHTMLとCSSで作る方法もあります。

フローティングバナー(HTML&CSS)のデモページ

この方法のメリットは、文言などの変更が簡単に行えることです。

画像で作った場合は、表現の自由度は高いものの、変更を加える際はデザインツール上で編集を行い、画像として出力した後にサーバにアップして、新しいURLをHTMLに入れ直すという手順が必要になります。

それに対して、HTMLとCSSだけで作ると、文言の変更ならWordPressの投稿画面上で文字を書き換えるだけですし、色などを変更するのもCSSの値を書き換えるだけで済みます。

こちらのパターンのコードを見ていきましょう。デザイン要素が入るので、CSSは画像パターンよりも記述がやや増えます。


<div class="floating-banner">
  <a href="リンク先ページのURL">
  	<div class="banner">
	  <p class="copy">コンバージョン率を<br class="sp">改善するには?</p>
	  <p class="cta">詳しく見る</p>
	</div>
  </a>


.floating-banner {
  position: fixed;
  z-index: 99999;
  top: 80px;
  right: 40px;
}
.floating-banner:hover {
  opacity: .8;
}
.banner {
  width: 300px; /* バナーの横幅 */
  height: 250px; /* バナーの高さ */
  padding-top: 40px;
  background: linear-gradient(86.13deg, #7080F7 -3.42%, #3E9ED9 59.59%); /* バナーの背景色 */
  color: #fff; /* バナー内の文字色 */
  font-weight: bold;
  text-align: center;
}
a {
  text-decoration: none; /* リンクに下線が入らないように */
}
.copy {
  font-size: 28px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.cta {
  display: inline-block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  background: linear-gradient(270deg, #F4A240 0%, #E3A608 100%); /* ボタンの背景 */
  box-shadow: 0px 0px 30px #2984BA; /* ボタンの影 */
  border-radius: 25px;
}

@media screen and (max-width: 990px) {
  .floating-banner {
    display: none;
  }
}

@media screen and (max-width: 560px) {
  .floating-banner {
    display: inline-block;
    top: unset;
    right: 0;
    bottom: 0;
  }
  .banner {
    width: 100vw;
    height: 80px;
    padding: 8px;
  }
  .sp {
    display: none;
  }
  .copy {
    font-size: 18px;
    margin: 0 auto 6px;
  }
  .cta {
    height: 28px;
    line-height: 28px;
    font-size: 15px;
  }
}

画像パターンと違う箇所を中心にコメントをつけ、サイトに合わせて値の変更が必要な箇所をハイライトしました。

width: 300px; /* バナーの横幅 */

height: 250px; /* バナーの高さ */

バナーのサイズを指定する箇所です。画像パターンでは画像の縦横比に従う前提で横幅のみ指定していましたが、コーディングパターンでは高さも具体的な数字で指定するのがよいでしょう。

background: linear-gradient(86.13deg, #7080F7 -3.42%, #3E9ED9 59.59%); /* バナーの背景色 */

color: #fff; /* バナー内の文字色 */

background: linear-gradient(270deg, #F4A240 0%, #E3A608 100%); /* ボタンの背景 */

box-shadow: 0px 0px 30px #2984BA; /* ボタンの影 */

色に関連する部分です。サイトのデザインに合わせてカラーコードを変更してください。背景にはグラデーションをかけていますが、単色でももちろんよいと思います。単色にする場合はlinear-gradient()の代わりにカラーコードのみを入れてください。

フローティングバナーをWordPressで設定する方法

WordPressでサイトを管理されている方も多いかと思いますので、設定方法を解説します。

前提として、ご利用のテーマ次第で設定方法は変わりますが、既成テーマの場合は下記のフローが当てはまることが多いです。

まず、WordPressの管理画面のサイドメニューから「外観 > ウィジェット」と進みます。

外観→ウィジェット

次に、サイドバー用のウィジェットとしてカスタムHTMLを選択し、この記事でご紹介したHTMLを貼り付けます。

サイドウィジェット

カスタムHTML

次にCSSを貼り付けていきます。WordPressの管理画面のサイドメニューから「外観 > カスタマイズ」と進みます。

外観→カスタマイズ

「追加CSS」を選択します。

追加CSS

コードを記入できるボックスが出てくるので、この記事で紹介したCSSを貼り付けます。

追加CSSボックス

この方法だと、サイド追従における横方向の配置はWordPressのテーマのサイドウィジェットに合わせればちょうどよくなりますので、PC表示ではright: 〜;の記述は外してください。スマホ表示(下部追従)では、画面の幅いっぱいにぴったりと広げるにはright: 0;が必要ですので、こちらは残してください。

以上で設定は完了です。

フローティングバナーまとめ

レスポンシブで実装できるフローティングバナーの作り方を解説してきました。

実装そのものはご紹介した方法で簡単に行えますが、「そもそもどういうバナーならクリックされるのか」「コンバージョンにつながりやすいバナーはどういうものか」といった部分は、セオリーはあるものの、最終的には扱う商材により異なるため個別に検証を重ねることが重要です。

フローティングバナーの文言や画像、色などを簡単にA/Bテストで検証できるツールCAOなら、クリック率やコンバージョン率が高いバナーを手軽に割り出せます

ユーザー登録後すぐに無料で使い始められるので、ぜひ試してみてください。


コンバージョン率を3分の操作で改善 CAO

  • このエントリーをはてなブックマークに追加