Shopifyのフラット vs ディープナビゲーション：ストアに必要なメニュー階層数

Shopifyストアのオーナーは、設計上のジレンマに頻繁に直面します。すべてのコレクションを一度に見せる広くフラットなメニューにするべきか、入れ子の階層で購入者を導くディープな構造にするべきか、という問題です。

どちらの極端も実際にはうまく機能しません。メインのヘッダーに数十のコレクションを詰め込むと訪問者が圧倒され、多くの入れ子のサブメニューの下に商品を埋もれさせると商品が見つけにくくなります。代わりに、Shopifyの3階層という上限の中でバランスの取れたピラミッド構造を作り、メニューの行数を数えるのではなくクリック深度を測定してください。

クイックアンサー

フラットナビゲーションはほとんどのページをトップページから数クリックの範囲に置き、ディープナビゲーションはより多くの階層を積み重ねます。どちらかが完全に優れているわけではなく、深い階層は使いにくい一方で、非常にフラットなメニューは購入者を圧倒します。ほとんどのShopifyストアでは、Shopifyの3階層というメニュー上限の中でピラミッド型を目指してください。メニューの階層数ではなく、クリック深度を測定しましょう。

Shopifyにおけるフラット vs ディープナビゲーションの定義

フラットナビゲーションは、広いカテゴリーと浅い分岐を用いて、訪問者が少ないステップでほとんどのページに到達できるようにします。ディープナビゲーションは、より背の高い構造を用い、最初のグルーピングを絞って、入れ子のサブ階層へと分岐させます。代理店の慣例では、フラットナビゲーションは階層が少なく、通常1〜3層であると説明されることが多くあります（Fresh Consulting）。Shopifyでこれを適用するには、メニューの設定と、購入者が実際にたどる経路を切り分けて考える必要があります。

クリック深度とメニュー階層数は同じではない

ストアオーナーは、メニュー階層数とクリック深度をよく混同します。メニュー階層数は、テーマ設定の中でリンクリストがどのように入れ子になっているかを表します。クリック深度は、トップページから目的のページに到達するまでに必要なクリックまたはタップの実際の回数を測ります。

たとえば、アパレルストアが「Women」から「Dresses」へドロップダウンする2階層のメニューを設定したとします。購入者が「Women」をクリックし、中間のコレクションページを見て、「Summer Dresses」をクリックし、商品を選ぶ場合、クリック深度はすでに数クリックになります。逆に、デスクトップのメガメニューは整理されたカラムで3階層を表示でき、購入者はトップページから1クリックで特定のサブコレクションに到達できます。クリック深度は顧客が感じる手間を測るもので、メニュー階層数はテーマの構造を表すものです。

Shopifyの3階層メニュー制限

Shopify管理画面の「コンテンツ > メニュー」では、ドロップダウンメニューにプラットフォーム上の上限があります。最上位の項目には最大2階層の入れ子のドロップダウンメニューを持たせることができ（Shopify Help）、Liquidのlinklistオブジェクトでは最大3階層になります（Shopify Dev Docs）。

ほとんどのテーマは最大2階層の入れ子のドロップダウンメニューに対応していますが（Shopify Help）、見た目の実装はテーマによって異なります。多階層メニューがデスクトップとモバイルの画面でどう表示されるかは、テーマ設定で確認してください。

深すぎるメニューが顧客とクローラーを失う理由

ナビゲーションを縦方向に過剰な階層へ引き伸ばすと、購入者にも検索ボットにも負担がかかります。購入者が商品を目にするまでに何層ものサブメニューを連続してクリックしなければならない場合、頭の負担は倍増します。Nielsen Norman Groupのユーザビリティ調査は、「他の条件が同じであれば、深い階層は使いにくい」と確認しています（NN/g）。ドロップダウンの階層が1つ増えるごとに、顧客はもう1つ選択を迫られ、道を間違える機会がもう1回増えます。

検索エンジンにとっても、深く入れ子になった構造はクロールを難しくします。GoogleのJohn Muellerは、「深くしすぎると、私たちにとってクロールが難しくなる」と指摘しました（Search Engine Journal）。

