ハンバーガーメニューに代わるナビゲーションデザイン案10選

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

6. もっと見る

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

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

7. 常に表示する検索窓

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

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

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

8.クリックすると音の出る音声付きグローバルナビゲーション

なくても良いのでは？なんて声も聞こえてきそうですが、webサイトの世界観をユーザーに伝えるための素晴らしいギミックだなぁと個人的には思います。

9.ハンバーガーメニュー×グローバルナビメニューの合わせ技

お！こんな使い方もあったのか〜と感心したwebサイトを2つご紹介します。

メニューボタンをデザインの一部としてしっかり立たせて、しかもPCサイトではグローバルナビも並行して表示している珍しいタイプです。女子ウケしそうなパステル×ネオンカラーのカラーリングがとても鮮やかで印象的です。
ハンバーガーメニューを使用する＝スマートなデザインは、もはや少し前の考えなのかもしれませんね。

角の丸い3本線の間隔をゆったりとったメニューボタンがwebサイトのゆるさにマッチしています。PCサイトではコンテンツ幅を狭くすることでできた左右の余白のおかげで、ハンバーガーメニューなのに開きっぱなしでのスクロールが可能な珍しい仕様です。もはや、ハンバーガーメニュー風なのかもしれません。

ページを下にスクロールしていくと画面左からこれでもかと言わんばかりにいろんなものが飛んできます。記事の内容はさておき、今度は何が横切るんだろうという期待感が高まりました。

https://steveinc.jp/

10.私をハンバーガーと呼ばないで！

ハンバーガーメニューについて今回調べている中で面白い情報を得たので併せてご紹介します。
このボタンもハンバーガーメニューだろうと思いきや、少しカタチが変わると一部では別の名前で呼ばれることもあるそうです。ただし、一般的にはハンバーガーメニューと認識されていることが多いようなので「小ネタ」くらいに思っていただけると幸いです。

まずはこちら。

一見ハンバーガーですが下にいくについれて短くなってますね。実はこちら「Doner Menu（ドネルメニュー）」と呼ぶそうでモチーフは、トルコ料理でおなじみのケバブです。
くるくる回りながら焼かれるドネルケバブは下の方から削ぎ落とされるので確かにこういう形状のものをみることが多いですよね。

続いてこちら。

縦に小さな丸が並んだこちらは「Kebab Menu（ケバブメニュー）」です。ケバブといってもモチーフは串に刺して焼いたお肉です。私たちがケバブと認識しているものは「Doner Menu」と呼び、串に刺して焼いたお肉のことをケバブと呼ぶなんて正直驚きました。ちょっとややこしいですね。
さて突然ですがここでクイズです！
横に小さい丸が3個連なるこちらは何の肉料理名が付けられているでしょうか。