フローティングメニューとは？フローティングメニューの種類と配置例をご紹介

UI/UXの改善に欠かせないフローティングメニュー。特にスマートフォンでは小さなディスプレイの中で如何にしてユーザビリティの高い導線を確保するのかが課題となります。
そこで今回は、フローティングメニューとは？フローティングメニューの種類と配置例をご紹介していきます。フローティングメニューの導入を考えている方は、ぜひ参考にしてみてください。

フローティングメニューとは？

フローティングメニューとは、ディスプレイの特定の位置に固定されているメニューのことです。「追従型メニュー」とも呼ばれます。フローティングメニューを設置すれば、ヘッターやフッターに常にメニューを表示させておくことになるので、メニューを使いたいときにそこまでスクロールしていく必要がありません。スマホでの閲覧が増えるにつれフローティングメニューを採用するサイトが増え、今ではほとんどのサイトで使用されています。

フローティングメニューのメリット・デメリット

それでは、フローティングメニューのメリットとデメリットを解説していきます。

フローティングメニューのメリット

フローティングメニューを取り入れることのメリットは、一言で説明するとサイトのユーザビリティを向上させられることです。メニューを使いたいときにスクロールしてサイト上部に戻る必要がないので、サイトの操作性が良くなります。他のページにアクセスするための導線が短くなるためサイトの直帰率を下げることも期待できます。

また、フローティングメニューは画面上に常に表示されるので、メニューがユーザーの目につきやすくなり、こちらの意図するボタンをクリックさせることができます。お問い合わせや使用請求などのメニューがフローティングメニューにあれば、コンバージョンにつなげるための導線を確保できるので、サービス内容や強みなどのアピールしたいページへ誘導することができます。その結果、ページビュー数やコンバージョン数の増加に貢献することが期待されます。

フローティングメニューのデメリット

フローティングメニューを設置することで、画面の特定の位置に常時メニューが表示されるようになるため、当然その分画面が狭くなります。特に、画面の小さなスマートフォンではかえってサイトが見づらくなることがあります。そのような場合は、フローティングメニューの幅を調整することで、ユーザビリティが悪くならないように注意しましょう。