Google検索セントラルのガイドラインは、重要なページはすべて、サイト内の少なくとも1つの別のページからリンクされているべきであると述べており、有効なhref属性を持つクロール可能なHTMLの<a>タグを使うことが前提です。ストアオーナーは、Googleがメニューを適切にクロールできることを確認する必要があります。加えて、階層の深いサイトにはパンくずリストが必要です。パンくずリストはトップページから現在のページまでの各階層へのリンクを表示し、購入者が自分の現在地を見失わないようにします（NN/g）。

ナビゲーションを過度にフラットにするリスク

深いメニューの欠点を認識して、反対の極端に振れる事業者もいます。カタログ全体を1つの階層に平らにしてしまうのです。トップページに数十のコレクションリンクを直接置いたり、上部のヘッダーにカテゴリーリンクを長い1列に並べたりします。

しかし、構造上の深さを取り払うと、深刻なユーザー体験上の欠陥が生じます。NN/gが警告するように、「ユーザーは、長くごちゃついたメニューに圧倒されることもある」のです（NN/g）。オンラインストアが順序のないカテゴリーリンクを長く1列に並べていると、購入者は特定の部門を探し出すのに苦労することがあります。

ECカタログを過度にフラットにすることは、オーガニック検索にも悪影響を与えます。John Muellerは、「非常にフラットだと、これらはすべて同じくらい重要だと私たちは考える」と注意を促しました（Search Engine Journal）。検索エンジンは、トピックの階層を理解するために内部リンクに頼っています。ストアがすべてのサブコレクションを同じ目立ち方でメインヘッダーから直接リンクすると、どのコレクションが主力の商品群で、どれが副次的なのかを示しにくくなります。

Search Engine Journalの記事では、あるサイトオーナーが、1,000を超えるリンクを持つメガメニューを備えたサイトについてMuellerに質問していました（Search Engine Journal）。この記事は、そのサイトがその後どうなったかを報告していないため、事業者が抱く疑問の一例としてのみ扱ってください。すべてのコレクションを同じ重みで列挙するメニューは、どのページが同じグループに属するのかを示せません。また、すべてのコレクションをメインメニューに詰め込むだけでは、健全なフラット構造とは言えません。

Figure 1: Concept illustration：フラットすぎるメニューとピラミッド構造を並べた図。

ピラミッド構造：多くのストアにとって最適なバランス

機能不全に陥る2つの極端のどちらかを選ぶのではなく、ストアオーナーは構造化された中間地点を築くことで恩恵を受けます。John Muellerはこのアプローチを明確に推奨しました。「私ならピラミッド構造に近づけることを目指す」（Search Engine Journal）。ピラミッド構造は、検索エンジンがサイト内の個々のページの文脈をはるかに効果的に理解する助けになります（Search Engine Journal）。

ECのピラミッド階層では、トップページが頂点に位置します。その下には、主要な商品部門（「Men」「Women」「Living Room」など）を表す、簡潔で明確なカテゴリーが1列に並びます。各主要カテゴリーはさらに、焦点を絞ったサブカテゴリー（「Outerwear」「Footwear」「Lighting」など）に分岐し、最終的に個々の商品ページへつながります。

視覚的な対比は、中心となるトレードオフを浮き彫りにします。

• フラットすぎるアーキテクチャは、すべての項目が同じくらい重要に見える長くごちゃついたメニューを生み、顧客を圧倒して意味的な階層を見えにくくします。
• バランスの取れたピラミッド構造は、商品を明確なカテゴリーにグルーピングし、不要なクリック深度を最小限に抑えながら、購入者と検索クローラーの双方に直感的で論理的な足がかりを提供します。

Nielsen Norman Groupが結論づけたように、唯一の正解はなく（NN/g）、どちらの極端にもコストがあります。Mailchimpのアーキテクチャガイドも同様に、ほとんどのウェブサイトではよりフラットなアーキテクチャのほうが一般的にうまく機能すると述べています（Mailchimp DE）。目標は、迷路のようなディレクトリよりもフラットで、かつ構造のないカタログに崩れない構造を見つけることです。

カタログ規模に応じた階層深度の選び方

ストアにとって理想的なナビゲーションの深さは、商品カタログの規模と複雑さによって決まります。商品の構成ごとに分類上の要求は異なるため、事業者は以下の指針を固定のしきい値ではなく、経験則として扱ってください。

