Shopifyマルチレベルメニューの設計：ネストされた階層、ディープナビゲーション、店舗案内UX

小規模なオンラインストアのナビゲーション設計は至ってシンプルです。ヘッダーに配置したいくつかの明確なリンクが、訪問者を迷わず商品へと導きます。しかし、部門やスタイル、仕様が多岐にわたる大規模なEコマースカタログでは、メニューは単なる装飾要素ではなく、店舗内の動線を制御する厳密な道案内工学となります。

標準のShopifyストアでは、メニューにトップレベル項目と最大2階層のネストされたサブ階層という厳格なプラットフォーム上限が存在します。この「最大3階層」という制約は欠陥ではなく、UXを保護するための防壁です。優れたストアは複雑な多層構造でこれを無理に突破しようとせず、デスクトップでは一覧性の高いメガメニュー、モバイルでは段階的なドリルダウンを用い、詳細な仕様はコレクションの絞り込みフィルターに委ねます。

クイック回答：Shopifyメニューは何階層まで深くできるか？

Shopifyメニューはトップ項目と最大2階層のドロップダウンからなる計3階層まで対応しています（Shopifyヘルプセンター）。テーマはこの深度をサポートしますが、深すぎるメニューは操作が難しいため、PCではメガメニュー、モバイルでは階層パネルやアコーディオンに整理すべきです（NN/g）。

Shopifyがマルチレベルメニューを保存する仕組み

Shopifyは階層リンク構造をデータベース内のリンクリストとして保存します。過去のマニュアルでは Online Store > Navigation と案内されていましたが、最新のShopify公式仕様では Content > Menus から直接管理します。プラットフォームの制限とテーマのLiquidによる展開ロジックを理解することで、表示エラーを未然に防ぐことができます。

Content > Menus での項目ネスト手順

Shopifyで階層メニューを作成するには、管理画面の Content > Menus にアクセスします。メインメニューを開いてリンクを追加し、子項目を親項目のすぐ下かつ右側へ少しドラッグします。Shopify公式ヘルプに明記されている通り、トップレベル項目は最大2階層のネストされたドロップダウンメニューを持つことができ、合計3階層が厳格な上限となります。管理画面上でネイティブに4階層目を作成することはできません。

Shopify Admin Native Menu Structure:
Level 1: Men (Top-level item)
  └── Level 2: Footwear (First nested drop-down)
        └── Level 3: Running Shoes (Second nested drop-down — hard ceiling)
              └── [Level 4: Trail Running] ◄── Not possible in Shopify admin

テーマがネストリンクを読み込む仕組み（link.links）

ShopifyのLiquidテンプレートは link オブジェクトを通じて階層構造を走査します。具体的には link.links が子リンクの配列を返し、link.levels が配下にネストされている階層数を返します。テーマは最大3段階の入れ子ループを実行します：

<ul class="site-nav">
  
</ul>

テーマで3階層目のリンクが表示されない原因

管理画面で3階層目のリンクを構築したにもかかわらず、フロントエンドに表示されないという相談が後を絶ちません。Shopifyヘルプセンターが説明するように、多くの標準テーマは通常のドロップダウンヘッダーにおいて最大2階層までしかサポートしていません。一部のテーマでは、3階層目を複数列のメガメニューのレイアウトに限定しています。メニューデータの誤りを疑う前に、テーマのドキュメントを確認してください。

モバイル画面では別の問題も発生します。親カテゴリをタップした際、サブメニューが開かずにコレクションページへ直接遷移してしまう現象です。Shopifyは Content > Menus で親項目のリンク先フィールドが # に設定されているか確認するよう案内しています。また、一部のテーマではモバイルUXを向上させるためにCSSの調整が必要な場合があります。

階層が深すぎると使いにくい理由：ステアリングの法則と情報の手がかり

多階層メニューは物理的・認知的な摩擦を引き起こします。デスクトップ環境におけるカスケード式フライアウトメニューは、ユーザーに狭い水平通路の中を正確にマウスポインターで進むことを強います。3階層目の項目を目指して斜めにカーソルを動かすと、ポインターがホバー有効領域を外れ、メニューが一瞬で閉じてしまいます。

