- 公開日： 最終更新日：
フローティングメニュー（追従ボタン）とは？メリットや種類、導入事例
ホームページのUIやUXを高める手段の1つとして、追従ボタンすなわちフローティングメニューと呼ばれる機能があります。
フローティングメニューを実装することで、ユーザーが自然とコンバージョンページへと誘導されるので、高い成果を期待することができます。
当ページでは、フローティングメニューとは何かや、メリット、デメリット、種類と事例、WordPressに実装できるプラグインを紹介します。
目次
フローティングメニュー（追従ボタン）とは
フローティングメニューとは、追従ボタンとも言い、ディスプレイの特定の位置に固定されたコンテンツのことを言います。
例えば、よく見かけるフローティングメニューとして、当サイトをスマートフォンで見たときに、ページの下部にスライドしても、ヘッダーが追従しており、さらにページの上部に戻るボタンも追従されていて、これがフローティングメニューになります。
スマートフォンでの表示に、フローティングメニューを実装することで、右上に設置されたMENUボタンをいつでもクリックができたり、ページの上部に戻るボタンもクリックしやすくなるので、UIやUXが最適化され、高い効果が見込めます。
特に、スマートフォンユーザーにとっては、フローティングメニューがあるとないでは、ホームページの活用のしやすさが大きく変わってくるので、大半のホームページでフローティングメニューが導入されています。
フローティングメニューのメリット
フローティングメニューを実装することで、ホームページのユーザビリティが高まります。
例えば、ユーザーがページの中ほどまで読んだときに、もしグローバルナビゲーションを使って別ページに移動したいと思えば、すぐにユーザーは行動を起こすことが可能になります。
つまり、ユーザー導線が最適化されることを意味しており、ホームページの直帰率を大きく下げることができるので、コンバージョン率を高めることが可能です。
他にも、問い合わせページへのリンクや電話番号をフローティングメニューにすることで、少しでも問い合わせしたいと感じたユーザーをスムーズにコンバージョンに繋げることが可能です。
このように、ユーザー導線を最適化できるフローティングメニューは、ユーザビリティの高いホームページにとって必須と言えます。
フローティングメニューのデメリット
フローティングメニューのデメリットは、画面の一部を占有されてしまうことになります。
特にスマートフォンにおいては、画面自体が小さくなっているので、フローティングメニューが訪問者がコンテンツを読む邪魔になる可能性があります。
例えば、フローティングメニューの数が多いや、サイズが大きい、目立ちすぎる色を利用している場合などは、肝心のコンテンツを読む邪魔となってしまうので注意が必要です。
フローティングメニューを設置する際には、ユーザーのアクションや導線をサポートするものと認識して、ユーザビリティが下がってしまわないような工夫が必要になります。
フローティングメニューの種類と事例
フローティングメニューの種類を解説します。
ヘッダー固定
多くの会社が採用しているのがヘッダー固定のフローティングメニューです。
制作実績のホームページでは、ろ材の再資源化を提案する非営利団体がヘッダー固定のフローティングメニューを採用しています。
パソコンでの見栄えは以下です。
スマートフォンの見栄えは以下です。
もちろん、パソコンだけやスマートフォンだけにも対応ができます。
しかし、ろ材の再資源化を提案する非営利団体では、あまりパソコンを利用しない方がターゲットになるため、リンクのクリックのしやすさを追求して、パソコンとスマートフォンの両方でヘッダーを追従させています。
CTAボタンの追従
CTAボタンとは、コンバージョンに繋がるリンクボタンのことを言います。
CTAボタンの追従を行っている会社は2社あります。
1社目は、制作実績の害虫と害獣を駆除する会社のホームページになり、パソコンではなくスマートフォンで、採用しています。
その結果、コンバージョン率が高まり、月間の問い合わせ数を3,4件増やすことに成功しています。
また、別の会社として、大阪にあるカナダ留学を支援する会社のホームページでコンバージョンのフローティングメニューを設置しました。
パソコンでは、ページの右端に「ラインで相談」というボタンがあり、こちらのボタンはページを下部にスライドしても追従し、クリックすることでQRコードが表示されます。
スマートフォンでは、「ラインで相談」というボタンをページ下部に設置し、ページをスライドしても追従する仕様にしています。
カナダ留学を支援する会社のホームページでは、読み物系ページの数が多いので、サイドだとコンテンツを読む邪魔になると判断して下部に設置しました。
グローバルナビゲーションの一分だけが追従する
制作実績ではありませんが、東京ディズニーリゾートのホームページを下にスライドすると、メインのグローバルナビゲーションの下にあるナビゲーションのみが追従しています。
スマートフォンでも同じ動作になっていて、大規模サイトやネットショップにとっては便利なフローティングメニューの活用法と言えるでしょう。
サイドバーが固定されている
制作実績ではありませんが、二木ゴルフのホームページは、パソコンで見るとサイドバーが固定されています。
また、パソコンではサイドですが、スマートフォンで見ると、ページ上部に固定化されていて、見やすいホームページとなっています。
WordPressにフローティングメニューを実装できるプラグイン
WordPressにフローティングメニューを実装できるプラグインを解説します。
| Blog Floating Button | 4つのデザインからフローティングメニューを選択できる 初心者でも扱いやすいプラグイン |
| fixed Bottom Menu | 多くの方がおすすめしているフローティングメニューのプラグイン プラグイン名で検索すれば多くのホームページが設定法を紹介している |
フローティングメニューのまとめ
フローティングメニューについて解説しました。
フローティングメニューはUIやUXを高める効果があるので、ホームページのユーザビリティが高まり、コンバージョン数を向上させることができます。
フローティングメニューって何？とお思いの方の参考になれば幸いです。
