追従ボタン（フローティングメニュー）とは？メリットとデザイン事例

ホームページのUIやUXを高める手段の1つとして、フローティングメニューまたは追従ボタンと呼ばれる機能があります。追従ボタンを実装することで、ユーザーが自然とコンバージョンページへと誘導されるので、高い成果を期待することができます。

当ページでは、追従ボタンとは何かや、メリット、デメリット、種類ごとのデザイン事例、ホームページに導入する方法を紹介します。

追従ボタン（フローティングメニュー）とは？

追従ボタンとは、フローティングメニューとも呼ばれ、画面をスクロールしてもディスプレイの特定の位置に固定されて表示され続けるコンテンツを指します。

例えば、ホームページを見ている時に、ページを下へ読み進めてもヘッダーが画面上部についてきたり、画面の右下に上に戻るボタンが常に表示されていたりする仕組みが追従ボタンにあたります。

特に、パソコンに比べて画面が小さいスマホでの表示において、追従ボタンを実装するメリットは非常に大きいです。追従ボタンがあれば、右上に設置されたMENUをいつでもタップできたり、ページの上部へ一瞬で戻れたりするため、UIやUXが向上して使いやすいホームページになります。

訪問者にとって、追従ボタンの有無は、情報の探しやすさや活用のしやすさを大きく左右する要素です。そのため、現在では大半のホームページで追従ボタンが導入されています。

訪問者にストレスを感じさせず、スムーズにサイト内を移動してもらうためには、追従ボタンの活用は欠かせません。

追従ボタンのメリット

ホームページに追従ボタンを導入すると、訪問者にとって使い勝手の良い環境を整えられます。その結果として得られる具体的なメリットは、離脱の防止と成果の向上に集約されます。

ホームページの回遊性が高まる

ページを閲覧しているユーザーは、自分が求めているコンテンツがすぐに見つからなければ、そのページを読み終えただけで直帰や離脱をしてしまいます。

追従ボタンを設置していることで、ユーザーがサイト内の他のコンテンツを探しやすくなるため、直帰率や離脱率を抑えることができます。例えば、長い記事を読み終えた後にわざわざページの一番上までスクロールし直す手間がなくなるからです。

いつでもスムーズにメニューを使える仕組みを整えることが、ホームページの回遊性を高め、自社の情報をより深く知ってもらうことにつながります。

問い合わせなどのコンバージョン率が上がる

追従ボタンを導入することで、ユーザーが相談したいと思った瞬間に、わざわざスクロールして連絡先を探し直す手間がなくなります。

サービスの強みに納得したタイミングや記事を読み終えた直後に、目の前にお問い合わせボタンが常に表示されている状態を保てるのが、追従ボタンの大きな強みです。視界に入りやすい位置に重要なボタンを配置し続けることで、ユーザーが迷う時間を削り、成約への心理的なハードルを下げられます。

ホームページの最終目標である問い合わせや購入などのコンバージョンを増やすために、追従ボタンの実装は非常に有効な手段です。

追従ボタンのデメリット

追従ボタンを導入する際には、メリットだけでなくデメリットも把握しておく必要があります。

デメリットは、追従ボタンが画面の一部を常に占領してしまうことです。特に表示エリアが限られているスマホなどのデバイスでは、ボタンのサイズや配置が適切でないと、肝心の本文や画像が隠れてしまい、ユーザーにとって閲覧の邪魔になることがあります。良かれと思って設置した追従ボタンが、かえってストレスを与え、離脱を招いたりコンバージョン率を下げたりする原因になっては本末転倒です。

また、ボタンのデザインが派手すぎたり、点滅などの過剰な演出で目立ちすぎたりすると、ユーザーの視線が本来読んでほしいコンテンツから逸れてしまうことがあります。さらに、複雑な実装方法を選んでしまうと、ページの読み込み速度に影響を与える可能性も否定できません。

そのため、追従ボタンを導入する際は、コンテンツの邪魔にならないサイズ感や配置を検討したり、サイト全体の表示速度を落とさないような適切な実装方法を選ぶことが非常に重要です。

追従ボタンを導入する方法

追従ボタンをホームページに導入する方法は、大きく分けて2つあります。サイト構造や管理者のスキルに合わせて、コードを書いて自作するか、プラグインに頼るかを選択するのが一般的です。

HTMLやCSSを使って自作する

HTMLやCSSファイルを編集して、追従ボタンを自作する方法があります。