The "Mouse Tunnel" Steering Trap in Cascading Flyouts:
┌──────────────┐
│ Category A   │
├──────────────┤
│ Category B   │──────┐
├──────────────┤      │  Shopper moves pointer diagonally
│ Category C   │      ▼  toward desired item...
└──────────────┘   ┌──────────────┐
                   │ Sub-item 1   │
                   ├──────────────┤ ◄── Pointer exits the narrow tunnel!
                   │ Sub-item 2   │     Submenu collapses instantly.
                   └──────────────┘

アコット・チャイのステアリングの法則（Accot-Zhai Steering Law）はこの困難を数学的にモデル化しています。狭いトンネル内でのポインティング操作は時間がかかり、操作を誤りやすくなります。Nielsen Norman Groupの調査でも、階層メニューはステアリングの法則の制約上、優れたUI設計が本質的に難しいと明記されており、NN/gは階層メニュー、特に2階層を超える深いメニューを避けるよう強く推奨しています。

さらに、深すぎるナビゲーションは「情報の手がかり（Information Scent）」を減退させます。ユーザーはカテゴリ名の単語を手がかりに目的の商品へ近づいているかを判断します。メニュー項目が曖昧な単語の奥深くに埋もれていると、道に迷ってしまうことがあります。

デスクトップ：カスケード式フライアウト vs メガメニュー

マウストンネルの罠を解消するため、Nielsen Norman Groupはナビゲーションメニューにおいてプルダウンメニューの代替としてメガメニューを検討するよう助言しています。シビアなカーソル軌跡を強いるフライアウトと異なり、メガメニューは2階層目と3階層目の全選択肢を安定した2次元平面に展開します。

メガメニューのホバー操作には適切な時間制御が欠かせません。Nielsen Norman Groupは、ポインターが0.5秒静止してから展開し、0.1秒以内に表示を完了させ、ポインターが領域外に出てから0.5秒間は表示を維持するよう定めています。このバッファにより、ヘッダーを横切るだけの偶発的な誤作動を防ぐことができます。

NN/gはまた、選択肢を関連するまとまりごとにグループ化することを求めています。Shopifyの3階層メニューでは、2階層目を列見出しとして太字で配置し、その直下に3階層目のリンクを並べる構造をとります。配置パターンの詳細は当社の mega menu best practices をご覧ください。

ただし、PC用メガメニューをそのままモバイルに移植してはなりません。NN/gは、メガメニュー内の細かな選択肢がタッチスクリーン上でのタップミスを引き起こすと警告しています。画面サイズに応じて指先操作に最適化したUIへ切り替える必要があります。

モバイル：アコーディオン vs ドリルダウンパネル

モバイルナビゲーションの設計にはタッチ操作の生体力学への理解が不可欠です。Steven HooberがUXmattersに発表した1,333件のスマートフォン利用観察によると、49%のユーザーが片手だけで端末を保持していることが判明しています。実機で片手操作を試してみてください。

図1：コンセプトイラスト（Concept illustration）— モバイル：アコーディオン vs ドリルダウンパネル

アコーディオン方式の強み

縦型アコーディオンは、タップされた親項目の直下に子カテゴリを展開します。Smashing Magazine（Friedman 2022）の記事は、アコーディオンは複数階層のナビゲーションで非常に有効であり、スライドインメニューよりも優れていることが多いと述べています。同一階層のカテゴリが表示されたままなので、ページの文脈を失わずに階層間をすばやく移動できます。

アコーディオン最大の懸念は Accordion sprawl と呼ばれる極端な縦伸びです。複数のカテゴリを次々に展開すると、メニューが画面数枚分の高さに達し、主要リンクが遥か下に押し流されます。これを抑えるため、新しい親カテゴリを開いた際に開いている他のグループを自動的に閉じる設計が推奨されます。

ドリルダウンパネルの強み

