ハンバーガーメニューよりもわかりやすい？ナビゲーションデザイン案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のモバイル アプリ のように、検索窓を上部に固定して、スクロールしてもいつでも検索できるようにするといいでしょう。

まとめ

タップしないと情報が閲覧できないというのは、 ユーザー にとっては手間になってしまいます。
ハンバーガーメニューを使っている場合は、この ナビゲーション がいまのベストなのか、もう一度考えてみてください。