ハンバーガーメニューを見直す

ハンバーガーメニューとは

主にスマホサイトでよく見られる、画面の上隅に置かれた「≡」のボタン。これはハンバーガーメニューと呼ばれています。

このハンバーガーメニュー、スマホサイトデザインの黎明期から今日に至るまで、賛否両論を巻き起こしています。

その内容をかいつまむと、少ないスペースでメニュー表示できるから最高だ！という作る側の言い分と、メニューだと気づき難い、開かないと中身がわからない！といったユーザー視点に立った懐疑的な意見のぶつかり合いが、ずっと続いているという状況です。

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

ハンバーガーメニューのメリットといえばそのシンプルさにあります。

「≡」のボタンの中にナビゲーションの情報をすべて収納できるため、とりわけスペースが限られているスマホサイトのデザインにおいては取り入れられやすいです。

すでに多くのサイトでハンバーガーメニューが採用されているため、ユーザーにはおなじみなのではないでしょうか。最近ではスマホサイトに限らず、PC用のWebサイトでもハンバーガーメニューが活用されています。

PCのWebサイトにおいては、写真・動画をメインにデザインされたビジュアル重視のサイトを中心に、既存のレイアアウトにおさまらない自由な配置のデザイン＝ブロークングリッドレイアウト＝など、視覚的な没入感を重視するサイトで使用される傾向があります。

このように、今日ハンバーガーメニューはすっかり市民権を得たものとしてWeb制作の現場で頼りにされています。

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

一方デメリットとしてはスマホサイトが作り始められたばかりの頃、メニューだとわからない人もいるという懸念点がありました。しかしメリットでも述べた通り、現在ではもはやスマホユーザーに広く認知されこの懸念点は払拭されつつあります。そのためより考慮すべきデメリットとしては、タップをする手間と、ページや階層が分かりづらいという点ではないでしょうか。

例えばECサイトでマスクを探しているとします。まずはハンバーガーメニューをタップしてメニューを表示させ、そこで表示された「衛生用品」というカテゴリ名をタップすると、衛生用品のサブカテゴリメニューがアコーディオン形式でずらっと表示されます。そこからスクロールしていってどうにか「マスク」というメニュー名を見つけ出し、マスクの商品一覧ページへ遷移します。しかしページに表示されたのはアイマスクや美容液のシートマスクなど探しているマスクとは違う商品も渾然一体となったリストでここから目的の「マスク」を探すのはかなり根気が要ります。そこでさらに「マスク」のカテゴリを絞り込んで表示するため、またタップでメニューを開き、カテゴリを探してタップ、さらにサブカテゴリを探してタップ…という作業に戻る羽目になります。

このように、コンテンツ量の多いWebサイトであればハンバーガーメニューだけを駆使して目的のページへたどり着くことはユーザーに労力を強いることにもなりかねません。

ハンバーガーメニューの代わりになるものは？

ではハンバーガーメニュー設置の見直しや、ハンバーガーメニューをやめようと考えている方のために、その代わりになる案を紹介します。

ヘッダーナビゲーション

ボトムナビゲーション

検索ボックス

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

まとめ

ここ10年ほどの間に、Webサイトをスマホで閲覧するユーザーの割合は劇的に増加し、スマホユーザーにとって分かりやすく、使いやすいナビゲーションデザインの考慮は不可欠です。

スマホサイトデザインも進化し続け、ハンバーガーメニューに代わる、あるいはうまく共存するメニューのデザインも見られるようになってきました。

「見た目がスッキリするから」「どこのサイトでも使っているから」という安易な理由でハンバーガーメニューを採用してしまう前に、ユーザーにとってのわかりやすさや使いやすさを、一度立ち止まって考えてみましょう。