ドリルダウンパネルはタップごとに引き出し画面全体を横方向に切り替え、One tier at a time で提示します。ドロワーの高さを一定に保ち、選択肢を明確な Intent groups ごとに整理できるため、階層構造が複雑なカタログに適しています。

Smashing Magazineが指摘するドリルダウンの課題は、戻るボタンの移動先が直感的に分かりにくい点です。Smashingは「戻る」という単一の単語を Contextual back label（例：‹ Men）に置き換えることを推奨しています。あわせて、各パネル上部に Persistent back button を置くことをおすすめします。詳細は mobile drawer menu design を参照してください。

タクソノミー（分類）vs フィルター：メニューをどこで止めるべきか

図2：コンセプトイラスト（Concept illustration）— タクソノミー（分類）vs フィルター：メニューをどこで止めるべきか

Shopifyの3階層制限に行き詰まりを感じるストアの多くは、メニューとフィルターの役割分担に混乱が生じています。グローバルメニューに配置すべきなのは、相互に排他的な購買意図を表す Structural categories（例：ランニングシューズとスニーカー）です。これに対して商品の細かな属性は、コレクションページの Faceted filters や Filter chips で絞り込むべきです。

「赤色」「Lサイズ」「セール品」といった属性までメニューのリンクツリーに詰め込むと、階層構造は崩壊します。メニューは第3階層で止め、仕様はコレクションフィルターに委ねることで、すっきりとした操作しやすい導線が保たれます。

ディープメニューのパフォーマンスとアクセシビリティ

多階層メニューは技術的な負荷を伴います。標準的なShopifyテーマでは、ネストされたLiquidループがすべてのリンクをサーバーサイドで初期HTMLドキュメントに書き出します。画像やバッジを多用した豪華なメガメニューは、ユーザーが画面を操作する前から非常に多くのDOMノードを生成します。

Google Chrome Lighthouseのドキュメントでは、body要素が約 ~800 ノードを超えると警告、~1,400 ノードを超えるとエラーと判定されます。大きなDOMツリーはブラウザの負荷を増やすため、推測ではなく計測してください。Chrome DevToolsのコンソールで document.querySelector(‘header’).querySelectorAll(‘*’).length を実行して自社ストアのノード数を測定できます。詳細は how navigation affects page speed をご確認ください。

アクセシビリティの観点では、W3C WAI-ARIA APG（Authoring Practices Guide）の開閉（Disclosure）パターンに準拠する必要があります。APGはWebサイトナビゲーションにおいて、PCアプリ用のmenuロールを使用しないよう定めています。開閉ボタンは aria-expanded を false と true で適切に切り替え、非表示パネルをスクリーンリーダーから隠し、Escapeキー押下時には開いているドロップダウンを閉じて制御ボタンへフォーカスを戻す必要があります。

設計上のトレードオフ：深いメニューを作るべきではないケース

すべてのストアに3階層ものメニューが必要なわけではありません。商品数の限られたブティックストアで多層ドロップダウンを導入すると、無用なクリックを強いることになります。小規模なカタログなら、単一のコレクションページで一覧できる方が快適です。

SNS広告からランディングページへ直接集客するDTCブランドも、浅い階層構造の方が適しています。最小限のフラットなメニューとコレクション上のフィルターチップを組み合わせる方が、重厚なメガメニューより合う場合があります。自社のトラフィックで検証してください。

また、余白とビジュアルを最優先するラグジュアリーブランドでは、複雑なリンク群はブランドの世界観を損ないます。Nielsen Norman Groupの根本的な指針である「階層メニュー、特に2階層を超えるメニューは避ける」という原則を常に意識してください。

カタログ規模別の意思決定フレームワーク

自社ストアに最適なメニュー階層を決定するには、商品カタログの規模と顧客の閲覧行動を以下の設計マトリクスと照合してください：