• 小規模カタログ（数十点の商品）： 1階層または2階層の構造で一般に十分です。手作りのアクセサリーや単一のアパレルコレクションを扱うブティックなら、入れ子のサブメニューなしで、主要なラインをメインヘッダーにそのまま並べられます。購入者は並んでいる商品をすばやく見渡せ、クリック深度も低いままです。
• 中規模カタログ（数百点の商品）： 2階層の構造がうまく機能することが多くあります。最上位のカテゴリーが主要な商品部門を分け、2階層目のリンクが厳選されたサブコレクションを指すことで、購入者を迷わせずに、明確なテーマ別の絞り込みを提供できます。
• 大規模カタログ（数千点の商品）： 在庫が増えるにつれ、Shopifyの3階層というメニュー上限をフルに活用し、ページ上のコレクションフィルターや専用のカテゴリーランディングページと組み合わせる必要があります。規模を拡大する際は、詳細なアーキテクチャ設計が不可欠です。体系的な分類フレームワークについては、1,000点以上のカタログを整理する方法とカタログの成長に伴ってナビゲーションがどう変わるかの詳細ガイドをご覧ください。

モバイルにおける深いナビゲーション：ドロワー、タブバー、折りたたみ階層

画面スペースが限られるモバイルでは、直感的な階層を保つことが特に重要です。スマートフォンでは、多階層のナビゲーションは通常、アコーディオン式のトグルや段階的なドリルダウンパネルを用いたスライドアウト式のドロワーに頼ります（パターンの詳細は、Shopifyの多階層メニューのパターンとモバイルドロワーメニューのデザインのレビューをご覧ください）。

モバイルのドリルダウンメニューにおける重要なユーザビリティ上の課題は、購入者が親カテゴリーを全体として見られるようにすることです。購入者が「Men’s Apparel」をタップして「Shirts」や「Jackets」などのサブカテゴリーに進むと、メンズアパレル全体を一度に見たくなることがよくあります。Baymard InstituteのECユーザビリティのベンチマークによると、各入れ子メニュー階層の先頭に独立した「View All」リンクを設けることで、これをうまく実装しているサイトはわずか24%です（Baymard）。

モバイルのスペース制約に直面して、下位のサブカテゴリーを完全に取り除くことで、モバイルのヘッダーを簡素化しようとするストアもあります。Baymardはこの妥協に警鐘を鳴らし、モバイルで下位階層を取り除くことはモバイルUXの不適切な実装であると強調しています（Baymard）。サブカテゴリーを取り除くと、スマートフォンの購入者はきめ細かな移動経路を失い、膨大なコレクション一覧をかき分けることを強いられます。さらに、Shopifyヘルプのドキュメントには、モバイルでの使いやすさを改善するために、テーマによってはCSSの調整が必要な場合があると記載されています（Shopify Help）。

カテゴリーツリーをフラットにせずにモバイルのクリック深度を減らすには、画面下部のタブバーがショートカットとして機能します。常時表示されるバーは、主要なコレクションにも深く入れ子になったコレクションにもワンタップで到達できるようにし、その下のカテゴリーツリーは変わらないままです。

Figure 2: Concept illustration：View Allの項目を備えたドロワーのドリルダウンと、タブバーのショートカットを示した図。

メガメニューを活用して煩雑さを避けつつ階層を短縮する

デスクトップの購入者にとって、よく設計されたメガメニューは、強い階層的な整理を保ちながらクリック深度を減らす実用的な方法です。ユーザーを入れ子のフライアウトメニューに1階層ずつ進ませる代わりに、メガメニューは2階層目と3階層目のリンクを、広い2次元のパネル上に同時に表示します。

メガメニューの効果は、構造化された視覚的なグルーピングにあります。訪問者を圧倒しかねない整理されていないリンクの羅列（NN/g）や、Search Engine Journalの質問にあったような1,000を超えるリンクを持つメガメニュー（Search Engine Journal）とは異なり、すっきりしたメガメニューは、クリック不可またはクリック可能な明確なカテゴリー見出しの下に、リンクをバランスの取れたカラムに整理します。これにより、購入者は論理的なピラミッド構造を保ったまま、1回の操作で部門の全体像を見渡せます。

