衣料品店のメニューを整理していて、「女性 → トップス → ブラウス → 長袖」というようなパスを作ろうとしているとします。これは顧客が商品をどう考えるかを反映した論理的な階層です。Shopifyのナビゲーション管理画面で丁寧に各レベルをネストしていきます。そしてストアでメニューをプレビューすると、「長袖」が表示されていないことに気づきます。4番目の階層は消えてしまっているのです。
これはテーマのバグではありません。Shopifyのメニューアーキテクチャの厳しい制限です：最大3階層です。どのテーマを使っていても（Dawn、Prestige、Impulse、またはカスタム構築されたテーマ）、プラットフォーム自体がメニューのネストを3階層以内に制限しています。複雑なカタログを持つストアでは、この制約により、発見性を傷つける妥協を強いられます。
- Shopifyのメニューシステムは、プラットフォームレベルですべてのテーマに対して3階層の深さ制限を適用します。
- 深いカタログを持つストア（ファッション、電子機器、自動車部品）は、商品分類を正確に反映するために4～6階層が必要なことがあります。
- フラット化や重複カテゴリなどの回避方法は、SEOとユーザー体験を損なわせます。
- メニューアプリはShopifyのネイティブメニューオブジェクトとは独立してナビゲーションをレンダリングすることで、制限を回避します。
Shopifyが3階層制限を適用する理由
3階層の制限は恣意的ではありません。それはユーザビリティ研究に根ざした設計哲学を反映しています。Nielsen Norman Groupの研究により、深いナビゲーション階層は認知負荷を増加させ、ユーザーがサイト構造のメンタルモデルを形成するのが難しくなることが一貫して示されています。ウェブナビゲーションの古典的なガイドラインは「どのページにも3クリック以内」であり、Shopifyのメニューシステムはこれをアーキテクチャレベルで適用しています。
技術的な観点からすると、Shopifyのメニューオブジェクトはプラットフォームのデータベース内にシンプルなネストされたデータ構造として保存されています。各メニュー項目は子を持つことができ、その子もまた子を持つことができますが、構造はそこで止まります。これによってデータモデルがシンプルに保たれ、テーマ間で一貫した動作が保証されます。Shopifyが無制限のネストを許可すれば、テーマはLiquidテンプレートで任意の深さの再帰を処理する必要があり、パフォーマンスとレンダリングの複雑さが生まれます。
3階層制限はまた、一般的なナビゲーションパターンにもよく対応しています。典型的なメガメニューは次のように表示されます：
- 階層1： 水平ナビゲーションバーのトップレベルカテゴリ（女性、男性、子ども）
- 階層2： ドロップダウン内のサブカテゴリ（トップス、ボトムス、アクセサリー）
- 階層3： 各サブカテゴリ内の特定の商品タイプ（Tシャツ、ブラウス、タンクトップ）
多くのストアにとって、この構造で十分です。50個の商品を5つのカテゴリに分けた小さなブティックはより深いネストはほぼ必要ありません。制限は、カタログがこのモデルを超えて成長した場合にのみ問題になります。
実際に3階層以上が必要な場合
すべてのストアが深いナビゲーションを必要としません。4番目または5番目の階層を欲しいと思ったら、その複雑さが正当化されるかどうかを問う価値があります。しかし、3階層では不十分な正当なシナリオがあります：
複数の商品属性を持つファッション・アパレルストア。 衣料品店は「女性 → トップス → ブラウス → 長袖 → カジュアル」と、合理的に5階層を望むかもしれません。これは性別、衣料品タイプ、スタイル、袖の長さ、そして用途を反映しています。これを3階層に平坦化すると、属性を組み合わせる（「長袖カジュアルブラウス」）か、メニューセクション全体に分割するかのいずれかになります。
技術的な階層を持つ電子機器・技術ストア。 コンピュータ部品ストアは「コンポーネント → ストレージ → 内部ドライブ → SSD → NVMe → PCIe Gen 4」を必要とするかもしれません。各レベルは、技術的買い手がちょうど正しい商品カテゴリにナビゲートするのに役立つ、意味のある区別を表します。
車両ベースのナビゲーションを持つ自動車部品ストア。 自動車部品はしばしば「メーカー → モデル → 年式 → システム → コンポーネント」で整理されます。これは個別商品に到達する前に5階層です。代替案は顧客に車両選択ツールを使用させることです。これは機能しますが、直接的なメニューナビゲーション比較して摩擦を追加します。
複雑な商品分類法を持つB2Bおよび卸売ストア。 産業用供給ストア、ラボ機器サプライヤー、および同様のB2B事業は、業界用語と一致する深く標準化された商品分類法を持つことが多いです。これらのカテゴリをフラット化すると、専門的な買い手が必要なものをすばやく見つけるのが難しくなります。
テストは、ネストの各レベルが顧客が商品について考えるときに使用する意味のある区別を表すかどうかです。4番目の階層が本当に買い手が商品をより速く絞り込むのに役立つなら、それが必要です。それが単なる組織的な完璧主義なら、おそらく3階層で生活できます。
一般的な回避方法とそれがうまくいかない理由
深さ制限に直面しているストアオーナーは通常、これらの回避方法のいずれかを試します。各々に大きな欠点があります：
レベルを組み合わせることで階層をフラット化する。 「女性 → トップス → ブラウス → 長袖」の代わりに、「女性 → 長袖ブラウス」を作成します。これであなたは3階層以内に留まりますが、狭く定義されたカテゴリが大量に生成されます。メニューは長く扱いにくいリストになり、より深い階層を有用にした論理的なグループ化が失われます。
異なるレベルで重複するメニュー項目を作成する。 「長袖ブラウス」を「女性 → トップス」と「女性」の直下の両方に入れるかもしれません。これは重要なカテゴリをアクセス可能に保ちますが、メンテナンスの頭痛の種を生み出します。コレクションに商品を追加するたびに、すべての重複リンクが引き続き意味をなすかチェックする必要があります。また、同じカテゴリを複数の場所で見る買い手を混乱させます。
メガメニューの説明や画像を使用してより深いカテゴリを表示する。 一部のテーマでは、メガメニューパネル内に説明テキストまたは画像リンクを追加できます。4番目のレベルのカテゴリをレベル3ドロップダウン内のスタイルされたリンクとして一覧表示できます。これは技術的に機能しますが、視覚的な階層を破壊します。買い手はどのリンクがピア カテゴリであり、どれがサブカテゴリであるかを判断できません。また、メニューの説明フィールドでカスタムHTMLが必要です。ほとんどのストアオーナーはこれを保守するのが面倒だと感じます。
より深いカテゴリをコレクションページにプッシュする。 メニューを3階層に平坦化し、コレクションページのフィルターまたはカテゴリグリッドに4番目のレベルを表示させることに依存します。これは発見可能性には機能しますが、メニューと商品の間に余分なページ読み込みを追加します。正確に何を望んでいるかを知っている買い手（例えば「長袖カジュアルブラウス」）は「女性 → トップス → ブラウス」をクリックしてから、サブカテゴリのグリッドをスキャンするか、フィルターを使用してさらに絞り込む必要があります。追加の各ステップはコンバージョンが失われます。
ネストされたカテゴリを完全に削除し、検索またはフィルターに依存する。 一部のストアは深いメニューナビゲーションを完全に放棄し、検索とフィルタリングに大きく投資します。これは技術的に詳しいオーディエンスを持つストアでは機能しますが、Baymard Instituteの研究ではユーザーの69%が主に検索ではなくナビゲーションメニューに依存していることが示されています。ほとんどの買い手は、特に正確に何を探しているかわからない場合、検索クエリを作成するよりもカテゴリを参照することを好みます。
これらの回避方法はすべて摩擦を生み出します。余分なクリックを追加し、メニューを乱雑にし、メンテナンスを複雑にするか、買い手に非標準的なナビゲーションパターンを学ばせるかのいずれかです。より深い問題は、ナビゲーション問題を直接解決する代わりに、プラットフォームの制約と戦っているということです。
メニューアプリが3階層制限を回避する仕組み
メニューアプリはShopifyのネイティブメニューオブジェクトを使用しません。代わりに、JavaScriptを使用してナビゲーションを動的にレンダリングし、Shopifyのメニューオブジェクト（とそれを独自のロジックで拡張したもの）またはアプリ内で管理される別のデータ構造からデータをプルします。
技術的には次のように機能します：
アプリはあなたのShopifyメニューをデータソースとして読み込みます。 あなたはまだShopifyのナビゲーション管理画面でメニューを作成します。これはあなたのカテゴリ構造を1つの場所に保ち、管理可能にします。しかし、アプリがあなたのストアでメニューをレンダリングするとき、Shopifyの3階層制限にバインドされていません。アプリはメタデータ（タグ、メタフィールド、または別のマッピングテーブル）を読み取ってより深い階層を構築できます。
アプリはカスタムHTMLとJavaScriptを使用してメニューをレンダリングします。 テーマのLiquidテンプレートにネストされた<ul>リストの出力に頼る代わりに、アプリは独自のマークアップをインジェクトします。これにより、必要に応じて4、5、または6階層のネストをレンダリングする能力を含む、構造とスタイルに完全に制御できます。
アプリは相互作用状態を独立して処理します。 買い手がメニュー項目をホバーまたはタップするとき、アプリのJavaScriptがドロップダウンの動作を管理します。これにより、より洗練された相互作用が可能になります。深いカテゴリのパンくずパスを表示したり、サブカテゴリを段階的に明らかにするスライドアウトパネルを実装したりするなど。
例えば、Navi+ AI Menu Builderでは、Shopifyのコレクションとページを無制限の深さでメニュー構造にマップできます。Navi+の管理インターフェースで階層を定義し、アプリは設定に応じてメガメニュー、スライドメニュー、またはタブバーとしてレンダリングします。基盤となるShopifyメニューオブジェクトはシンプルなままです（多くの場合、トップレベルのカテゴリのみ）。一方、アプリはより深い構造をレイヤーします。
トレードオフとしては、メニューはもはやShopifyのネイティブ管理画面で完全に管理されていません。アプリのインターフェースでより深いレベルを構成する必要があります。これはあなたのナビゲーションに真実の2番目のソースを追加します。Shopifyでコレクション名を変更する場合、アプリでも更新する必要があるかもしれません。よく設計されたアプリはShopifyのコレクションとの自動同期により、これを最小化しますが、それでも管理する追加層です。
移行のヒントテーマメニューからアプリに切り替える場合は、まず既存の3階層構造をアプリで複製することから始めます。十分にテストしてから、4番目の階層を本当に必要な場所のみに追加します。このステージ的なアプローチはナビゲーション混乱を防ぎます。
メニューの適切な深さを選択する
アプリが6階層深くネストすることを可能にするからといって、そうすべきではありません。追加の各レベルは認知負荷を加え、メニューのスキャンを遅くします。実用的なフレームワークは次のとおりです：
4階層はほとんどの複雑なカタログに有用です。 3階層以上が必要な場合、おそらく4階層が必要です。これにより、買い手を圧倒することなく、特異性の1つの追加層が得られます。例えば「女性 → トップス → ブラウス → 長袖」です。これは有用さに十分な特異性をもたらしながら、依然としてスキャン可能です。
5階層は技術的または専門的な買い手に適しています。 顧客がドメインエキスパート（自動車整備士、IT買い手、ラボ技術者）の場合、業界標準分類法にマップするため、より深い階層に快適です。これらの場合、5番目のレベルは曖昧性を減らし、商品発見を加速させます。
6階層以上はめったに正当化されません。 6階層以上を欲しいと思うならば、それはあなたのカテゴリ構造が細かすぎるかもしれないという信号です。これらのレベルのいくつかがコレクションページの代わりにフィルターまたはタグである可能性があるかどうかを検討してください。ファセット フィルタリングは、固定階層がサポートできない方法（例えば、長袖+カジュアル+50ドル未満）で買い手が属性を組み合わせられるようにするため、超深いナビゲーションよりも優れたソリューションです。
目標は、深さを顧客のメンタルモデルと一致させることです。4番目のレベルが有用かどうか確実でない場合、テストしてください。メニューアプリでより深いナビゲーションをセットアップしてから、セッション記録（Hotjarまたはmicrosoft clarityなどのツールを使用）を見て、買い手が実際に追加レベルを使用しているか、3階層で停止してフィルターを代わりに使用しているかを確認します。
実在例：より深いナビゲーションが必要だったストア
例1：ファッションマルチブランドストア。 40以上の衣料品ブランドを販売するShopify Plusストアはブランド→性別→カテゴリ→サブカテゴリで整理したかったです。これは4階層です（例えば、Nike → 女性 → トップス → スポーツブラ）。3番目の層の制限は、性別の層をスキップするか（ブランド→カテゴリ→サブカテゴリ）、またはサブカテゴリ層をスキップするかのいずれかを強いられます。どちらのオプションもユーザー体験を損なわせます。最初のもので性別は衣料品買い手の主要なフィルターであるため、2番目は商品を広いカテゴリーに強制的に入れるからです。メニューアプリで4層を実装した後、ナビゲーションの明確さが大きく改善しました。
例2：技術的なカテゴリを持つ電子機器ストア。 コンピュータ部品小売業者は「コンポーネント → ストレージ → 内部ドライブ → SSD → フォームファクター」を必要としていました。5番目の層（フォームファクター：M.2、2.5”、U.2）は必須でした。各フォームファクターは物理的に他と互換性がないからです。M.2 SSDが必要だった買い手は2.5”ドライブを使用できなかったため、それらを単一の「SSD」カテゴリに詰め込むことは、顧客が商品仕様を読んで互換性を決定させました。5階層ナビゲーションを持つメニューアプリにより、フォームファクターをメニューで直接表示でき、返品とサポートチケットを削減しました。
例3：自動車部品ストア。 アフターマーケット自動車部品ストアは「メーカー → モデル → 年式 → システム → コンポーネント」で整理されていました。深いナビゲーションがなければ、買い手が商品を見る前に車両情報を入力する必要がある車両選択ウィジェットに依存する必要がありました。これは既に必要なものを知っていた既存顧客に対して摩擦を追加しました。5階層メニューを実装することで、経験豊富な顧客に正しいコンポーネントへの直接パスを与え、初回利用者に車両選択ツールを提供しました。
各場合において、より深いナビゲーションは複雑さを追加することではなく、買い手が商品を見つけるときに使用する実世界の決定プロセスを反映することでした。メニューが顧客の考え方と一致する場合、ナビゲーションは見えなくなり、コンバージョン率は改善します。
このコンテンツはより大きなガイドの一部です：Shopifyテーマのメニュー制限：メニューアプリをいつ使うべきか