ウェブ制作

フローティングメニューとは?種類や配置例について

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

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

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

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

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

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

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

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

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

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

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

フローティングメニューの種類

フローティングメニューの種類をご紹介していきます。

ヘッダー固定型

ヘッダーが決まった位置に固定され、スクロールしても動かないパターンです。シンプルで見やすいフローティングメニューです。

メニューの一部が追従するパターン

画面をスクロールすると、メニューの一部が追従するパターンです。例えば、表示されているページに直接関係のあるメニューだけが追従したり、ヘッダーのロゴだけが追従するパターンなどがあります。

サイドバーが固定されているパターン

ヘッダーではなくサイドにメニューを固定するパターンです。メインコンテンツの横幅は狭くなりますが、メニューが多く、ヘッダーでは収まり切れない場合、メニューをサイドバーに設置して固定すると、どのメニューにも遷移しやすくなります。

別の追従メニューが表示されるするパターン

スクロールをすると、最初に表示されていたヘッダーのナビゲーションメニューは非表示なり、別途新たに新しいナビゲーションメニューが表示されるパターンです。

スクロールすると半透明になるパターン

スクロールすることでメニューが半透明になり、追従するパターンです。サイトの使いやすさはヘッダー固定型と変わりませんが、半透明にすることで可動域を広く見せることができます。

フローティングバナー

スマートフォン向けのサイトで、ページの下部に常に表示されているバナーをよく見かけますよね。
画面をスクロールしてもずっと表示されていて、画面の下に常にくっついているようなバナーのことを「フローティングバナー」といいます。

フローティングバナーのメリット・デメリット

    メリット

  • 画面をスクロールしても常に表示されていることから、ユーザーに情報を訴求しやすい
  • 実装が比較的容易で、レスポンシブデザインにも対応しやすい
  • バナーの幅や高さ、デザインをきちんと考慮すれば、ユーザビリティの観点からもデザインの観点からも比較的邪魔にならずに済む
  • デメリット

  • 使い方によっては、画面がごちゃごちゃして見づらく感じてしまう
  • フローティングバナーの近くに他のボタンなどがある場合、ユーザーがバナーとボタンを間違えてクリック(タップ)してしまい、ストレスを感じさせてしまう
  • 常に表示されていることから、ユーザー個人がメリットを感じられない場合に鬱陶しがられてしまう

まとめ

著者情報

オーパスプラン編集部

オーパスプラン編集メンバーが不定期で更新します。 ホームページ制作やウェブマーケティング、ウェブデザインに関する最新ニュースからノウハウまで、様々な情報を紹介していきます!

ホームページ制作で悩んだら、

まずはご相談を!

ご相談・お見積り 資料ダウンロード