モバイルでは、同じコンテンツを、幅広いパネルではなくドリルダウン式のドロワーや折りたたみ式のアコーディオンとして表示する必要があるのが一般的です。レイアウトやカラムのグルーピングのアイデアについては、メガメニューのベストプラクティスのガイドをご覧ください。

クリック深度の測定方法と安全なメニュー改修のテスト手順

ストアのナビゲーション構造を変えると、購入者や検索クローラーがページを見つける方法が変わります。既存のパフォーマンスを損なわずに階層を安全に最適化するために、次の5ステップの評価フレームワークに従ってください。

1. 売れ筋商品を点検する： Shopifyアナリティクスで、売れ筋上位10商品を特定します。初めて訪れた訪問者としてトップページから各商品に移動し、必要なクリックまたはタップの正確な回数を数えます。売れ筋が何クリックも先にある場合は、サブコレクションへの直接リンクやショートカットの追加を検討してください。
2. クロール可能なHTMLリンクを確認する： 重要なページすべてが、サイト内の少なくとも1つの別のページからリンクされていることを確認します（Google Search Central）。ナビゲーションのリンクが、検索エンジンがたどれない可能性のあるJavaScriptのクリックイベントではなく、有効なhrefの遷移先を持つクロール可能なHTMLの<a>タグとして出力されていることを確認します（Google Search Central）。
3. 簡易的なツリーテストを行う： 公開中のテーマを大幅に変更する前に、少人数の同僚や顧客で短いツリーテストを実施します。ユーザビリティ調査が示すように、ツリーテストは、提案した階層の中で情報を探してもらうことで、サイト構造を検証するのに役立ちます（NN/g）。
4. まず1つのコレクションで試験運用する： カタログ全体を一晩で再構築するのではなく、主要なコレクションの部門を1つだけ調整します。既存のコレクションハンドルと商品URLは変更しないでください。ナビゲーションのリンクを更新しても、正規のページURLは変わりません。ストア全体に更新を展開する前に、Google Search Consoleで数週間かけて表示回数、クリック率、インデックスのカバレッジを監視し、影響を評価します。
5. 3クリックルールは非公式な目安として扱う： 広く引用される「3クリックルール」は、あくまで実用上の経験則であり、厳密な検索ランキングの基準でも、科学的なユーザビリティの法則でもないことを覚えておいてください。GoogleのJohn Muellerは、検索エンジンは妥当な数のクリックを見ていると述べており（Search Engine Journal）、厳密なクリック数の上限ではなく、論理的なつながりに注目しています。

トレードオフ：深いメニューが正しい選択となるケース

フラットなナビゲーション構造は大多数のD2Cストアにとって有益ですが、より深い階層が優れた、より実用的な解決策となる小売のシナリオも明確に存在します。

メーカー、モデル、年式、エンジンタイプで整理された自動車の交換部品のように、技術的で細かく分類された在庫を扱うストアでは、より深い階層的な経路が必要になることがあります。複雑なカタログを無理に1階層または2階層のフラットなメニューに押し込むと、扱いきれないほど長いリストになり、特定の適合性を探している購入者を苛立たせます。

より深いナビゲーション構造は、トップページから現在のページまでの各階層へのリンクを表示する明確なパンくずリストがあってこそ成功します（NN/g）。逆に、技術的に深いカタログを積極的にフラットにすると、重要な意味的関係が失われ、検索エンジンが頼りにする文脈の理解が薄れてしまいます（Search Engine Journal）。

ShopifyはLiquidのlinklist内で3階層という厳格な上限を課しているため（Shopify Dev Docs）、複雑な商品ラインを扱う事業者は、ファセット式のコレクションフィルターやサブコレクションのグリッドカードを使って、さらなる深さに対応するべきです。結局のところ、NN/gの調査が裏づけるように、すべてのウェブサイトに共通する唯一の正解はなく（NN/g）、最適な階層は、ターゲットとする顧客の検索習慣を反映したものでなければなりません。

Navi+の役割

現在のShopifyテーマの制約で、すっきりしたピラミッド型のナビゲーション構造を実現できない場合、Navi+を使えば、その上に独立したナビゲーションコンポーネントを構築できます。Navi+のメニューは3階層までで、Shopifyのメニューと同じ上限です。

