ストアのメニュータイプを選ぶとき、「見た目がいいから」とか「みんなそうしているから」で決めるべきではありません。判断の基準はストアそのものにあります。何を売っているのか、顧客はどんなデバイスを使うのか、どう買うのか。この記事では、特に重視する価値のある4つのメニュー選びの要素をまとめ、それぞれがどのメニュータイプを指し示すのかを示していきます。
完璧な公式はありません。ですが、以下の4つの問いに答えられれば、判断のほとんどは自然と整っていきます。
メニュー選びの要素その1：カタログはどのくらい大きいか
最初の問いはシンプルです。あなたのストアにはカテゴリがいくつあり、それぞれのカテゴリに商品が何点あるのか、ということです。
カテゴリが3つで商品が数十点のハンドメイドショップと、サブカテゴリが何十もある家電ストアとでは、必要なナビゲーションはまったく異なります。カタログが小さければ、フラットなメニューで十分です。顧客に必要なのは、いくつかの明快な選択肢であって、何層もの階層ではありません。
カタログが大きくなると、問題は逆転します。顧客はクリックする前に、構造を — どのカテゴリにどのサブカテゴリが含まれているのか — 把握したくなります。ここで力を発揮するのが Mega Menu です。一度に多くの列を広げ、デスクトップではホバー一回でストアのほぼ全体を顧客に見せてしまいます。
わかりやすいサインがあります。長く、延々とスクロールする縦型のドロップダウンに項目を詰め込みすぎているなら、カタログはシンプルなメニューの限界を超えています。それが、複数列のメニューを検討するタイミングです。
要素2：顧客はどのデバイスから来るのか
これは、最も重要な要素のひとつであるにもかかわらず、多くの人が見落としがちな要素です。あなたは自分のノートパソコンの画面でデザインしますが、顧客はスマートフォンで見ているのです。
実際の数字はかなりはっきりしています。Shopify によれば、モバイルはすでにEC訪問の半分以上を占めており、多くのストアではその割合はさらに高くなっています。推測する必要はありません。Shopify Analytics（Sessions by device type のセクション）か、Google Analytics（Reports → Tech → Device category で分類）を開けば、自分のストアのデスクトップとモバイルの割合がすぐにわかります。
モバイルが多数派のとき
ほとんどの顧客がスマートフォンを使うなら、メニューは親指の届く範囲になければなりません。Steven Hoober による調査（1,300人以上を対象）では、ほとんどの操作が親指で行われ、最も届きやすいのは画面の下半分であることが示されています。上の角は「手を伸ばして無理をする」ゾーンなのです。
実際の帰結はこうです。左上の角に押し込まれたハンバーガーメニューは、まさに最も届きにくい場所に置かれていることになります。だからこそ、画面下部に固定されたナビゲーションバーである Tab Bar が、モバイルファーストのストアに合うのです。最も重要な項目（ホーム、カテゴリ、検索、カート）が、常に親指の届く範囲にとどまります。
Nielsen Norman Group が指摘する、注目すべき点がひとつあります。ナビゲーションをハンバーガーの中に隠すと、メニューをそのまま表示している場合に比べて、顧客がメニューを見つけにくくなるということです。Tab Bar は常に表示されているので、この弱点を回避できます。
デスクトップがまだ多数派のとき
業種によっては — B2B、卸売、じっくり吟味が必要な高額商品など — いまだにデスクトップの顧客が多いところもあります。その場合は、デスクトップでの Mega Menu が自然な選択です。広い画面をうまく活かせるからです。
うれしいのは、どちらか一方を選ぶ必要はないということです。Navi+ では、モバイルとデスクトップを別々に設定できます。たとえばスマートフォンには Tab Bar、パソコンには Mega Menu というように、同じツールの中で、コード不要で設定できます。一方の顧客層を切り捨てて、もう一方を取る必要はありません。
要素3：あなたはどの業種か
購買行動は業種によって異なり、メニューはその行動に従うべきです。
ファッションは発見に傾きます。顧客は眺め、見て回り、気持ちを変え、最初に来た時点で自分が何を欲しいのか正確にわかっていることはめったにありません。ファッションのメニューは、回遊を促すべきです — タイプ別、コレクション別、シーン別といった具合に。そしてたいてい画像が助けになるので、画像付きの Mega Menu や Grid Menu がこのグループに合います。
家電は正反対です。顧客はたいてい必要なスペックを正確にわかっていて、すばやく絞り込みたいと考えています — ブランド別、出力別、価格帯別に。カタログもしばしば大規模です。このグループは、明快に構造化されたナビゲーションと、見つけやすい検索ボックスに傾きます。
飲食（F&B）や食料品は、スピードとリピート購入を優先します。顧客は同じ商品をもう一度買いに戻ってくることが多いものです。複雑なカテゴリツリーよりも、階層が少なくおなじみのカテゴリへのショートカットがあるコンパクトなメニューのほうが、彼らによく役立ちます。
ビューティーはその中間に位置します。発見（インスピレーションを探す、レビューを読む）と、リピート購入（クリームが切れたので同じものをまた買う）の両方があります。肌タイプや目的別に回遊できるメニューに、すばやく検索する手段を加えると、たいてい両方のバランスが取れます。
これは出発点であって、絶対の法則ではありません。ですが、自分の業種に典型的な行動を知っておけば、顧客が実際に買う流れに逆らったデザインをせずに済みます。
要素4：発見を優先するか、すばやい検索を優先するか
最後の要素は、あなたの目的に関わるものです。顧客に、ぶらぶらと見て回って発見してほしい（回遊）のか、それとも必要なものを見つけてすぐに買ってほしい（検索優先）のか、ということです。
ストアの価値が、顧客が欲しいと気づいていなかったものを発見することにあるなら — インテリア雑貨、ギフト、季節物のファッションなど — メニューは発見への道を開くべきです。顧客に多くのカテゴリを見せ、コレクションを提案し、画像で導きます。Mega Menu と Grid Menu がこのスタイルに役立ちます。
顧客が明確な目的を持って訪れ、カートまでの道のりを短くしたいのなら、検索優先にしましょう。目立つ検索ボックス、主要カテゴリへのショートカット、できるだけ少ないステップ。FAB（フローティングアクションボタン）や、Tab Bar に固定された検索項目があれば、顧客はどのページにいても、いつでもキーワードを入力できます。
この目的は、カートにも結びついています。Baymard Institute によれば、カートの平均放棄率は約70%です。その一部は、顧客が迷子になったり、ステップが多すぎたりすることから生まれます。常に手の届く明快なナビゲーションがすべてを解決できるわけではありませんが、顧客が途中で離脱する理由のいくつかを取り除いてくれます。
全体への注意：スピードを犠牲にしないこと
どのメニュータイプに傾くにせよ、無視してはいけない制約がひとつあります。メニューがページを遅くしてはいけない、ということです。Google によれば、LCP が2.5秒未満、INP が200ミリ秒未満、CLS が0.1未満であれば、ページは良好とみなされます。読み込みが遅い重いメニューや、読み込み時にレイアウトが飛び跳ねるメニューは、これらの指標を引き下げ、体験とSEOの両方を損ないます。
ですからメニューを作るツールを選ぶときは、それが Core Web Vitals に最適化されているかどうかに注目してください。Navi+ はこの目的を念頭に作られており、テーマを切り替えてもメニューはそのまま保たれます — デザインを変えるたびに、一から作り直す必要はありません。naviplus.io で試すことができます。
まとめ
4つの要素は、4つの問いに集約されます。
| 問い | おすすめのメニュータイプ |
|---|---|
| カタログは大きいか小さいか？ | 小さければフラットなメニュー。大きければ顧客が構造を見られる Mega Menu |
| 顧客はモバイルかデスクトップか？ | モバイルが多ければ下部の Tab Bar。デスクトップが多ければ Mega Menu — 両方を別々に設定することもできる |
| あなたの業種の購買スタイルは？ | 発見型（ファッション、ビューティー）なら画像主導のメニュー。すばやい検索（家電、F&B）なら明快な構造と目立つ検索 |
| 回遊と検索のどちらを優先するか？ | 回遊なら発見への道を開く。検索優先ならカートまでの道のりを短くする |
初日から完璧な選択をする必要はありません。この4つの問いに正直に答え、最も合うメニュータイプを選び、そのあとは数字を見ながら時間をかけて調整していけばいいのです。
この記事は、より大きなガイドShopifyストアに合ったメニュータイプの選び方の一部です。