Multi-Level Navigation Decision Architecture:
┌─────────────────────────────────────────────────────────────────┐
│ Catalog Scale & Taxonomy Audit                                  │
└────────────────────────────────┬────────────────────────────────┘
                                 │
         ┌───────────────────────┴───────────────────────┐
         ▼                                               ▼
  [ Small, focused catalog ]                    [ Broad, multi-category ]
         │                                               │
         ▼                                               ▼
┌─────────────────────────────┐                 ┌─────────────────────────────┐
│ 1–2 Tier Flat Navigation    │                 │ Multi-Tier Structure Needed │
│ Single-line bar on desktop  │                 └──────────────┬──────────────┘
│ Clean 1-level mobile drawer │                                │
└─────────────────────────────┘         ┌──────────────────────┴──────────────────────┐
                                        ▼                                             ▼
                                [ Desktop Viewport ]                          [ Mobile Viewport ]
                                        │                                             │
                                        ▼                                             ▼
                         ┌─────────────────────────────┐               ┌─────────────────────────────┐
                         │ 2D Scannable Mega Menu      │               │ Drill-Down Panels / Drawer  │
                         │ Columns, intent groups      │               │ Step-by-step navigation     │
                         │ High scannability           │               │ Contextual "< Back" crumb   │
                         └─────────────────────────────┘               └─────────────────────────────┘

カタログ規模の区分は定性的な目安であり、絶対的な測定閾値ではありません。

Navi+が解決する領域

Liquidコードの編集を行わずに大規模なカタログをスマートに整理したいShopifyマーチャントのために、Navi+ はShopifyストア向けの直感的なビジュアルナビゲーションビルダーを提供しています。

Theme Menu vs. Navi+ Menu Delivery:

Traditional Theme Liquid:
[Shopify Server] ──► [Loops every menu link in Liquid] ──► [All links in initial HTML] ──► Browser

Navi+:
[Shopify Server] ──► [Theme HTML without Navi+ menu links] ──► Browser
                               ▲
                               │ Menu config loaded by a script
                             [CDN]
                   (Menu stored as a JSON file)

Shopifyの基本設計と同様に、Navi+のメニュー構造も最大3階層の上限を遵守しています。Navi+の真価はデバイス別の表示最適化にあります。デスクトップ向けには列グループや画像バナーを備えた Desktop Mega Menu を構築し、スマートフォン向けには操作しやすい Mobile Menu（または下部固定の Tab Bar）を個別に最適化できます。Mobile Menu には既存のShopifyメニューツリーを埋め込むこともでき、Sync now ボタンで更新できます。

システム構成として、Navi+はメニュー設定をCDN経由のJSONファイルとして保存し、ブラウザ側のスクリプトで描画するため、テーマの初期Liquid HTMLコードにリンクを埋め込まずに済みます。実際のパフォーマンスへの影響は、PageSpeed InsightsやChrome DevToolsを用いて自社ストアで直接測定することをお勧めします。

テーマ標準のメニューでは、同じ3階層の構造をデスクトップとモバイルで異なる見せ方にできない場合、Navi+ なら Desktop Mega Menu と専用の Mobile Menu をビジュアルに構築できます。その後、下のチェックリストをご自身のストアで実施してください。

スマートフォンの代替ナビゲーション手法については mobile navigation beyond the hamburger を、テーマ別の設定方法は Navi+ setup guides for Shopify themes をご覧ください。

アクションチェックリスト：多階層メニューの診断手順

以下の5段階の手順に従って、Shopifyストアのメニュー階層と健全性を検証してください：

• ステップ1：分類と属性の切り分け： メニューリンクをスプレッドシート等で一覧化します。構造的なカテゴリ（シューズ、アウター等）のみをメニューに残し、属性（色、サイズ、価格）はコレクションフィルターへ移行します。
• ステップ2：情報の手がかりを強化： 抽象的な宣伝文句を排除し、ユーザーが実際に検索窓に入力する具体的で認知度の高いカテゴリ名称を採用します。
• ステップ3：実機スマートフォンでの検証： 実機のスマホで第3階層まで実際に操作します。親リンクに # が指定され誤ったページリロードが起きないか、戻るボタンの表示先が明確か確認します。
• ステップ4：ヘッダーのDOMノード数測定： Chrome DevToolsのコンソールで document.querySelector(‘header’).querySelectorAll(‘*’).length を実行します。全体のノード数やLighthouseの約 ~800 ノード警告基準と比較します。
• ステップ5：キーボード操作の確認： Tab、Enter、Escapeキーのみでメニューを巡回します。Escapeキーでサブメニューが閉じ、フォーカスが元の開閉ボタンへ復帰することを確認します。