Navi+は、実用的なストアフロントのナビゲーションコンポーネントに焦点を当てています。

• Mobile Menu： 最大3階層のモバイルドロワーです。他のメニュー項目と同じように、各階層の先頭に「View All」項目を追加できます。
• Tab Bar： 最も重要なコレクションや最も深いコレクションへのワンタップのショートカットを提供する画面下部のバーで、カテゴリーツリーを変えずにクリック深度を下げます。
• Desktop & Mobile Mega Menu： 長い1つのリストではなく、見出しの下にリンクをグルーピングする複数カラムのパネルです。Mobile MenuにはDesktop Mega Menuのツリーを埋め込めるため、デスクトップとモバイルで1つの構造を共有できます。
• Icon Menu： メインカテゴリーへの視覚的な入り口として機能する、画像ベースのタイルです。

テーマのメニューで計画した構造を表示できない場合、Navi+を使えば、同じ3階層の範囲内で、その上にMobile Menu、Tab Bar、Mega Menuを構築できます。まず1つのコレクションで試してみてください。

ストア向けアクションチェックリスト

• トップページから売れ筋上位10商品までのクリック深度を測定する。
• 使用中のテーマ設定を確認し、入れ子のメニュー階層をいくつまでサポートしているかを把握する（ほとんどは最大2階層の入れ子に対応）。
• 明確な親カテゴリーを持つ、バランスの取れたピラミッド階層に、トップナビゲーションを構成する。
• モバイルのドロワーメニューが、入れ子の各階層の先頭に見えやすい「View All」リンクを含んでいることを確認する。
• 深く入れ子になったコレクションに、直接のショートカット（固定表示の画面下部タブバーやパンくずリストなど）を設ける。
• 構造の変更は、既存のURLを変えずに、まず1つのコレクションでテストする。
• Search Consoleの表示回数とインデックスの状況を数週間監視し、効果を確認する。

よくある質問（FAQ）

Shopifyのメニューは何階層にするべきですか？

ShopifyのメニューはLiquidのlinklistで最大3階層まで可能で、ほとんどのテーマは最上位項目の下に最大2階層の入れ子のドロップダウンに対応しています。ほとんどのストアは、この3階層の構造内に収めることでうまくいきます。

すべての商品を3クリック以内に置くべきですか？

3クリックという考え方は経験則であり、実証された法則ではありません。Googleが求めているのは、妥当な数のクリックと、重要なページすべてがサイト内の少なくとも1つの別のページからリンクされていることだけです。

フラットなサイト構造のほうがSEOに有利ですか？

自動的にそうとは限りません。John Muellerは、非常にフラットなサイトでは検索エンジンにとってすべてのページが同じくらい重要に見えると指摘し、バランスの取れたピラミッド構造を目指すことを推奨しています。

大きなメガメニューはSEOに悪影響を与えますか？

実装が不十分だと、階層が不明瞭になる可能性があります。Search Engine Journalで議論されたケースは、1,000を超えるリンクを持つメガメニューを扱っていました。リンクを論理的なカラムにグルーピングし、メニューを実際のカテゴリーの経路に絞ることで、階層を明確に保てます。

深いメニューはモバイルでどう機能させるべきですか？

ドリルダウン式のドロワーやアコーディオンを使って必要なカテゴリーの階層を維持しつつ、各階層に見えやすい「View All」項目を追加してください。Baymardのユーザビリティ調査は、モバイルで下位階層を取り除くことは不適切なUXの実装であることを示しています。

参考資料・出典

• Nielsen Norman Group（Kathryn Whitenton、2013年）：Flat vs. Deep Website Hierarchies
• Search Engine Journal（Roger Montti、John Muellerの発言を引用、2021年）：John Mueller Recommends Pyramid Site Structure
• Shopify Help Center：Drop-down menus in Shopify
• Shopify Developer Documentation：Liquid linklist object
• Google Search Central：Creating crawlable links
• Baymard Institute：Mobile navigation ‘View All’ usability research
• Fresh Consulting：UI/UX Principle #23: Flatter Navigation is Better Than Deeper Navigation
• Mailchimp (DE)：Website-Architektur optimieren