ハンバーガーメニューよりもわかりやすい？ナビゲーションデザイン案7選

2019年06月03日

デザイン

モバイルアプリケーションやウェブサイトのデザインは、画面が小さいゆえにどのようなデザインが好ましいか、常に議論されています。
文字のサイズ、画像の解像度、効果的なアイコンの使い方、アニメーションやカルーセルまで、小さな画面で効率よくブラウジングできるように、デスクトップアプリケーションやパソコンで見る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の公式サイトのヘッダーでは、カテゴリ一覧やブランド一覧、コーディネート一覧などからファッションアイテムを選べるようになっています。
下までスクロールしないとユーザーに認識されないのは欠点ではありますが、他のナビゲーションを上部に配置して組み合わせることで、ユーザーがスクロールして上下に行ったり来たりするのを防止することができます。