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

モバイルアプリケーションやウェブサイトのデザインは、画面が小さいゆえにどのようなデザインが好ましいか、常に議論されています。
文字のサイズ、画像の解像度、効果的なアイコンの使い方、アニメーションやカルーセルまで、小さな画面で効率よくブラウジングできるように、デスクトップアプリケーションやパソコンで見る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個連なるこちらは何の肉料理名が付けられているでしょうか。

肉料理でこれが出てくるのはレアなので、少しヒントを。
1.ひき肉料理
2.特に子供は大好き
3.お弁当のおかずとしても重宝される

正解はまさかのミートボールです。
「Meatboll Menu（ミートボールメニュー）」と呼ぶだなんて私にはまったく検討がつきませんでした。ただ、じっと見つめているとコロンと丸いミートボールに餡が絡まった様を想像できるから不思議です。
最後に紹介するのは「Bento Menu」です。

小さな四角が9つ並んだこちらは、箱の中におかずを詰め込んだお弁当がモチーフです。
こちらの「Bento Menu（弁当メニュー）」も最近よく見かけるようになりました。
例えばこちらのwebサイト

細やかなデザインで細部にこだわりを感じるwebサイトです。流動的に動くアニメーションを見ているだけで癒やされます。
9つの四角が集まった弁当メニューを押すと四角が5つに減りcloseを意味する「×」にも見えるところがニクイです。

https://moment-zero.com/

ハンバーガーメニューに比べるとボタンであることの認知がまだ低い弁当メニューですが、テキストで「Navigation」と表示されているのでユーザーが迷いにくいデザインです。背景色の切り替わりのアニメーションも独特です。

https://www.proj-e.com/

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

メリット

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

デメリット

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

使いやすいメニューを使おう！

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

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

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

CSSで作る｜ハンバーガーメニューの制作事例｜jQuery、JavaScript

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