ウェブ制作
フローティングメニューとは？フローティングメニューの種類と配置例をご紹介
UI/UXの改善に欠かせないフローティングメニュー。特にスマートフォンでは小さなディスプレイの中で如何にしてユーザビリティの高い導線を確保するのかが課題となります。
そこで今回は、フローティングメニューとは？フローティングメニューの種類と配置例をご紹介していきます。フローティングメニューの導入を考えている方は、ぜひ参考にしてみてください。
フローティングメニューとは？
フローティングメニューとは、ディスプレイの特定の位置に固定されているメニューのことです。「追従型メニュー」とも呼ばれます。フローティングメニューを設置すれば、ヘッターやフッターに常にメニューを表示させておくことになるので、メニューを使いたいときにそこまでスクロールしていく必要がありません。スマホでの閲覧が増えるにつれフローティングメニューを採用するサイトが増え、今ではほとんどのサイトで使用されています。
フローティングメニューのメリット・デメリット
それでは、フローティングメニューのメリットとデメリットを解説していきます。
フローティングメニューのメリット
フローティングメニューを取り入れることのメリットは、一言で説明するとサイトのユーザビリティを向上させられることです。メニューを使いたいときにスクロールしてサイト上部に戻る必要がないので、サイトの操作性が良くなります。他のページにアクセスするための導線が短くなるためサイトの直帰率を下げることも期待できます。
また、フローティングメニューは画面上に常に表示されるので、メニューがユーザーの目につきやすくなり、こちらの意図するボタンをクリックさせることができます。お問い合わせや使用請求などのメニューがフローティングメニューにあれば、コンバージョンにつなげるための導線を確保できるので、サービス内容や強みなどのアピールしたいページへ誘導することができます。その結果、ページビュー数やコンバージョン数の増加に貢献することが期待されます。
フローティングメニューのデメリット
フローティングメニューを設置することで、画面の特定の位置に常時メニューが表示されるようになるため、当然その分画面が狭くなります。特に、画面の小さなスマートフォンではかえってサイトが見づらくなることがあります。そのような場合は、フローティングメニューの幅を調整することで、ユーザビリティが悪くならないように注意しましょう。
フローティングメニューの種類
フローティングメニューの種類をご紹介していきます。
ヘッダー固定型
ヘッダーが決まった位置に固定され、スクロールしても動かないパターンです。シンプルで見やすいフローティングメニューです。
メニューの一部が追従するパターン
画面をスクロールすると、メニューの一部が追従するパターンです。例えば、表示されているページに直接関係のあるメニューだけが追従したり、ヘッダーのロゴだけが追従するパターンなどがあります。
サイドバーが固定されているパターン
ヘッダーではなくサイドにメニューを固定するパターンです。メインコンテンツの横幅は狭くなりますが、メニューが多く、ヘッダーでは収まり切れない場合、メニューをサイドバーに設置して固定すると、どのメニューにも遷移しやすくなります。
別の追従メニューが表示されるするパターン
スクロールをすると、最初に表示されていたヘッダーのナビゲーションメニューは非表示なり、別途新たに新しいナビゲーションメニューが表示されるパターンです。
スクロールすると半透明になるパターン
スクロールすることでメニューが半透明になり、追従するパターンです。サイトの使いやすさはヘッダー固定型と変わりませんが、半透明にすることで可動域を広く見せることができます。
フローティングバナー
スマートフォン向けのサイトで、ページの下部に常に表示されているバナーをよく見かけますよね。
画面をスクロールしてもずっと表示されていて、画面の下に常にくっついているようなバナーのことを「フローティングバナー」といいます。
フローティングバナーのメリット・デメリット
-
メリット
- 画面をスクロールしても常に表示されていることから、ユーザーに情報を訴求しやすい
- 実装が比較的容易で、レスポンシブデザインにも対応しやすい
- バナーの幅や高さ、デザインをきちんと考慮すれば、ユーザビリティの観点からもデザインの観点からも比較的邪魔にならずに済む
- 使い方によっては、画面がごちゃごちゃして見づらく感じてしまう
- フローティングバナーの近くに他のボタンなどがある場合、ユーザーがバナーとボタンを間違えてクリック（タップ）してしまい、ストレスを感じさせてしまう
- 常に表示されていることから、ユーザー個人がメリットを感じられない場合に鬱陶しがられてしまう
デメリット
まとめ
フローティングバナーについてのまとめは以下のとおりです。
- フローティングバナーとは、別名で追従バナーとも呼ばれる、ページにくっついてくるバナーのことです。
- フローティングバナーはサイト内でサイドバーや画面下部などに設置されることが多く、常にバナーが画面内で追従されていますので、ユーザーにそのページを見てもらっているうちは常にアピールすることが可能です。
- フローティングバナーを設置することで、サイトのユーザビリティやクリック率を高めることができます。購入・予約・資料請求など目的に合ったバナーを設置することで、ユーザーが目的に対してのアクションを起こしやすくなります。
- フローティングバナーの多くは右下に配置されています。これは、コンテンツを読む時に左側にフローティングバナーがあると文章の始まりが隠れてしまい読みにくくなるからです。右下にフローティングバナーを設置するのがコンテンツの可読性を最も妨げないと考えられます。
- フローティングバナーにもデメリットがあります。バナーの目的とは異なった目的でサイトを見にきたユーザーにとっては、フローティングバナーが邪魔になる可能性があります。また、スマートフォンなど画面が小さな端末ではかえってサイトが見えづらくなることがあります。フローティングバナーの幅や動きを調整することで問題を解決できることがあります。
- フローティングバナーをサイトに設置する方法は、画像で作って設置する方法とHTMLとCSSで作って配置する方法の2パターンがあります。画像で作る場合はデザインの自由性が高いですが、内容の変更にはデザインソフトが必要です。HTMLとCSSで作る場合はコードを書き換えるだけで内容の変更が可能ですが、デザインの自由性は劣ります。