よくある質問（FAQ）

Shopifyマルチレベルメニューの設計、制限、モバイルUXに関するよくある質問：

Shopifyメニューは何階層まで作成できますか？

Shopify公式ヘルプセンターに記載されている通り、Shopifyメニューはトップレベル項目と最大2階層のネストされたドロップダウンメニューの計3階層に対応しています。

Shopifyでメニュー項目をネストするにはどうすればよいですか？

Shopify管理画面で Content > Menus に移動し、編集するメニューを開いて、親項目の下に子項目を右側に少しドラッグして保存します。

テーマで3階層目のリンクが表示されないのはなぜですか？

Shopifyヘルプセンターによると、多くの標準テーマはドロップダウンヘッダーで最大2階層までしか表示しません。一部のテーマでは、複数列のメガメニューのレイアウトでのみ3階層目が表示されます。テーマのドキュメントをご確認ください。

モバイルで親リンクをタップするとメニューが開かずページに遷移するのはなぜですか？

Shopifyは、Content > Menus で親項目的のリンク先フィールドが # に設定されているか確認することを推奨しています。これによりタップ時にページ移動せずサブメニューが開きます。

大規模なカタログではドロップダウンよりメガメニューの方が優れていますか？

Nielsen Norman Groupは、サイトナビゲーションにおいてプルダウンメニューの代わりにメガメニューの採用を検討し、2階層を超える深い階層メニューを避けるよう推奨しています。

モバイルではアコーディオンとドリルダウンパネルのどちらを選ぶべきですか？

どちらにも利点があります。Smashing Magazineは多階層ナビゲーションにおいてアコーディオンが非常に有効であると指摘する一方、ドリルダウンパネルは文脈に応じた戻るボタンと組み合わせることで画面の垂直方向の肥大化を防ぎます。

出典とエビデンス

• Shopifyヘルプセンター： Set up drop-down menus in your online store. メニュー階層仕様およびテーマの表示要件。 help.shopify.com
• Shopify.dev： Liquid link object reference. link.links 子リンク配列および link.levels プロパティの仕様解説。 shopify.dev
• Nielsen Norman Group： Laubheimer, P. (2019). Accot-Zhai Steering Law: Implications for UI Design. マウストンネル現象と階層メニューのエラー率に関する研究。 nngroup.com
• Nielsen Norman Group： Nielsen, J. & Li, A. (2017). Mega Menus Work Well for Site Navigation. 2次元グループ化とホバー遅延時間（0.5秒 / 0.1秒）のガイドライン。 nngroup.com
• Smashing Magazine： Friedman, V. (2022). Designing Navigation for Mobile: Design Patterns and Best Practices. モバイルアコーディオン、スライドメニュー、戻るボタンの文脈設計。 smashingmagazine.com
• Steven Hoober (UXmatters)： How Do Users Really Hold Mobile Devices? (2013). 1,333件の現地観察調査、49%の片手持ち操作実態。 uxmatters.com
• Chrome for Developers： Avoid an excessive DOM size (Lighthouse). DOMノード警告基準（~800ノード）およびエラー基準（~1,400ノード）。 developer.chrome.com
• W3C Web Accessibility Initiative (WAI)： WAI-ARIA APG - Disclosure Navigation Pattern. キーボード操作とアクセシビリティステート管理基準。 w3.org
• 関連記事: Mega Menu Best Practices、 Mobile Drawer Menu Design、 Navigation and Page Speed、 Mobile Navigation Beyond the Hamburger、および Navi+ Setup Guides for Shopify Themes。