ハンバーガーメニューの代わりに使える！ナビゲーションデザイン案7選

モバイルアプリケーションやウェブサイトのデザインは、画面が小さいゆえにどのようなデザインが好ましいか、常に議論されています。
文字のサイズ、画像の解像度、効果的なアイコンの使い方、アニメーションやカルーセルまで、小さな画面で効率よくブラウジングできるように、デスクトップアプリケーションやパソコンで見るWebサイトと異なる考え方で設計することが大切です。

その中でも比較的よく使われるのが、ハンバーガーメニューです。
ハンバーガーメニューは、3本の横線が並んだアイコンをタップすることでメニューを表示させる仕組みのUIで、ファーストビューでメニューを表示するスペースを節約できるので、多くのデザイナーが好んで使っていました。

実際、レスポンシブデザインを採用していても、画面サイズが大きければ通常のメニューを採用し、画面サイズが狭くなればハンバーガーメニューに切り替えるといったデザインが採用されることもありました。

ところが、2016年前半頃から、ハンバーガーメニューをナビゲーションとして意図的に採用しないサイトが登場。

ハンバーガーメニューは、押してみないとどんなメニューが表示されるのかが分からないので、UX上よくないと考えるデザイナーが増えてきたからです。

そこで問題になるのは、ハンバーガーメニューに変わりどのようなナビゲーションを採用すれば、ユーザーにとって快適でストレスのない体験になるのかということです。

今回は、ハンバーガーメニューの代替案としてよく採用されている7種類のナビゲーションを紹介します。

どうするナビゲーション！ハンバーガーメニューの代替案7選

1. ボトムナビゲーション

iOSやAndroidのネイティブアプリでよく採用されているもののひとつが、ボトムナビゲーションです。
ボトムナビゲーションは、基本的に常に見えている状態にあり、シンプルで簡潔なラベルと分かりやすいアイコンで表示されています。

ボトムナビゲーションでは、LINEアプリのようにアイコンだけを表示するケースもありますが、FacebookメッセンジャーアプリやAirbnbアプリのようにできるだけラベルもセットで表示するほうが分かりやすいでしょう。
また、Googleのガイドラインではアクティブでないタブにはラベルを表示することは推奨されていませんが、同様の理由で可能な限りラベルを表示したほうがよいでしょう。

注意したいのは、モバイルデバイスのサイズは限られているので、ボトムナビゲーションのメニュー数は4〜5個に絞ることです。
そもそもモバイルアプリにおいてそれ以上コンテンツ数が増えるのであれば、操作が複雑になってしまうので、心地よいUXにはつながりません。
アプリを2種類に分けるなどして、常にシンプルな操作ができるように心がけましょう。

2. フリックスクロールナビゲーション

それでもメニューが増えてしまう場合は、横にフリックしてアイコンやタブを切り替えるフリックスクロールのナビゲーションを採用しましょう。

最新のニュースを実名でコメントすることができるニュースSNSアプリのNewsPicksでは、画面上部にニュースカテゴリーとしてフリックでページ切り替え可能なナビゲーションを採用しています。
このナビゲーションは循環型になっており、一旦末端までナビゲーションをフリックし続けるとまた最初に戻るループ状のナビゲーションになっているので、ユーザーは見たいニュースのカテゴリーを探しやすくなります。

また、新しくなったAirbnbアプリのトップ画面では、「体験」などの旅行メニューをカルーセルのようにフリックして閲覧することができます。
ループ状にはなっていませんが、スムーズな動きを実現しているので、ユーザーは親指ひとつで左右に行ったり来たりして旅行メニューを見比べることができるのです。

大切なのは、フリックスクロールできることをユーザーに一目でわかるようにすることです。
こうしたメニューは、左右のマージンを取らずに、メニューの一部を切れているように見せることで、ユーザーに左右のフリックを想定させています。

連続しているのに画面に隠れているものがあれば、触ってみて続きが見たくなるものです。
フリックスクロールメニューを採用するときには、あえてメニューを全部見せないようにしてください。

3. セグメントコントロール

タブやボトムナビゲーションに近いですが、iOSではセグメントコントロール(Segmented Control)と呼ばれているUIが採用されています。

セグメントコントロールは、モバイルアプリの中ではボトムナビゲーションで表示するタブの中での更なる切り替えを行うときに使います。
アイコンを使わずラベルだけで表示することがほとんどなので、シンプルで分かりやすい言葉にするのが大切です。
また、コントロール数も2〜4個程度に絞るのが理想です。

4. タブ

タブはセグメントコントロールとも似ていますが、もっと柔軟にデザインすることができるナビゲーションメニューのひとつです。

タブメニューはコンテンツをカテゴリーごとに分けて表示することができ、ページの一部分だけを切り替えることもらできるので便利です。
ただし、モバイルデバイスの横幅を考えたときに、タブ数が多くなると操作しづらくなってしまうので、その場合は上下に複数のタブを置くなどしてうまく対応しましょう。

5. インラインナビゲーション

メニュー数が多くなってしまう場合は、横幅を利用したインラインナビゲーションを作成するのもアイデアのひとつです。

例えばZOZOTOWNの公式サイトのヘッダーでは、カテゴリ一覧やブランド一覧、コーディネート一覧などからファッションアイテムを選べるようになっています。
下までスクロールしないとユーザーに認識されないのは欠点ではありますが、他のナビゲーションを上部に配置して組み合わせることで、ユーザーがスクロールして上下に行ったり来たりするのを防止することができます。

6. もっと見る

ハンバーガーメニューの代替案として再び注目を集めているのが、「もっと見る」というテキストリンクです。

一見単純そうに見えますが、最低限必要なメニューを表示しつつ、更に別のメニューを見たいユーザーにだけ追加のメニューを表示することができます。

7. 常に表示する検索窓

最後にご紹介する、最も強力なハンバーガーメニューの代替案は、検索窓です。
意外だと思われるかもしれませんが、検索窓はユーザーが思いついた言葉を使って自由にブラウジングすることができるので、ユーザーにとっては非常に使いやすいものです。

問題は、使いたいときに検索窓を使えるようにしておくことです。
虫眼鏡アイコンをクリックしてはじめて検索窓を表示するという方法もありますが、それではユーザーがタップする手間が増えてしまいます。

Amazonのモバイルアプリのように、検索窓を上部に固定して、スクロールしてもいつでも検索できるようにするといいでしょう。

ハンバーガーメニューのメリット・デメリット

メリット

ハンバーガーメニューのメリットは、すでに記載しましたが、タップしてメニュー一覧を表示することから、スペースを有効活用できることです。スマートフォン画面に表示するには、ハンバーガーメニューが採用される傾向にあります。

デメリット

メリットがある一方で、ハンバーガーメニューのデメリットは何を表しているかわかりにくいということです。最近では3本線の下に「メニュー」と記載しているものも増えてきたので、わかりにくさは改善されつつあります。

まとめ

タップしないと情報が閲覧できないというのは、ユーザーにとっては手間になってしまいます。

ハンバーガーメニューを使っている場合は、このナビゲーションがいまのベストなのか、もう一度考えてみてください。

この記事を読んだ方にオススメ

たくさん見かけるハンバーガーメニュー、見せ方はホームページによって様々に異なるので、CSSの勉強においてもとてもプラスになります。今回は、ハンバーガーメニューの事例をいろいろとピックアップしてご紹介したいと思います。CSSだけではなくjQueryやJavaScriptも使って上手に魅せている素敵なハンバーガーメニューをチェックしてみましょう。