すべての店舗に当てはまる唯一のメニュー構成というものはありません。数千ものSKUを抱えるファッションショップと、数十点ほどの商品を扱うカフェとでは、必要なナビゲーションはまったく異なります。本記事では、自分で店舗を運営してきた経験と、他のショップのやり方を観察してきたことをもとに、店舗タイプ別にShopifyメニューをどう組み合わせるかをまとめます。
表に入る前に、ひとつ大切な点があります。デスクトップのメニューとモバイルのメニューは同じであるべきではない、ということです。人はスマートフォンを片手で持ち、ほとんどの操作を親指でおこないます。Steven Hooberの観察によると、モバイル操作の約75%は親指で行われ、もっとも届きやすいのは画面の下半分です。デスクトップではその逆で、人は上から下へと視線を走らせるため、上部に横並びのメニューを置くほうが理にかなっています。2つの異なる文脈には、2つの異なるメニューの配置方法が求められるのです。
店舗タイプ別のShopifyメニュー組み合わせ早見表
| 店舗タイプ | デスクトップ | モバイル |
|---|---|---|
| ファッション／ライフスタイル、大規模カタログ | Mega Menu | Tab Bar ＋ Slide Menu |
| 家電、技術的なカテゴリが多い | フィルター付きMega Menu | Slide Menu |
| F&B／ローカル、商品数が少ない | Simple Nav（シンプルな横並びメニュー） | Tab Bar |
| ビューティー／スキンケア | 画像付きMega Menu | Tab Bar ＋ チャットFAB |
| ドロップシッピング、商品ラインが多い | Mega Menu | Slide Menu |
この表はあくまで出発点であって、ルールではありません。以下に各行の理由を説明しますので、ご自身の店舗に合わせて調整してください。
ファッションとライフスタイル：大規模カタログにはデスクトップでMega Menuを
ファッションショップはたいてい深い構造を持っています。メンズ／レディース、その下にトップス／ボトムス／アクセサリー、さらに個別の商品ライン、シーズン別、コレクション別、といった具合です。これらすべてを1つの縦型ドロップダウンに詰め込むと、買い物客は何層もホバーしながらたどっていかなければなりません。
デスクトップでは、Mega Menuがこれを解決します。カテゴリを1つの大きなパネル内の複数のカラムに広げて表示するため、ユーザーは各階層をクリックして進むのではなく、商品ツリー全体を一度に見渡せます。数十もの商品ラインを持つレディース向けの衣料品店にとっては、これがたいてい最もすっきりしたアプローチです。
モバイルでは事情が異なります。狭い画面ではMega Menuを広げて表示できないため、よく使われるのは、最も重要な動線（ホーム、カテゴリ、カート、アカウント）を画面下部に固定したTab Barと、全カテゴリ一覧を収めるSlide Menuの組み合わせです。Tab Barは常に親指の届く範囲にあり、Slide Menuはユーザーがさらに深く掘り下げたいときのために詳細な商品ツリーを保持します。
家電：技術的なカテゴリにはメニュー内でのフィルタリングが必要
家電には独自の特徴があります。買い物客は自分が何を必要としているかをかなり正確に把握していることが多いものです。容量、ブランド、価格帯、発売年などです。そのため家電店では、デスクトップのMega Menuにいくつかのフィルターやサブグループをメニュー内に組み込み、ユーザーがカテゴリページ全体を見て回らずに、目的の枝へ直接たどり着けるようにするとよいでしょう。
たとえばパソコン周辺機器のショップなら、Mega Menuをタイプ別のカラム（マウス、キーボード、ヘッドフォン）に分け、各カラム内に人気の価格帯やブランドを並べることが考えられます。
モバイルでは、カテゴリツリーが長く技術的であるため、すべてをTab Barに詰め込もうとするよりもSlide Menuのほうが向いています。Slide Menuなら、コンパクトに保ちながらメニューを何階層も入れ子にできます。利用する場合は、アイコンに加えてわかりやすいテキストラベルを添えましょう。Nielsen Norman Groupがかつてこれを計測したところ、隠れたメニュー（ハンバーガー型）は、表示されているメニューと比べてユーザーがナビゲーションを見つける可能性をほぼ半分に減らすことがわかっています。ですからメニューを隠しすぎないようにしましょう。
F&Bとローカル：商品数が少ないなら複雑にしない
レストラン、ベーカリー、地域の店舗は、たいてい数十点ほどの商品しか扱いません。そうした店舗にMega Menuを作るのはやり過ぎで、かえってページを必要以上にごちゃごちゃさせてしまうこともあります。
デスクトップでは、Simple Nav、つまりメニュー、私たちについて、お問い合わせといったいくつかの項目を横並びにしたメニューで十分です。買い物客は深く掘り下げる必要はなく、すばやく注文したいのです。
モバイルでは、ここではTab Barがうまく機能します。たとえばメニュー、注文、電話といった最も重要なボタンをいくつか、画面下部の親指で届きやすいゾーンに用意しておきます。オンライン販売をしているカフェなら、注文ボタンと電話ボタンをTab Barに固定しておくことで、お客様がスクロールして探す手間をなくせます。
ビューティーとスキンケア：画像と相談サポートを
化粧品は画像と信頼によって売れます。お客様はどのタイプが自分の肌に合うのか迷うことが多いため、メニューもそれを反映すべきです。
デスクトップでは、画像付きMega Menuを使うと、お客様はテキストを読むだけでなく、メニュー内で商品やスキンケアラインを直接目にすることができます。ビューティーショップなら、各ライン（洗顔、保湿、日焼け止め）の代表的な画像をカテゴリ名の横に配置するとよいでしょう。
モバイルでは、メインナビゲーション用のTab Barに加えて、隅に浮かぶチャットFABがこの業界にはかなりよく合います。お客様は購入前に質問を抱えがちで（自分の肌でも使えるか、あの商品と一緒に使えるか）、常に表示されているチャットボタンがあれば、すぐに質問できます。この段階で迷いを減らすことには価値があります。Baymard Instituteによると、Eコマースにおける平均的なカゴ落ち率は約70%、つまりカートに追加した10人のうち、実際に購入を完了するのは約3人にとどまります。タイミングよく質問に答えることは、その一部を取り戻す手段のひとつなのです。
ドロップシッピング：商品ラインが多いなら、明確なグループ分けを優先する
ドロップシッピングの店舗は、キッチン用品、スマホアクセサリー、おもちゃ、日用品など、多くのカテゴリを一度に扱うことがよくあります。難しいのは、これらのグループがバラバラで、互いに関連性がないという点です。
デスクトップでは、Mega Menuが各カテゴリをそれぞれのカラムにまとめるのに役立ち、お客様は店舗が何を売っているのかをすぐに把握できます。お客様は広告から訪れてきて、まだ店舗に馴染んでいないことが多いため、見栄えのよさよりも明確な構造のほうが重要です。
モバイルでは、Slide Menuが場所を取らずに多数のカテゴリをうまくさばいてくれます。ユーザーはそれを開き、カテゴリを選び、そこから掘り下げていきます。
なぜモバイルとデスクトップを別々に設定すべきなのか
上記の5つのケースに共通しているのは、両者を別々に設定しているという点です。これは些細なことではありません。今や注文のほとんどはスマートフォンから来ており、デスクトップのメニューをそのままモバイルに持ち込むと、たいていタップしづらく、ページの重さの足かせにもなります。
パフォーマンスにも目を向ける価値があります。Googleは、良好なCore Web Vitalsの基準を、LCPは2.5秒未満、INPは200ミリ秒未満、CLSは0.1未満と定めています。あらゆるデバイスで読み込まれるかさばったメニューは、これらの数値を簡単に悪化させてしまいます。モバイルでは、追加するすべてのコンポーネントを軽量に保つべきです。
ここで、Navi+のようなツールが役立ちます。デスクトップとモバイルのメニューを別々に設定でき、コードなしでドラッグ＆ドロップ操作ができ、テーマを切り替えてもメニューはそのまま残ります。テーマファイルに一切触れることなく、デスクトップにはMega Menuを、モバイルにはTab BarとSlide Menuを設定できます。
要するに、カタログの規模とお客様の買い物の仕方に基づいてメニューを選び、それから2つの画面タイプで設定を分けるということです。上記の表は出発点にすぎません。あとは、ご自身の店舗の実際の数値に基づいてテストと調整を重ねていくことです。
本記事は、より大きなガイドShopifyストアに最適なメニュータイプの選び方の一部です。