- 公開日： 最終更新日：
フローティングメニュー（追従ボタン）とは？メリット・デメリットや事例を紹介
ホームページのUIやUXを高める手段の1つとして、追従ボタンすなわちフローティングメニューと呼ばれる機能があります。フローティングメニューを実装することで、ユーザーが自然とコンバージョンへと誘導されるので、高い成果を期待することができます。
当ページでは、フローティングメニューとは何かや、メリット、デメリット、活用事例、WordPressに実装できるプラグインを紹介します。
目次
フローティングメニュー（追従ボタン）とは
フローティングメニューとは、追従ボタンとも言い、ディスプレイの特定の位置に固定されたコンテンツのことを言います。
たとえば、よく見かけるフローティングメニューとして、当サイトをスマホで見たときに、ページの下部にスライドしても、ヘッダーが追従しており、これがフローティングメニューになります。
スマホでの表示に、フローティングメニューを実装することで、右上に設置されたMENUボタンをいつでもクリックができるので、UIやUXが最適化され、高い効果が見込めます。
特に、スマホユーザーにとっては、フローティングメニューがあるとないでは、ホームページの活用のしやすさが大きく変わってくるので、大半のホームページでフローティングメニューが導入されています。
フローティングメニューのメリット
フローティングメニューを設置することで、ユーザーは迷わず目的の情報にたどり着けます。その結果、サイト全体の使いやすさが向上し、成果に直結する行動につながりやすくなります。ここでは、フローティングメニューのメリットを解説します。
ユーザー導線を最適化して直帰率を下げられる
通常のホームページでは、ユーザーがページをスクロールするとナビゲーションが見えなくなり、別ページに移動したいときに一度上まで戻る必要があります。これが離脱や直帰につながる大きな原因です。
フローティングメニューを導入すれば、スクロールしても常にナビゲーションが目に入るため、ユーザーはすぐに別ページへ移動できます。特にスマホのように画面が小さい環境では効果が絶大で、求める情報にすぐアクセスできる快適さが離脱や直帰率の低下につながります。
さらに、メニューをシンプルに整理すれば、読みたいコンテンツが他にもあると気づいてもらいやすくなり、滞在時間や回遊性の向上にも直結します。
コンバージョンにつながりやすくなる
フローティングメニューは、常にクリックできる導線なので、問い合わせ・資料請求といったコンバージョンに直結する要素を配置すると効果を発揮します。
たとえば、スマホ画面の下部に「電話する」「無料相談」などのCTAボタンを設置すれば、ユーザーが気になったと思った瞬間にすぐ行動できる環境を作れます。わざわざ問い合わせページを探す手間が省けるので、機会損失を防げるのです。
実際に、当社の実績では、CTAボタンをフローティング化することで月間問い合わせ数が10件ほど増加したケースも見られます。
つまり、フローティングメニューは、ユーザーの熱が冷める前に行動へ導く強力な仕組みと言えるでしょう。
フローティングメニューのデメリット
フローティングメニューは設置の仕方を誤るとユーザー体験を損ねてしまうことがあります。導入する際には、メリットだけではなくデメリットも理解しておくことが重要です。ここでは、フローティングメニューのデメリットを解説します。
表示領域を圧迫する
スマホやタブレットのように画面が限られているデバイスでは、フローティングメニューが大きすぎると、閲覧スペースを狭めてしまいます。ユーザーが記事を読み進めようとしても、画面の一部が常に隠れていてストレスになる可能性があります。
特にコンテンツ量が多いブログやECサイトでは、読みやすさ・商品画像の見やすさが阻害されると、かえって離脱率が上がるリスクもあります。
解決策としては、必要最低限のメニューだけを追従させる、サイズを抑える、スクロールに応じて自動的に非表示にするといった工夫が効果的です。
ユーザーにとって便利か邪魔かの境界線を意識することが欠かせません。
デザインに工夫が必要になる
フローティングメニューは常に目に入る要素だからこそ、デザインが浮いていると不快感を与えてしまいます。
たとえば、背景色とコントラストが強すぎる、アニメーションが派手すぎる、ボタンの形が統一されていないなどは典型的な失敗例です。
また、フローティングメニューの配置場所によっても、クリックのしやすさや見やすさが大きく変わります。特にスマホユーザーは片手操作が多いため、親指でタップしやすい位置に置くといったUX設計が求められます。
デザイン面での工夫次第で、同じフローティングメニューでも押しやすい便利な導線になるか押したくない邪魔な要素になるかが分かれるのです。
導入時には、見た目の一貫性とユーザビリティを両立させることが成功のカギになります。
フローティングメニューの活用事例
フローティングメニューを実装する際には、他のホームページの使い方を参考にするのが効果的です。ここでは、フローティングメニューの活用事例を解説します。
ヘッダーを固定して常にナビゲーションを表示する
多くの企業サイトが採用しているのが、ヘッダーを固定するフローティングメニューです。
スクロールしても常に上部にナビゲーションが表示されるため、ユーザーはページ上部まで戻らずに他のページへ移動できます。
制作実績では、ろ材再資源化協会のホームページがこの方式を採用しています。
パソコンでの表示例はこちらです。
次にスマホでの表示例はこちらです。
ヘッダー固定型のフローティングメニューは、大規模なホームページや回遊性を高めたいホームページに特に効果的です。常にナビゲーションが見えることで、迷わず必要な情報にアクセスでき、直帰率の低下や滞在時間の向上につながります。
CTAボタンを追従させて行動を促す
CTAボタンとは、コンバージョンに繋がるリンクボタンのことを言います。
CTAボタンの追従を行っている制作実績のホームページは2社あります。
1社目は、制作実績のライフディフェンスのホームページになり、パソコンではなくスマホで採用しています。
その結果、コンバージョン率が高まり、月間の問い合わせ数を5％ほど増やすことに成功しています。このように、スマホでのCTAボタンの追従は、移動中や片手操作が多いユーザーに特に効果的です。
2社目は、制作実績のピュアカナダのホームページになり、パソコンとスマホの両方でCTAボタンのフローティングメニューを設置しています。
パソコンでは、ページの右端にラインで相談というCTAボタンがあり、こちらのボタンはページを下部にスライドしても追従し、クリックすることでQRコードが表示されます。
スマホでは、ラインで相談というボタンをページ下部に設置し、ページをスライドしても追従する仕様です。
ピュアカナダのホームページでは、読み物系ページが多いので、ページ下部にフローティングメニューを設置することで記事の邪魔をせず、必要な時にすぐクリックできる環境を整えています。
実際の効果としては、当初想定していたよりも多くの方に公式ラインに登録していただいており、お客様も満足できる結果となっています。
グローバルナビゲーションの一部だけを追従させる
制作実績ではありませんが、東京ディズニーリゾートのホームページを下にスライドすると、メインのグローバルナビゲーションの下にあるサブナビゲーションのみが追従しています。
スマホでも同じ動作になっていて、大規模サイトやネットショップにとっては便利なフローティングメニューの活用法と言えるでしょう。
サイドバーを固定して情報を見やすくする
制作実績ではありませんが、二木ゴルフのホームページは、パソコンで見るとサイドバーが固定されています。
また、パソコンではサイドですが、スマホで見ると、ページ上部に固定化されていて、見やすいホームページとなっています。
このようにサイドバーを固定することで、キャンペーン情報やサービス一覧などを常に表示でき、ユーザーが欲しい情報にすぐアクセスできる点が大きなメリットです。
WordPressで使えるフローティングメニュープラグイン
WordPressにフローティングメニューを導入するなら、専用プラグインを使うのが最も手軽で確実です。コードを書かなくても導入でき、デザインや機能をクリック操作だけで調整できます。ここでは、実際によく利用されているWordPressのフローティングメニュープラグインを紹介します。
Blog Floating Buttonは、初心者でも扱いやすいシンプルなプラグインです。4種類のデザインから選んで設置できるため、見た目をすぐに整えられるのが大きな特徴です。
設定画面からリンク先を自由に指定できるので、「トップへ戻るボタン」「問い合わせページへのリンク」「電話発信ボタン」など、ホームページの目的に合わせて活用できます。インストール後はすぐに反映されるため、実際の表示を確認しながら改善できるのもメリットです。
WordPressに不慣れな方や、まずは簡単にフローティングメニューを導入したい方に適しています。
fixed Bottom Menuは、利用者が多い定番のフローティングメニュープラグインです。上部・下部・サイドにフローティングメニューを配置できます。
電話・メール・LINE・トップページなど複数のボタンを固定表示でき、ユーザーは常にワンタップで行動できます。また、アイコンの指定やテキスト設定、列数、高さ・行間などの基本スタイルを調整できます。
ホームページのデザインに合わせやすいのが魅力です。
まとめ：フローティングメニューはUI/UXを高める機能
ここまで、フローティングメニューの特徴やメリット・デメリット、活用事例、WordPressで導入できるプラグインを紹介してきました。
フローティングメニューは、ユーザーが必要な情報にすぐアクセスできる環境をつくり、ホームページのUI/UXを大きく向上させる機能です。結果として、回遊性が高まり、問い合わせや購入といったコンバージョンにつながりやすくなります。
導入方法も難しくなく、WordPressであればプラグインを利用するだけで簡単に実装できます。まずは自社サイトの目的に合った形で取り入れてみることで、その効果を実感できるはずです。
