フローティングバナーとは？効果・設置方法・クリック率の目安
記事は読まれているのに問い合わせや申し込みにつながらない、と感じてフローティングバナーを検討していませんか。
画面に固定されるバナーは、読者がどこまでスクロールしても導線を残せる一方で、置き方を誤ると読みにくさそのものの原因になります。
この記事では、フローティングバナーの意味と効果、置ける5つの位置、3つの設置方法、そして邪魔にならないための設計を順に解説します。
当社は自社で複数のWebメディアを運営しており、バナーの設置と効果測定を日常的に行っています。
その運用で分かった実務の話としてお読みください。
- フローティングバナー・追従バナー・フローティングボタンの呼び分け
- 画面のどこに置けるのか。5つの位置と、それぞれの向き不向き
- CSS・テーマの機能・プラグインという3つの設置方法の選び方
- 邪魔にならない設計と、置いたあとに効果を確かめる方法
読み終えたときには、自社サイトのどこに何を置くかを自分で決められる状態になります。
WordPressプラグインの受託開発を承っています。
既製のプラグインでは要件が合わず、カスタマイズで無理やり回している——という場合はご相談ください。
当社は自社で開発したプラグインをWordPress公式ディレクトリで公開しています。
＼ ご相談は無料です ／
要件が固まっていない段階でも構いません。実現可否と規模感だけのご相談も歓迎です。
フローティングバナーとは？スクロールしても残り続けるバナー
フローティングバナーとは、ページをスクロールしても画面の決まった位置に留まり続けるバナーのことです。
本文と一緒に流れていく通常のバナーと違い、画面に対して固定されているため、読者がどこまで読み進めても視界から消えません。
技術的には、CSSの position: fixed で画面に対する位置を固定することで実現しています。
記事の下まで読んでもらえるとは限らないWebサイトで、読み終える前に離れる読者にも導線を残せるのが、この形式の役割です。
追従バナー・フローティングボタンとの違い
結論から書くと、これらは同じものを違う言葉で呼んでいるだけで、機能上の区別はありません。
制作会社や記事によって呼び方が揺れているだけなので、見積書や指示書で言葉が食い違ったら、指しているものが同じかを最初に確認しておくと早いです。
| 呼び方 | ニュアンスの違い |
|---|---|
| フローティングバナー | 画像を使った横長のものを指すことが多い |
| 追従バナー | 同じもの。「スクロールに追従する」動きのほうを強調した言い方 |
| フローティングボタン | 画像ではなくボタン1つを固定する場合に使われやすい |
| フローティングメニュー | 複数のリンクをまとめて固定する場合に使われやすい |
離脱防止ポップアップとは役割が違う
混同されやすいものに、離脱防止ポップアップ（モーダル）があります。
フローティングバナーがページを開いている間ずっと出し続けるのに対して、離脱防止ポップアップは離れようとした瞬間だけ画面の中央に出すものです。
常時表示のフローティングバナーは主張が弱いぶん邪魔になりにくく、ポップアップは一度きりの代わりに主張が強い、という関係になります。
読ませたい内容が「いつでも押せる導線」なら前者、「今このページを離れる人への引き止め」なら後者が向きます。
フローティングバナーのメリットとデメリット
メリット：読み終えなくても導線が届く
最大の利点は、記事の最後まで読まなかった読者にも導線を見せられることです。
記事下のボタンやバナーは、そこまでスクロールした人にしか見えません。
途中で離脱した読者にとっては、そのボタンは存在しなかったのと同じです。
画面に固定しておけば、読み始めてすぐ離れる人にも、最後まで読む人にも、同じ導線が届きます。
加えて、本文の途中に何度もボタンを差し込む必要がなくなるため、記事の流れを止めずに済むという副次的な効果もあります。
デメリット：本文を隠すと逆効果になる
常に画面に残るということは、常に本文の一部を隠しているということでもあります。
とくにスマートフォンは画面が狭いため、高さのあるバナーを下部に固定すると、読める範囲が目に見えて減ります。
閉じるボタンがない、押しても消えない、スクロールのたびに視界に入る、といった状態になると、読者はバナーではなくページごと離れます。
もうひとつ見落とされやすいのが、スマホの画面下部は他のUIと重なりやすいことです。
ブラウザのツールバー、テーマ側の固定メニュー、フォームを開いたときのキーボードなどと干渉し、肝心のボタンが押せなくなることがあります。
設置したら、必ず実機で確認してください。
フローティングバナーはどこに置く？5つの位置と選び方
置ける位置はおおむね5つで、目に入る量と、本文を隠す量はトレードオフの関係にあります。
迷ったら、スマートフォンでは下部いっぱい、パソコンでは下部右から試すのが無難です。
スマホは画面が狭く、横幅を使ったほうが文字が読める大きさになります。
一方パソコンは横に余白があるため、右下に小さく置けば本文をほとんど隠しません。
上部への固定は、ヘッダーと重なって二重の帯になりやすいので、期間限定の告知などいずれ外すものに向きます。
常設の申し込み導線を上部に置くのは避けたほうが無難です。
フローティングバナーの設置方法は3つ
設置手段は、CSSで自作する・テーマの機能を使う・プラグインを使うの3つに分かれます。
「バナーを画面に固定して表示する」だけならどの方法でもできます。
差が出るのは、出す相手を絞れるかと、押されたかどうかが分かるかの2点です。
| やりたいこと | CSSで自作 | テーマの機能 | プラグイン |
|---|---|---|---|
| コードを書かずに設置する | |||
| ページ単位で出し分ける | |||
| PCとスマホで出し分ける | |||
| 閉じた人に一定期間出さない | |||
| クリック数を記録する | |||
| テーマを変えても設定が残る |
テーマの機能は製品ごとに差があり、ボタンのクリック計測を備えるテーマもあります。
プラグイン欄は当社が公開しているものを基準にしています。製品によって対応範囲は異なります。
CSSで自作する
いちばん自由度が高く、見た目を思いどおりにできる方法です。
HTMLでバナーの中身を書き、CSSで position: fixed と表示位置を指定すれば、それだけで画面に固定できます。
制作会社に依頼している場合や、社内にコードを触れる人がいる場合は、この方法が最短です。
注意したいのは、「固定して表示する」だけなら簡単でも、条件を足すたびに実装が増えることです。
特定のページだけに出す、閉じたら一定期間出さない、押された回数を数える、といった要件は、いずれもJavaScriptを書き足すことになります。
もうひとつ、テーマのカスタマイズ欄に直接書いた場合、テーマを変更した時点で消えます。
あとから運用する人が困らないよう、どこに何を書いたかは残しておいてください。
テーマの機能を使う
WordPressのテーマによっては、スマホ用の固定メニューや追従ボタンの機能が最初から備わっています。
すでに使っているテーマにその機能があるなら、まずはそれで足りるかを確かめるのが先です。
新しく何かを追加しなくて済むぶん、表示速度にも保守にも影響しません。
弱点は2つあります。
ひとつは、ページ単位の細かい出し分けまではできないことが多い点です。
もうひとつは、テーマの機能である以上、テーマを乗り換えると設定ごと失われる点です。
プラグインを使う
コードを書かずに、表示条件と効果測定までまとめて扱いたい場合は、プラグインが向きます。
管理画面から設定するため、公開後に文言や画像を差し替えるのも運用担当者だけで完結します。
制作会社に納品してもらったサイトで、更新のたびに依頼が発生している場合は、この点だけでも効きます。
当社も、自社メディアの運用で同じ課題に当たったことから、フローティングバナーと離脱防止ポップアップを設置できるプラグインを作り、WordPress公式ディレクトリで無料公開しています。
表示するページの条件、PCとスマホの出し分け、閉じた人への再表示の抑制、そして表示数とクリック数の記録までを、管理画面の設定だけで扱えます。
3つの方法でも要件が満たせないときは
ここまでの3つは、いずれもすでにあるものを使う方法です。
既製のプラグインでは条件が足りない、自社の業務フローに合わせた挙動が必要、他システムと連携させたい——といった場合は、プラグインそのものを作るという選択肢もあります。
当社はWordPressプラグインの受託開発も承っており、社内で使うだけのものから公式ディレクトリでの公開まで対応しています。
既製品を組み合わせるより、必要な機能だけを持つものを1つ作ったほうが、結果的に運用が簡単になることもあります。
＼ ご相談は無料です ／
実現できるかどうかと、おおよその規模感だけのご相談も歓迎です。
邪魔にならないフローティングバナーにする5つのポイント
「邪魔」と感じられるかどうかは、バナーを置いたかどうかではなく置き方で決まります。
最低限、次の5つは押さえてください。
1. 高さを抑える
スマートフォンで画面の高さの1割を超えると、読める範囲が目に見えて減ります。
横長の細い帯に収め、文字を詰め込まないのが基本です。
2. 閉じるボタンを必ず付ける
消せないバナーは、それだけで離脱の理由になります。
閉じるボタンは指で押せる大きさにしてください。
見た目を優先して小さくすると、押し損ねてバナー本体を踏んでしまい、意図しない遷移が起きます。
3. 一度閉じたら、しばらく出さない
閉じたのにページを移動するたび復活するバナーは、印象を確実に悪くします。
Cookieなどで「閉じた」状態を覚えておき、数日は出さない設計にします。
4. ファーストビューでは出さない
開いた瞬間から表示されていると、まだ何のページか分からないうちに邪魔者として認識されます。
少しスクロールしてから現れる設定にすると、読む気のある人にだけ届くようになります。
5. 出す必要のないページでは出さない
問い合わせフォームや申し込み完了ページで、同じ申し込みを促すバナーが出続けているサイトは珍しくありません。
入力の邪魔になるだけなので、フォーム系のページは除外しておきます。
ページ単位で非表示にできるかどうかは、設置方法を選ぶ段階で確認しておきたい点です。
フローティングバナーのクリック率はどれくらい？
先に率直に書くと、フローティングバナーのクリック率について、信頼できる業界平均は公開されていません。
置く位置、扱う商材、訪問者の温度感で数字が大きく動くため、他社の数値を持ってきても自社の判断材料にはなりにくいのが実情です。
そのため現実的なやり方は、自社サイトで測って、自社の過去と比べることになります。
見るべき数字は3つだけです。
- 表示数：バナーが実際に表示された回数
- クリック数：押された回数
- CTR（クリック率）：クリック数を表示数で割った値
この3つを日別に残しておけば、文言を変えた前後や、位置を変えた前後で比較できます。
計測手段は、GA4のイベントを設定するか、記録機能を持つプラグインを使うかのどちらかです。
ひとつ注意点があります。
GA4の「離脱クリック」で自動的に記録されるのは外部ドメインへのリンクだけなので、自社サイト内の問い合わせページへ送るバナーは、設定を足さないと数えられません。
クリック率が低いときに、バナーを直す前に見る場所
数字が伸びないとき、色や文言を変える前に確かめておきたいことがあります。
そもそも本文が読まれているのか、という点です。
ページを開いてすぐ離れられているなら、原因はバナーではなく、検索意図とページ内容のずれや、ファーストビューの見せ方にあります。
この切り分けは、ホームページで集客できない原因を4つの関門に分けて確かめる方法を解説した記事にまとめています。
バナーの改善が効くのは、読まれてはいるが行動されていない場合です。
フローティングバナーに関するよくある質問
追従バナーとフローティングバナーは同じものですか？
同じものです。
スクロールしても画面に固定されて表示され続けるバナーを、書き手によって「フローティングバナー」「追従バナー」と呼び分けているだけで、機能上の区別はありません。
フローティングバナーのデメリットは何ですか？
常に本文の一部を隠すことです。
とくにスマートフォンでは読める範囲が減るため、高さを抑える、閉じるボタンを付ける、一度閉じたらしばらく出さない、という3点で影響を抑えます。
特定のページだけフローティングバナーを非表示にできますか？
設置方法によります。
プラグインには表示するページや除外するページを指定できるものがあり、管理画面から設定できます。
CSSで自作した場合は、条件分岐を書き足すことになります。
フローティングバナーはSEOに悪影響がありますか？
通常のサイズであれば問題になりません。
Googleが問題としているのは、検索から遷移した直後にコンテンツを覆い隠す大きなインタースティシャルであり、画面の一部を占めるだけのバナーは対象外とされています。
ただし、本文が読めないほど大きい、閉じられない、といった状態は使い勝手の評価に影響し得るので、サイズと閉じる導線は確保してください。
フローティングバナーは複数置いてもいいですか？
1画面につき1つに留めることをおすすめします。
固定要素が増えるほど本文の面積が減り、どれを押せばいいのかも伝わらなくなります。
訴求を分けたい場合は、同時に出すのではなく、ページの種類によって出し分けてください。
まとめ：フローティングバナーは置き方と測り方で決まる
フローティングバナーは、記事を最後まで読まない読者にも導線を届けられる、費用のかからない打ち手です。
一方で、本文を隠す以上は置き方を間違えると読みやすさを削るだけになります。
- 位置はスマホなら下部いっぱい、PCなら下部右から試す
- 高さを抑え、閉じるボタンを付け、閉じたらしばらく出さない
- フォームなど出す必要のないページでは非表示にする
- 表示数・クリック数・CTRを日別に残し、変更の前後で比べる
設置方法は、コードを書ける環境ならCSS、すでにテーマに機能があるならその機能、出し分けと計測まで管理画面で扱いたいならプラグインという順で検討すれば迷いません。
置いて終わりにせず、数字を残すところまでを最初の設計に含めてください。
そして、既製の方法では要件が満たせないと分かった時点で、作ってしまったほうが早いケースもあります。
判断に迷ったら、実現できるかどうかだけでもお気軽にご相談ください。
「こういうプラグインがあれば回るのに」——そこで止まっていませんか？
WordPressプラグインの
受託開発を承っています
既存のプラグインでは要件が満たせず、テーマのカスタマイズで無理やり回している——というご相談をよくいただきます。
当社は自社メディアの運用で必要になった機能を自分たちでプラグイン化し、WordPress公式ディレクトリで公開しています。
公式ディレクトリは、命名規則・出力エスケープ・入力サニタイズ・国際化などの審査を通す必要があります。
社内で使うだけのものから、公式ディレクトリでの公開まで対応します。Chrome拡張の開発も同様です。
要件が固まっていない段階でもかまいません。「そもそも作れるのか」の判断だけでもお答えします。
＼ ご相談は無料です ／
実現できるかどうかと、おおよその規模感だけのご相談も歓迎です。