Shopifyの管理画面でコレクションを整理し、階層リンクを細かく構築するには多くの時間がかかります。大型モニターでは、カテゴリが横幅いっぱいのメガメニューとして美しく整列します。しかし、スマートフォンでハンバーガーメニューを開いた瞬間、ナビゲーションが寸断されていたり、デスクトップとずれているように感じることがあります。
多くのマーチャントは、PC向けのカラム表示とスマホ向けのシンプルなドロワーを実現するには、2つの別々のメニューを作成・保守しなければならないと考えがちです。しかし実際には、2つの異なる構造を持つ必要はありません。1つのカテゴリ階層を「信頼できる唯一の情報源」として維持しながら、各デバイスに最適なレイアウトで出力させることが可能です。
クイックアンサー：1つのメニューでデスクトップとモバイルの両方を運用できるか？
はい。Dawnテーマでは、ヘッダーのメインメニューがデスクトップ用メニューとモバイルドロワーの両方にデータを供給するため、構造はすでに共有されています。違いはレイアウトのみです。デスクトップは複数列を表示し、モバイルは階層を1段ずつ進みます。単一のデータ源を維持できる手法を選択しましょう。
- 手法1（テーマ標準のノーコード設定）： Shopify管理画面でメニューツリーを1つに保ち、ヘッダーのデスクトップ設定をメガメニューに切り替えます。テーマがモバイルドロワーの表示を自動処理します。
- 手法2（管理画面でメニューを2つに分離）： モバイル専用の独立したlinklistを作成し、ドロワーコードの参照先を変更します。柔軟性は高まるものの、二重管理の手間が発生します。
- 手法3（ドロワードキュメントのコード修正）： ドロワーのLiquidスニペットを編集し、深い階層のカテゴリを画面遷移なしで最初から展開表示させます。
Shopifyテーマが1つのメニューをデスクトップとモバイルで再利用する仕組み
Shopifyのアーキテクチャでは、ナビゲーションデータはデザインテンプレートから完全に独立しています。管理画面のコンテンツ > メニューでメニューを作成すると、Shopifyはその構造をlinklistオブジェクトとして保持します。Shopify開発者向けドキュメントによると、「リンクは最大3階層の深さまでネスト可能」です。これは第1階層の親項目と、その下にぶら下がる2段階の子階層を意味します。カテゴリの基本設計については、弊社のShopify menu guideをご参照ください。
linklistは純粋な構造データであるため、それをどのように画面に描画するかは適用中のテーマに委ねられます(Shopify Dev Docs)。Dawnのsections/header.liquidには、ドロップダウン、メガメニュー、デスクトップドロワーを切り替えるmenu_type_desktop設定が用意されています(GitHub Shopify Dawn)。
どのデスクトップ表示を選んでも、Dawnのモバイルドロワーは全く同じlinklistを参照します。snippets/header-drawer.liquidでは、for link in section.settings.menu.linksでヘッダーメニューをループ処理し、さらにfor grandchildlink in childlink.linksによって第3階層の孫リンクまでたどります(GitHub Shopify Dawn)。Liquidはリンクオブジェクトのlevels属性により、直下に何階層のネストが存在するかを自動把握しています(Shopify Liquid API)。
つまり、基本となる構造はすでに共有されているのです。あなたがお持ちなのはOne menu treeであり、画面サイズに合わせて異なるレイアウトが適用されているに過ぎません。
2つのレイアウトで操作感が異なって感じられる理由
同じlinklistを参照しているにもかかわらず、PCとスマホで操作感が大きく異なるのは、マウス操作とタッチ操作という対照的なインターフェース設計に起因します。
図1：コンセプトイラスト（Concept illustration）— 2つのレイアウトで操作感が異なって感じられる理由
デスクトップでは、項目にカーソルを合わせると広いHover panelが展開されます。ユーザーは画面遷移を挟むことなく、複数の列に並んだカテゴリや商品リンクを一目で俯瞰できます。
一方、モバイル画面は横幅が狭く、列を横並びに配置できません。そのため、多くのテーマは画面が横からスライドする階層式ドロワーを採用しています。目的の下位カテゴリに到達するには、親カテゴリをタップし、パネルのスライドを待ち、さらにタップする必要があります。このTwo tapsを要するステップは、ShopifyコミュニティでもDawn利用者の一部が不満点として挙げています(Shopify Community)。ドロワーの構造的背景については、mobile drawer menu architectureの解説をご覧ください。
さらに、タッチスクリーン特有のユーザビリティ課題も生じます：
- Parent link not clickable： 多くのモバイルドロワーでは、親カテゴリのテキスト行をタップするとサブメニューの開閉動作のみが発動し、親コレクションページへ遷移できません。
- 誤タップの発生： ニールセン・ノーマン・グループ（NN/g）の調査によると、「メガメニュー内の小さな選択肢は、タッチスクリーン上で誤タップを引き起こしやすい」と指摘されています(NN/g)。
- モバイル専用設計の採用： この操作性の違いから、Meteorなどのメガメニューアプリはデスクトップ用とモバイル用のテンプレートを意図的に分離しています(Helium Meteor Docs)。また、Clean Canvas社はSymmetryテーマにおいて、直接商品へ遷移できる単一階層のモバイルメニューを推奨しています(Clean Canvas)。
手法1：Shopifyメニューを1つに保ち、デスクトップ設定をメガメニューに変更する
最も推奨されるノーコード手法は、テーマに組み込まれたメガメニュー機能を活用することです。管理画面上のメニューを1つに集約したまま、テーマの描画機能にデバイス別の変換を任せることができます。
設定は以下の4ステップで完了します：
- 管理画面で3階層のメニューを構築： コンテンツ > メニューを開き、メインメニューを「親カテゴリ ＞ 中見出し ＞ 個別リンク」の順に階層構造化します。
- ヘッダーにメニューを割り当て： オンラインストア > テーマ > カスタマイズ > ヘッダーを開き、メニュー設定に作成したメニューが選択されていることを確認します。
- デスクトップメニュータイプをMega menuに変更： ヘッダー設定内のMenu typeを「ドロップダウン」から「Mega menu」に変更します(GitHub Shopify Dawn)。Dawnの詳細設定はadd a mega menu to Dawnで解説しています。
- モバイルドロワーの動作確認： プレビュー画面をモバイルに切り替え、ドロワーを開きます。同じメニューツリーがモバイル形式で正常に読み込まれていることを確認します(GitHub Shopify Dawn)。
サードパーティ製テーマでは設定項目の名称が異なる場合がありますので、各テーマのドキュメントをご確認ください(Shopify Dev Docs)。
手法2：Shopify管理画面で2つの独立したメニューを使用する
デスクトップ用メニューに多くの販促バナーや細かいリンクが含まれており、モバイル画面が煩雑になってしまう場合は、管理画面でメニューを意図的に2つ作成する選択肢もあります。
PC用のメインメニューとは別に、コンテンツ > メニューで「モバイルメニュー」という名称のシンプルなlinklistを別途作成します。多くのテーマはヘッダー設定で1つのメニューしか指定できないため、開発者はsnippets/header-drawer.liquidを編集し、ドロワーがsection.settings.menuの代わりにモバイル用メニューのハンドルを参照するよう書き換えます(Shopify Community)。お使いのテーマのドキュメントで、ドロワー用メニューを別に選べる設定があるかを確認してください。あればコード編集は不要です。
この手法はモバイル表示を自由に簡素化できる反面、運用上の大きな負担を伴います：
- 新しいコレクションの追加やセール情報の更新時に、常に2箇所のメニューを修正しなければなりません。
- 時間の経過とともに2つのメニューがずれ、PC版にあるリンクがスマホ版から抜け落ちる可能性があります。「デスクトップのメニューをモバイルに複製したい」という相談は、まさにこれを避けたいという要望です(Shopify Community)。
手法2は、モバイル向けに根本的に異なる導線設計がどうしても必要な場合にのみ採用すべきです。
手法3：ドロワーを編集して階層レベルを一度に展開表示する
多くのマーチャントが抱く要望として、「モバイルドロワーを開いた際、画面をスライドさせずに下位カテゴリを最初からすべて見せたい」という点があります(Shopify Community)。
Dawnのドロワーテンプレートは、構造上すでに子リンクおよび孫リンクをループ処理しています(GitHub Shopify Dawn)。LiquidおよびCSSを調整して隠しパネルの動作を無効化することで、アコーディオンのように最初から配下の階層をリスト形式で展開させることが可能です。
ただし、以下の技術的注意点を十分に理解しておく必要があります：
- テーマバージョンの差異： 2022年頃のフォーラム投稿に掲載されているコードは、古いDawnを対象としています。テーマのアップデートによりクラス名や構造は変化しています。
- テーマの複製を徹底： Liquidファイルを編集する前には、必ずテーマのバックアップコピーを作成してください。本番テーマ上で未検証コードを直接編集してはいけません。
- 長大な縦スクロール： メガメニューにリンクが多い場合、すべてを最初から展開するとドロワーが長くなり、スマートフォンでのスクロール負担が増えます。
デスクトップメガメニューからモバイルへ引き継がれる要素
デスクトップメガメニューをスマートフォン画面に適応させる際、すべてのグラフィック要素をそのまま移植できるわけではありません。ニールセン・ノーマン・グループは「選択肢を関連するまとまりごとにグループ化すること」を提唱しています(NN/g)。視覚的階層の整理手法については、mega menu layout and grouping best practicesをご参照ください。
図2：コンセプトイラスト（Concept illustration）— デスクトップメガメニューからモバイルへ引き継がれる要素
| デスクトップ要素 | スマートフォン上での挙動 | 推奨される対応策 |
|---|---|---|
| 複数列グリッド | 画面幅が狭いため複数列を横並びに配置できない(Navi+ Docs) | Columns become one columnとして1列の縦スクロールリストに整列させる |
| 列の見出しラベル | デスクトップの列を示すだけの見出しは、幅の狭いリストでは場所を取る | 列を縦に積む際は通常省略し、元の列の区切りには細いDivider between columnsを入れてグループ分けを保つ |
| プロモーション画像・バナー | 大きなPromo bannerは画面の縦領域を圧迫し商品リンクを押し下げてしまう | スマホでは重い画像を非表示にし、Exclude when embeddedなどの機能でドロワーを整理する(Navi+ Docs) |
| メニューの階層深度 | Shopifyの仕様上、メニューは最大3階層までに制限される(Shopify Dev Docs) | 階層を3レベル以内に抑え、Liquidループでリンクが切り捨てられるのを防ぐ |
| コンパクトなテキストリンク | リンクの間隔が詰まりすぎているとタッチミスを誘発する(NN/g) | リンク行の余白を広げ、WCAG 2.2基準である24×24 CSSピクセル以上の操作領域を確保する(W3C WCAG 2.2) |
公開前に実機スマートフォンで検証する
ブラウザの開発者ツールによる画面幅のエミュレーションでは、親指の届く範囲や実際のタッチ感度までは再現できません。必ず手元のスマートフォン実機で以下の検証を行ってください：
- iOSおよびAndroidの実機で確認： 異なる画面サイズの端末を用意し、縦向き・横向きの両方でプレビューを開きます。
- すべての階層リンクをタップ： 第1階層、第2階層、第3階層の各リンクを実際に押し、正しいコレクションURLへ遷移するか検証します。
- 親リンクの挙動を確認： 親カテゴリをタップした際、コレクションページへ遷移するか、サブメニューがスムーズに開閉するかを確かめます。
- タップ領域のサイズを計測： ボタンや行の余白が、WCAG 2.2が求める24x24ピクセル以上の寸法を満たしているか確認します(W3C WCAG 2.2)。
- ドロワーのスクロール動作： 最上部から最下部のアカウント情報リンクまで引っかかりなく滑らかにスクロールできるかチェックします。
- 複製テーマでテスト： ライブ公開する前に、必ず未公開の複製テーマで動作確認を完結させます。
よくある問題と解決策
デスクトップとモバイルのナビゲーションを整える過程で、頻出する4つのトラブルとその対策をまとめました：
モバイルメニューで2回タップが必要になる
- 原因： ドロワーの階層構造により、カテゴリを開いてから目的のリンクを押すまでに画面遷移が挟まれるためです(Shopify Community)。
- 解決策： ドロワーのコードを調整して下位項目をインライン展開するか（手法3）、列の階層を省略してワンタップでリンクへ到達できるレイアウトを採用します。
深い階層のリンクが表示されない
- 原因： Shopifyの標準メニューは最大3階層までしかサポートしていません(Shopify Dev Docs)。Dawnのテンプレートも第3階層を超えてループしません(GitHub Shopify Dawn)。
- 解決策： すべての重要ページが3階層以内に収まるよう、カテゴリ構造を再設計・フラット化します。
親カテゴリのリンクがクリックできない
- 原因： タッチスクリーンでは、親カテゴリ行のタップ動作が下位階層パネルの開閉専用に割り当てられているためです。
- 解決策： サブメニューの先頭項目として「[カテゴリ名]をすべて見る」という個別リンクを追加します。
モバイルでデスクトップと異なる項目が表示される
- 原因： 手法2のように、
snippets/header-drawer.liquidのカスタムコードや別アプリが別のモバイル専用メニューを参照している可能性があります(Shopify Community)。 - 解決策： テーマ設定とドロワーのコードを確認し、どのメニューハンドルが呼び出されているかを特定・修正します。
トレードオフ：単一構造の選択が適さないケース
1つのメニュー構造を共用することは管理効率の向上につながりますが、各アプローチには固有の制約が存在します：
| 手法 | 導入の手間 | 必要なコード | 管理場所 | 主なリスクとトレードオフ |
|---|---|---|---|---|
| 手法1：テーマ標準メガメニュー | 低（数分） | 不要（テーマ設定のみ） | Shopify管理画面の単一メニュー | テーマの表現力に依存；モバイルドロワーは標準の階層遷移を維持 |
| 手法2：2つの独立メニュー | 中 | 軽微なLiquid編集またはテーマ機能 | Shopify管理画面の2つのメニュー | メニュー内容の乖離リスク大；商品改定ごとに二重の更新作業が発生 |
| 手法3：ドロワーテンプレート編集 | 高 | LiquidおよびCSSのカスタマイズ | Shopify管理画面の単一メニュー | テーマ更新時にコードが破損するリスク；縦スクロール過多による離脱 |
メニューをあえて分離すべきケース
一元管理が基本原則ではあるものの、以下のような特定の運用状況ではモバイルメニューの分離が合理的な選択肢となります：
- 商品点数が膨大なメガストア： 何千ものSKUと多数のカテゴリを抱える店舗では、デスクトップの全構造をスマホに詰め込むと顧客が混乱します。主要商品へ直行できるシンプルな1階層メニューを別途用意するほうが優れたUXをもたらします(Clean Canvas)。
- モバイル特有のショートカット優先： スマホ利用者は「注文追跡」や「店舗検索」などの実用リンクへのクイックアクセスを第一階層に置くと便利な場合があります。
- 検索エンジンのクロール性（SEO）： モバイルメニューから特定の下位リンクを除外する場合は、コレクションページ内のリンク、パンくずリスト、サイトマップを通じて全商品が巡回可能な状態を維持してください。詳細はkeep your menu crawlableの解説をご覧ください。
Navi+が提供するソリューション
お使いのテーマに高度なメガメニュー機能がない場合や、Liquidコードの直接編集に不安がある場合、Navi+はデバイス間でナビゲーションを共有するための構造的な方法を提供します。
Navi+のドキュメントによると、デスクトップ用メニューとモバイル用メニューは次のように連携します：
- Desktop Mega Menu： 大画面向けに、Navi+ Desktop Mega Menuは画像やバナーを含む複数列のパネルを表示します。幅の広い列は狭いスマホ画面に収まらないため、モバイル端末上では自動的に非表示となります(Navi+ Docs)。
- Mobile Menuへの埋め込み機能： メニューをゼロから作り直す代わりに、Navi+ Mobile Menuはドロワーの第1階層に配置された埋め込み項目を通じて既存のデスクトップメガメニューを直接参照します(Navi+ Docs)。
- 1列スタックへの自動変換： 埋め込み時、横並びだったColumns become one columnとして縦1列に綺麗に並び直されます(Navi+ Docs)。中間の列階層が自動で省略されるため、ユーザーは2回ではなく1回のタップで目的のリンクへアクセスできます。
- 表示制御機能： Exclude when embeddedを有効化することで、PC向けの大型バナーをスマホ版から自動的に除外できます(Navi+ Docs)。
- 1か所で編集： ドロワーはメガメニューの項目を再利用するため、デスクトップメガメニュー側で1回編集するだけで（Edit once）、ドロワー内の埋め込みコピーもそれに追随します。メガメニューを削除したい場合は、事前にMobile Menuから埋め込み項目を解除するだけで安全に整理できます(Navi+ Docs)。
- 3階層までのサポート： Navi+ Mobile Menuは3階層（大カテゴリ、中カテゴリ、内部リンク）に対応しており、Shopify標準の階層深度を過不足なくカバーします(Navi+ Docs)。
設定は3ステップで行えます：
- Navi+管理画面で、Desktop Mega Menuから埋め込み項目（embed item）をコピーします。
- Mobile Menuを開き、ドロワーの第1階層にペーストします。
- デスクトップ専用の画像やバナーに対してExclude when embeddedをオンにします。
設定の詳細は、公式ドキュメントのreuse a Desktop Mega Menu on phonesおよびExclude when embeddedの活用法をご確認ください。
すでにDesktop Mega MenuにNavi+を使っている場合は、その埋め込み項目をMobile Menuにコピーし、スマートフォンでプレビューしてみてください。結果が期待どおりでなければ、埋め込み項目を削除するだけで、ほかは何も変わりません。
アクションチェックリスト
デスクトップとモバイルのナビゲーションを最適に連携させるためのチェックリストです：
- 1つのメニューツリーを確定： コンテンツ > メニューでカテゴリ階層を構築し、Shopifyの3階層制限内に収めます。
- 実装手法を決定： テーマ標準機能（手法1）、別メニュー運用（手法2）、ドロワーコード編集（手法3）のいずれかを選択します。
- テーマを複製保存： Liquidファイルの変更や設定に着手する前に、必ずテーマのバックアップを取ります。
- スマホ表示で1列に整列： PC上の複数列が、モバイル画面で読みやすい1列のリストに収まっているか確認します。
- PC専用バナーの除外： スマホ画面を圧迫する大型画像や装飾バナーをモバイル表示から非表示にします。
- 親階層リンクの動作検証： 親カテゴリをタップした際にコレクションが開くか、「すべて見る」導線があるか確認します。
- 実機端末でテスト実施： 実際のスマートフォンで、タップの反応、スクロールの滑らかさ、24x24px以上の操作領域を検証します。
よくある質問（FAQ）
デスクトップとモバイルで1つのメニューを使えますか？
はい。Dawnなどの主要テーマでは、ヘッダーに割り当てられた同じメニューからモバイルドロワーが自動生成されます。そのため、1つのlinklistを更新するだけで両環境に反映させることができます。
Shopifyのメニューは何階層まで作れますか？
Shopifyの標準メニューでは、親項目の下に最大2段階の子項目をネストできるため、全体で合計3階層となります。Dawnのドロワーテンプレートも孫リンク（第3階層）まで処理するように設計されています。
モバイルメニューで2回タップが必要になるのはなぜですか？
標準的なモバイルドロワーは階層スライド式を採用しているため、親項目を開いてから目的のリンクを選ぶまでに2回のタップが必要となります。インライン展開への修正や中間階層の省略により、1タップでの到達が可能です。
メガメニューの列や画像はモバイルでも機能しますか？
デスクトップのような横並びの複数列はスマホ画面には収まらないため、縦1列にスタックして配置されます。また、プロモーション画像は縦スクロールを著しく長くするため、モバイルでは非表示に設定するのが一般的です。
テーマのコードを編集する必要はありますか？
いいえ。テーマがメガメニュー機能を標準搭載していれば、テーマエディタの設定のみで完結し、コード編集は不要です。コードの修正が必要になるのは、ドロワーの動作を根本的に変更したい場合や、別メニューを強制的に読み込ませる場合のみです。
情報源・参考文献
- Shopify Developer Documentation: Navigation and Search — linklistオブジェクトの仕様および最大3階層のネスト構造に関する公式文書。
- Shopify Dawn Repository: header.liquid — ドロップダウン、メガメニュー、ドロワーを切り替えるデスクトップメニュー設定のソースコード。
- Shopify Dawn Repository: header-drawer.liquid — 孫リンクまでループ処理を実行するモバイルドロワーの実装コード。
- Shopify Liquid API Reference: Link Object — ネスト階層数を表すlevels属性など、リンクオブジェクトの仕様。
- Nielsen Norman Group: Mega Menus Work Well Anywhere — タッチ操作時の誤タップ防止、論理的なグループ化、視覚的階層に関するUX調査。
- W3C Web Accessibility Initiative: Target Size Minimum (WCAG 2.2) — 24×24 CSSピクセル以上のタッチ操作領域を義務付けるアクセシビリティ基準。
- Shopify Community: Main menu nesting mobile vs desktop — Dawnのモバイルナビゲーションで2回タップが必要となる課題に関する議論。
- Shopify Community: Desktop Mega Menu and Mobile Hamburger Menu — ドロワーに別メニューを参照させるためのコード修正に関するフォーラムスレッド。
- Shopify Community: DAWN how to show nested menu/submenu on mobile — Dawnのスマホ表示で第2・第3階層を一度に展開表示したいという要望の議論。
- Shopify Community: How can I make my desktop menu identical on mobile — デスクトップメニューの構造をモバイルへそのまま反映させたいという質問。
- Helium Meteor Documentation: Welcome to Meteor — デスクトップとモバイルで異なるメニューテンプレートを採用する構造の解説。
- Clean Canvas Blog: Mega Menu Your Shopify Store — Symmetryテーマにおける単一階層モバイルメニューの推奨事項。
- Navi+ Documentation: Create a Desktop Mega Menu — カラムの自動スタック、埋め込み項目、表示設定に関する技術ドキュメント。
- Navi+ Documentation: Create a Mobile Menu — 3階層モバイルメニューの構造およびドロワーへの埋め込み手順。
- Navi+ Documentation: Item Visibility — Exclude when embeddedを活用したデバイス別表示制御の解説。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。