CSSの「position: fixed;」という記述を使えば、特定のボタンやメニューを画面の決まった位置に固定できます。 自作のメリットは、ホームページのデザインに合わせてサイズや色、動きを自由自在に調整できる点です。

ただし、具体的な自作方法はホームページの構造や作り方によって大きく異なります。さらに、スマホとパソコンで表示内容を切り替えるといった細かな制御には専門知識が必要になるため、自社のホームページに合わせた最適な追従ボタンを導入したい場合は、制作会社などの専門家に相談するのが確実です。

WordPressならプラグインを活用する

WordPressでホームページを制作しているなら、プラグインを活用するのが最も手軽な方法です。コードを一切書かなくても、管理画面から画像やリンク先を設定するだけで、簡単に追従ボタンを設置できます。

特によく使われている2つのプラグインを紹介します。

これらのプラグインは、配置の変更やボタンの追加もマウス操作で直感的に行えるため、HTMLやCSSの知識がない担当者でも、効果的な追従ボタンをすぐに導入できるのが魅力です。

まずはコストをかけずに、追従ボタンの反応を試してみたい場合に最適です。

追従ボタンの種類とデザイン事例

追従ボタンは、ホームページの目的や構成に合わせていくつかの種類があります。ここでは、ホームページでよく使われる代表的な追従ボタンの種類と、それぞれのデザイン事例を紹介します。

ヘッダー固定

多くの会社が採用しているのが、ヘッダー固定の追従ボタンです。

弊社の制作実績では、ろ材の再資源化を提案する非営利団体様がこの形式を採用しています。パソコンとスマホの両方で常にメニューを表示させることで、ユーザーがどの位置にいても迷わず次のアクションへ移れるよう工夫しました。

もちろん、パソコンのみ、あるいはスマホのみに限定した設定も可能です。

今回の事例では、アクセス解析でデバイスの利用率が半々だったため、全てのユーザーにとってのクリックしやすさを追求し、両方のデバイスでヘッダー固定を実装しました。

CTAボタンの追従

CTAとは、お問い合わせや資料請求など、成果に直結するボタンのことです。

このCTAボタンを追従させることで成果を上げている、2つの制作実績を紹介します。

1つ目は、害虫・害獣駆除を行う企業のホームページです。スマホユーザーが多かったため、あえてスマホ版に絞って、電話番号と問い合わせを追従ボタンとして設置しました。その結果、月間の問い合わせ数を約3％増やすことに成功しています。

2つ目は、カナダ留学を支援されている企業のホームページです。パソコンでは画面右端に、スマホでは画面下部にLINEで相談ボタンを追従させました。

こちらのホームページはコラムなどの読み物ページが多いため、文章を読む邪魔にならない位置を慎重に検討しました。実際にLINEでの相談数が増え、メールでの相談数を減らすという、より気軽なコミュニケーションの促進につながっています。ユーザーが相談したいと思った瞬間に、ストレスなくタップできる仕様です。

グローバルナビゲーションの一分だけが追従

弊社の制作実績ではありませんが、東京ディズニーリゾートの公式サイトでは、メインメニューの下にある一部のナビゲーションのみを追従ボタンにする工夫がされています。ページを下にスクロールしても、特定の選択肢が常に画面上部に固定される設計です。

この仕組みはスマホでも同様に採用されており、情報量の多い大規模サイトや、多くの商品を扱うネットショップにとって非常に便利な活用法です。画面を広く使いながらも、ユーザーを迷わせない導線を作りたい場合に非常に有効な手段となります。

サイドバーの固定

弊社の制作実績ではありませんが、二木ゴルフの公式サイトでは、パソコンで見るとサイドバーが固定されており、スクロールしてもメニューが追いかけてくる仕様です。常に重要な情報が視界に入るため、ユーザーが迷わず回遊できるようになっています。

また、パソコンではサイドにあるメニューも、スマホで見るとページ上部に固定されるように切り替わっており、非常に見やすいホームページとなっています。

デバイスに合わせて追従ボタンの配置を最適化することで、操作性を損なうことなく利便性を高めている好例です。

まとめ

追従ボタンは、ホームページのUIとUXを高め、お問い合わせへ導くための強力なツールです。

常にメニューや連絡先が表示されることで、ユーザーは興味を持った瞬間にストレスなく次のアクションを起こせます。導入時は、ホームページの目的や環境に合わせてプラグインやコードを使い分け、閲覧の邪魔にならないよう配慮することが大切です。

ユーザー視点に立った使いやすいホームページを目指し、追従ボタンの実装を検討してはいかがでしょうか。