以前の私は、ハンバーガーメニューは当たり前のものだと思っていました。上の角に三本線があれば、誰もがそれをタップすると分かる、と。ところが自分のストアのデータをよく見てみると、実際にそれを開いている顧客はごくわずかだと気づいたのです。モバイルECにおけるハンバーガーメニューの問題は、見た目が悪いとか分かりづらいということではありません。顧客が購入するために見る必要のあるもの、まさにそれを隠してしまっている、というところにあります。
この記事では、私が最もはっきりと感じている4つの問題を、あなた自身が判断できるよう出典付きの数字をいくつか添えてまとめます。メニューを叩くためではありません。
問題1：隠しすぎる
ハンバーガーは、その本質において閉じた箱です。顧客は開くまで中に何が入っているか分かりません。そして、ほとんどの人は開かないのです。
Nielsen Norman Group（NN/G）はかつて、6つのウェブサイトにわたり179人のユーザーを対象に、スマートフォンとデスクトップの両方で調査を行いました。注目すべき結論は、ナビゲーションを隠すと発見しやすさがほぼ半分に落ちる、というものです。メニューが隠れていると、人はそれを使う頻度が減り、使うときも到達するのが遅くなります。
これを店舗運営の文脈に置いてみましょう。たとえば「新着商品」や「50%オフ」といった、顧客にぜひ見てほしいカテゴリーがあるとします。ところがそれがハンバーガーの中に入っていると、ほとんどの顧客はホームページをスクロールして通り過ぎ、そのプロモーションの存在を知らないまま去ってしまいます。データを入力し画像を追加する手間をかけたのに、それは閉じた扉の向こうに置かれたままなのです。
問題2：余計な手間が増える
ハンバーガーは、必要以上の手順を顧客に踏ませます。メニューを開き、スライドして出てくるのを待ち、リストを読み、正しいカテゴリーを見つけ、タップして、ようやくページにたどり着く、という具合です。
これをTab Bar — 画面下部に固定されたナビゲーションの帯 — と比べてみてください。顧客は「ホーム」「カテゴリー」「カート」「アカウント」をすぐに目にし、必要なところへまっすぐタップできます。3〜4回ではなく1回のタップです。
余計な手間の一つひとつが、顧客が気を変えたり、しびれを切らしたりする場所になります。モバイルでは、もとより我慢の余裕は乏しいものです。NN/Gはまた、ナビゲーションが見えるサイトと比べて、隠れているサイトではモバイルでユーザーの作業が15%遅く、デスクトップでは最大39%遅くなることも記録しています。遅いのは顧客が遅いからではなく、構造が探し回らせているからです。
これは間接的にカート放棄にもつながります。Baymard Instituteによれば、ECにおけるカート放棄率の平均はおよそ70%で、モバイルではさらにわずかに高くなります。ハンバーガーが主因だと言うつもりはありません。最大の原因は今なお、予想外の追加費用、アカウント作成の強制、使いづらいチェックアウトです。しかし、購入までの道のりにある小さな摩擦の一つひとつが積み重なり、使いにくいナビゲーションもその一つなのです。
問題3：親指にとって不便な位置
ここは最も見落とされやすい点です。ハンバーガーはほぼ必ず、左右どちらかの上の角に置かれます。そして上の角は、片手でスマートフォンを持ったときに最も届きにくい領域なのです。
Steven Hooberの調査によれば、ユーザーの約半数は片手でスマートフォンを持ち、主に親指で操作しています。「親指ゾーン」のマップは画面を3つの領域に分けます。下部中央の届きやすいゾーン、両脇の伸ばせば届くゾーン、そして上の角の届きにくい、あるいはほぼ届かないゾーンです。
スマートフォンが大きくなるほど、この届きにくいゾーンは広がります。主要なナビゲーションボタンを上の角に置くということは、メニューを開くだけのために、顧客に持ち方を変えさせたり、もう片方の手を使わせたりすることを意味します。小さな物理的障壁ですが、確かに存在する障壁です。
対照的に、Tab BarとFAB（フローティングアクションボタン）は画面の下半分 — ちょうど親指が自然に置かれるあたり — に位置します。顧客は手を伸ばす必要がありません。これは、ナビゲーションを下へ移すことを検討するだけの十分な理由になります。
問題4：目に入らなければ、気にも留めない
モバイルの顧客は、目の前にあるものに反応して動きます。「このストアにはたぶんどこかにabcのセクションがあるはずだ」などと頭の中に留めておくことはしません。表示されたものはタップし、隠れているものは忘れます。
隠れたメニューは、使われないメニューです。技術的には間違っていなくても、あなたの最も重要な導線を、知らず知らずのうちに「何もない」も同然のレベルにまで格下げしてしまいます。一番売れているカテゴリーが三本線の奥にあるなら、行動の面ではほとんど見えていないのと同じです。
これこそ、多くのストアがいくつかの中核カテゴリーを表に引き出し、画面上にそのまま見えるようにして、重要度の低いもの（お問い合わせ、ポリシー、FAQ）だけを隠れたメニューに残しておく理由でもあります。売りたいものは顧客に見せましょう。参照用にあるものは隠れたままで構いません。
では、ハンバーガーは完全にやめるべきなのか？
そうとも言い切れません。ハンバーガーは二次的なカテゴリーにとって今も役立ちますし、顧客がそのアイコンに慣れ親しんでいるのも事実です。問題はアイコンそのものではなく、重要なナビゲーションをすべてその中に詰め込んでしまうことにあります。
私が妥当だと感じるやり方は、両者を組み合わせることです。下部のTab Barに4〜5本の中核導線を置き、それ以外をSlide/Hamburger Menuと組み合わせる。顧客はよく使うものへの近道を手に入れ、あなたはあまり使われない項目をすっきりと収めておく場所を保てます。
これはまさに、Navi+が解決するために作られた問題です。ShopifyやあらゆるウェブサイトのためのノーコードでAI搭載のメニュービルダーで、Tab Bar、Mega Menu、Slide/Hamburger Menu、FAB、Grid Menuを作成できます。モバイルとデスクトップを別々に設定できるので、モバイルではTab Barを動かしつつ、デスクトップではMega Menuを保つ、といったことが可能です。テーマを変えてもメニューはそのまま残り、ページの表示速度を落とさないよう最適化されています。
速度は小さな問題ではありません。GoogleはCore Web Vitalsを通じて体験を評価しており、「良好」とされる基準は、LCPが2.5秒未満、INPが200ミリ秒未満、CLSが0.1未満です。重く、雑に作られたナビゲーションバーは、これらの指標を悪い方向に押しやりかねません。メニューの作り方を選ぶときは、後付けではなく、最初から速度を考慮に入れてください。
まとめ
これら4つの問題は、ハンバーガーメニューを断罪するためのものではなく、ナビゲーションを隠すことの代償をはっきりと見てもらうためのものです。
- 隠しすぎる — 顧客は中に何があるか分からない。
- 余計な手間が増える — カテゴリーに到達するまでに必要以上のタップがかかる。
- 不便な位置 — 上の角は親指ゾーンの外にある。
- 目に入らない — 顧客は見えないものを使わない。
どの店舗運営者も、顧客に素早く商品を見つけてもらい、楽に購入してほしいと願っています。もしあなたのナビゲーションがその両方の妨げになっているなら、見直す価値があります。今すぐストア全体を作り直す必要はありません。まずは一番売れているカテゴリーをいくつか、顧客の目に入る場所へ移し、もう一度測ってみてください。それだけでも違いに気づくはずです。
この記事は、モバイルナビゲーション — なぜハンバーガーメニューは時代遅れになりつつあるのか、そして代わりに何を使うべきかという大きなガイドの一部です。