ShopifyでPC用とスマホ用のメニューを別々に作成する方法（ステップ解説）
Shopifyでオンラインストアを構築する際、PC（デスクトップ）向けのヘッダーには幅広いコレクション、ブランド一覧、多階層のドロップダウンなど、カタログ全体を見渡せるナビゲーションを用意するのが一般的です。しかし、同じメニューをスマートフォンで開くと、縦に長すぎるドロワーメニューとなり、顧客に過度なスクロールを強いる原因になります。
多くのマーチャントは、管理画面で「PC用」と「スマホ用」のメニューを別々に割り当てる設定を探します。しかし、多くのテーマにはそのような切り替え機能が備わっていません。Shopifyでは「コンテンツ > メニュー」で複数のメニューを作成できますが、それをどこにどう表示するかはテーマが決定しており、ほとんどのテーマはPCとモバイルで同一のメニューを読み込んでいます。
画面サイズごとにナビゲーションを分けるには、1つのメニューを徹底して整理するか、テーマのドロワーコードを編集するか、専用のメニューアプリを導入するかの3つの選択肢があります。本記事では、その仕組みと具体的な実装手順を分かりやすく解説します。
クイックアンサー：Shopifyはスマホで別のメニューを表示できますか？
ほとんどのテーマでは標準ではできません。メニューは「コンテンツ > メニュー」で作成しますが、表示場所を決めるのはテーマであり、Dawnのようなテーマはデスクトップのヘッダーとモバイルのドロワーに同じメニューを渡します。分けるには、ドロワーのコードを編集するか、メニューアプリを使います。
主なアプローチは以下の3点です：
- 方法1：1つのメニューを維持し、テーマのドロワーに任せる。 コンテンツ > メニューで無駄のない単一メニューを作成し、コード不要で運用します。
- 方法2：テーマコードを編集してスマホ用メニューを割り当てる。 テーマをバックアップ用に複製し、
snippets/header-drawer.liquid（Dawnの場合）を編集してスマホ用メニューのハンドルを指定します。 - 方法3：ナビゲーションアプリを活用する。 PC向けにはメガメニュー、スマホ向けにはドロワーや下部タブバーを作成し、デバイス別の表示切り替えを設定します。
運用の手間や技術的な難易度の比較については、後述の「トレードオフ」セクションの表をご確認ください。
ShopifyメニューがPCとスマホで連動する仕組み
Concept illustration: 1つのShopifyメインメニューがPCヘッダーとスマホ用ドロワーの両方にデータを供給する仕組み。
Shopifyにおいて、メニューデータは管理画面のコンテンツ > メニューで一元管理されています。ただし、Shopifyヘルプセンターのドロップダウンメニュー解説にある通り、メニューがストアフロントのどこに表示されるかはテーマの仕様に依存します。
代表的な標準テーマであるDawnの場合、ヘッダーセクション（Header）にはlink_listタイプの設定項目が1つだけ存在し、初期値としてmain-menuが指定されています。PC画面ではこれが横並びのナビゲーションバーとして展開され、子階層はHeader dropdownとして表示されます。
モバイル画面では、ハンバーガーボタンがMobile drawerを開きます。Dawnのソースコードでは、このドロワーを描画するファイルはsnippets/header-drawer.liquidです。該当箇所のLiquidループ文は以下のようになっています：
{%- for link in section.settings.menu.links -%}
ドロワー側でもPCと同じsection.settings.menu.linksを参照しているため、管理画面でMain menuを編集すると、PCとスマホの両方の表示が連動して変わるのです。
一部のテーマでは、テーマエディタのヘッダー設定内にモバイル専用メニューの選択ボックスが用意されている場合もあります。コード編集やアプリ追加の前に、まずはテーマエディタのヘッダー設定を確認してください。
ステップ1：コンテンツ > メニューでPC用とスマホ用メニューを作成する
コード編集を行う場合でもアプリを利用する場合でも、最初のステップは管理画面で2種類のメニューを作成することです。
メニューの作成は必ずコンテンツ > メニューで行います。
PC用メニュー（ドロップダウン付きメインメニュー）の作成
- Shopify管理画面でコンテンツ > メニューを開きます。
- 既存のメインメニュー（Main menu）をクリックするか、メニューを追加を選択します。
- メニュー項目を追加をクリックし、主要なカテゴリやページを登録します。
- 子階層にしたい項目を親項目のすぐ下にドラッグし、右側に少しスライドさせてネストします。公式ドキュメントの制限事項の通り、最上位の項目には最大2階層のドロップダウンメニューをネストできます（全体で最大3階層）。
スマホ用（短縮版）メニューの作成
- コンテンツ > メニューに戻り、再度メニューを追加をクリックします。
Mobile menuなど、判別しやすい名前を付けます。- メニューのハンドル（例：
mobile-menu）を確認し、メモしておきます。方法2ではこの文字列を直接使用します。 - 人気コレクション、商品検索、注文追跡、お問い合わせなど、モバイル顧客が素早くアクセスしたいリンクに厳選します。
- メニューを保存をクリックします。
[!NOTE] コンテンツ > メニューでSeparate mobile menuを作成しただけでは、ストア上に表示されません。テーマの設定、Liquidコード、またはMenu appから呼び出すことで初めて機能します。
方法1：1つのメニューを維持し、テーマのドロワーに任せる
商品数が限られているストアでは、無理に2つのメニューに分けず、整理された1つのMain menuを作成してテーマ標準のMobile drawerに任せるのが、無理なく運用できる方法です。
上位カテゴリを絞り込み、過度な多層階層を避けて設計します。スマホではテーマが自動的に縦型のスライドドロワーへ格納してくれます。
- メリット： コードの変更が一切不要で、アプリ費用もかからず、保守が非常に容易です。管理画面で1箇所更新すれば両端末に反映されます。
- デメリット： PCとスマホで完全に同じ項目が表示されます。PC向けに何十ものリンクを並べたメガメニューを作成すると、スマホのドロワーが長大化してしまいます。
テーマエディタでドロワー表示の微調整が可能か確認してください。ドロワー設計のコツについては、mobile drawer menu best practicesの記事でも詳しく解説しています。
方法2：テーマコードを編集してスマホ専用メニューを割り当てる
アプリを追加せず、完全に独立したスマホ用メニューを表示したい場合は、テーマのLiquidファイルを編集してドロワーの読み込み先を変更できます。
必ずテーマを複製してバックアップを取る
Shopify公式のテーマ管理ガイドで推奨されている通り、問題発生時にすぐに元の状態へ戻せるよう、事前にバックアップコピーを作成してください。
- 管理画面のオンラインストア > テーマを開きます。
- 公開中のテーマの横にある三点リーダー（
...）をクリックし、複製を選択します。 - 生成された未公開の複製テーマに対してのみコード編集を行います。
ドロワーの参照先をスマホ用メニューに変更する
- 複製テーマの三点リーダー（
...）からコードを編集を開きます。 - テーマDawnの場合、
snippets/header-drawer.liquidを開きます。 - ヘッダー設定のメニューを繰り返している次の記述を探します：
{%- for link in section.settings.menu.links -%}
- Shopify Liquidリファレンスのlinklistsオブジェクトに従い、指定のハンドルから直接メニューを取得する以下のコードに書き換えます：
{%- for link in linklists['mobile-menu'].links -%}
（'mobile-menu'の部分は、ステップ1で控えたスマホ用メニューのハンドルに置き換えてください。）
この方法は、ShopifyコミュニティのRideテーマ向けスレッドでも紹介された確実な手法です。
[!WARNING] 上記のファイル名はDawnの例です。他のテーマでは別のファイルが使われるため、
section.settings.menuを読み込む同様のループを探してください。編集するのは最も外側のループのみとし、内側のループは変更しないでください。テーマの更新後は、手動で加えたLiquidコードの再適用が必要になる場合があります。
編集後は、複製テーマのプレビュー機能でPCとスマホの両方の動作を十分に確認してから公開してください。
方法3：メニューアプリを使ってPCとスマホのメニューを分ける
Liquidコードのメンテナンスを避け、直感的な操作で洗練されたメニューを作りたい場合は、専用のMenu appを導入するのが最適です。
メニューアプリを使用すれば、PC用には多列構成のメガメニュー、スマートフォン用には滑らかなスライド式ドロワーや画面下部に固定されるタブバーなど、画面サイズに最適化した異なるUIを構築できます。
アプリ選定時は以下の基準を重視してください：
- デバイス別の表示切り替え： モバイル専用、PC専用、または両方表示を個別に設定できること。
- アプリ内プレビュー機能： 公開前に実機サイズでの動作を画面上で確認できること。
- インストール方法： アプリがTheme App Embed経由で組み込まれるのか、テーマファイルの編集を求められるのかを確認してください。
- 既存ヘッダーとの親和性： テーマのデザインを崩さずに統合できること。
自社ストアに最適なメニュー形式を検討する際は、choose the right menu type for each screenのガイドも参考にしてください。
モバイルメニューの設計ルール
Concept illustration: 過度に深い階層構造のドロワーと、大きなタップ領域を備えた短縮モバイルメニューの比較。
スマホ向けメニューを設計する際は、以下のUX原則を意識してください：
- Fewer items（項目数を絞る）： スマホの画面縦幅は限られています。売れ筋コレクション、新作、検索、サポート窓口など必須項目を最優先し、会社概要や採用情報などの副次リンクはフッターへ移動します。
- Larger tap targets（タップ領域を広く確保する）： 指先による操作はマウスほど正確ではありません。WCAG 2.2 達成基準2.5.8（ターゲットのサイズ・最小値）では、ポインター入力のターゲットサイズを少なくとも24×24 CSSピクセル以上にするよう求めています（一部例外あり）。十分な余白を設けることで誤タップを防ぎます。
- Shallow nesting（階層を浅くする）： 深くネストしたアコーディオンは、小さな画面では操作しづらくなります。Shallow nestingを徹底し、フラットな一覧か最大でも1階層の展開にとどめましょう。
- ハンバーガーアイコン以外の併用： Nielsen Norman Groupの調査によると、ハンバーガーアイコンはすべてのユーザーに直感的に認識されるわけではありません。ドロワーだけでなく、画面下部のタブバーなど常時視認できるナビゲーションを併用すると回遊性が大幅に向上します。
ハイブリッド型ナビゲーションの詳細は、mobile navigation beyond the hamburger menuの記事で解説しています。
公開前の実機テスト手順
Shopifyヘルプセンターの推奨に従い、ドロップダウンが意図通りに展開するか、必ず実際のスマートフォン実機でテストしてください。
以下のチェックリストを実施します：
- テーマエディタでの確認： PC表示とモバイル表示を切り替え、基本的なレイアウトの破綻がないか確認します。
- スマートフォンの実機確認： プレビューリンクを自身のスマートフォン（SafariおよびChrome）で開きます。
- ドロワーの動作確認： メニューの開閉が引っかかりなく滑らかに動作するかチェックします。
- 子メニューの展開確認： すべてのアコーディオンをタップし、テキストの重なりや折り返し崩れがないか確認します。
- リンク先の遷移テスト： 全てのリンクをタップし、404エラーや空のコレクションに繋がっていないか点検します。
- 横向き（ランドスケープ）テスト： スマホを横向きにして、メニューが画面外に見切れたり閉じるボタンが隠れたりしないか確認します。
- 複数テンプレートでの確認： トップページだけでなく、コレクションページや商品詳細ページからも正しくメニューが開けるか検証します。
よくあるトラブルと解決策
- スマホで古いメニューが表示され続ける： 未公開の複製テーマで編集したまま、本番テーマを閲覧している可能性があります。また、
linklists['mobile-menu'].links内のハンドルが管理画面と完全一致しているか再確認してください。 - 新しく作ったメニューがどこにも表示されない： メニューを作成しただけでは画面に反映されません。ヘッダー設定で割り当てるか、Liquidコードで呼び出すか、アプリ上で指定する必要があります。
- 親項目を削除したら子項目もすべて消えた： Shopifyのメニュー編集仕様により、ドロップダウンの下にネストされた項目は親項目と一緒に削除されます。親項目を消す前に、子項目を別の場所へドラッグしてください。
- スマホでドロップダウンが開かない： 階層の深さを確認してください。Shopifyでは最上位の項目の下に最大2階層までネストできます。モバイルメニューはこの範囲に収め、テーマのドロワーで動作を確認しましょう。
- コード編集後にドロワーの子メニューが消えた： 編集したのは外側の
for link in section.settings.menu.linksループだけか確認してください。内側の子ループ（for childlink in link.links）を書き換えてしまうと子階層が表示されなくなります。
トレードオフ：メニューを分けるべきではない場合
| 評価基準 | 方法1：単一メニュー（標準） | 方法2：ドロワーコード編集 | 方法3：メニューアプリ導入 |
|---|---|---|---|
| 初期設定の手間 | 最小限（1つのメニューのみ） | 中程度（Liquidコードの編集） | 軽度〜中程度（視覚的設定） |
| コード知識の必要性 | 不要 | Liquidの基本知識が必要 | 不要 |
| テーマ更新時のリスク | 低い（テーマコードを変更しない） | 高め（カスタムLiquidの再適用が必要になる場合あり） | アプリによる（導入方法を確認） |
| デバイス別の出し分け | 不可（両端末で共通表示） | 可能（ドロワーをハンドル指定） | 可能（端末ごとに個別設定） |
| 最適なストア規模 | 商品数が少ない小規模ストア | アプリを増やしたくない技術者 | メガメニュー等を求める本格店舗 |
メニューを分けるべきではないケース
すべてのストアでメニューを分離する必要はありません：
- カタログが小規模な場合： 商品数が少なくシンプルなカタログであれば、すっきり整理された1つのメニューのほうが管理しやすくなります。
- 継続的な更新体制がない場合： 2つのメニューを運用すると、商品やコレクションを追加するたびに「コンテンツ > メニュー」で両方を修正する必要があります。更新漏れはモバイル利用者の離脱を招きます。
- コード保守ができない環境での頻繁なテーマ更新： 方法2を採用した場合、テーマの更新後に手動でコードを再適用する必要が生じることがあります。
1つの洗練されたメニューで両画面の要件を満たせるなら、単一メニュー運用が最も保守コストを抑えられます。
Navi+が役立つ理由
テーマのコードを編集したくない場合、Navi+ならPC向けメガメニューとスマホ向けの別メニューまたはタブバーを作成し、それぞれを表示するデバイスを選べます。無料プランで試すことができ、テーマには手を加えません。
Navi+を活用すれば、ドラッグ＆ドロップの直感的なエディタを使って、固定下部タブバー、多列デスクトップメガメニュー、モバイルドロワー、フローティングボタンをコード不要で構築できます。
各メニューのPublishタブには、独立したデバイス表示切り替え機能が備わっています：
- Mobileスイッチ： スマートフォン画面での表示を制御します。
- Desktopスイッチ： PC画面での表示を制御します。
モバイルメニュー作成時の初期設定では「Mobile」のみが有効になっています。そのため、スマホ向けにはドロワーを設定し、PC向けには「Desktop」のみを有効にしたメガメニューを割り当てることで、1つのストア上に完全に独立した2つのナビゲーションを展開できます（最大3階層まで対応）。
さらに、現代のモバイル顧客に向けた操作性向上のため、スライド式ドロワーと常時表示されるbottom tab bar for Shopifyを組み合わせることもできます。
実践チェックリスト
- カタログの棚卸し： メニューを分離する必要があるか、整理された1つのメニューで十分かを判断する。
- PC用メニューの作成： コンテンツ > メニューでメインメニューを構築し、カテゴリとドロップダウンを整える。
- スマホ用メニューの作成： コンテンツ > メニューで項目を絞ったメニューを追加し、ハンドル名をメモする。
- テーマ設定の確認： テーマエディタのヘッダー設定にモバイル専用メニュー機能がないか確認する。
- 実装方法の決定： 方法1（単一運用）、方法2（コード編集）、方法3（アプリ）から選択する。
- コード編集前の複製： 方法2を選択する場合、テーマを複製してバックアップ上で
snippets/header-drawer.liquidを編集する。 - デバイス表示の設定： アプリを使う場合、メガメニューをPC専用、ドロワーをスマホ専用に切り替える。
- 実機テストの実施： スマートフォン実機でドロワー開閉、ネスト展開、タップ余白、横向き表示を検証する。
- 定期的な同期体制： 新しいコレクションを作成した際は、両方のメニューリストを更新する手順を習慣づける。
よくある質問（FAQ）
スマホとPCで異なるメニューを表示できますか？
はい、可能です。ただし多くのテーマは標準で同じメニューを表示するため、ドロワーのコードを編集するかメニューアプリを利用する必要があります。
スマホメニューがPCメニューと同じリンクを表示するのはなぜですか？
Dawnなどのテーマでは、モバイルドロワーがヘッダー設定で指定されたメニュー（section.settings.menu.links）をそのまま読み込んでいるためです。
2つのメニューを使うにはテーマのコードを編集する必要がありますか？
必須ではありません。メニューアプリを使えばコードを触らずにデバイス別メニューを配置できます。コードを編集する場合は必ず事前にテーマを複製してください。
Shopifyでメニューはどこで作成しますか？
Shopify管理画面のコンテンツ > メニューから作成・管理します。
Shopifyのドロップダウンメニューは何階層まで作れますか？
最上位項目の下に最大2階層のドロップダウンをネストできるため、全体で最大3階層まで作成可能です。
親メニュー項目を削除するとどうなりますか？
親項目を削除すると、その下にネストされている子項目もすべて一緒に削除されます。削除前に子項目を別の場所へドラッグしてください。
出典・参考資料
- Shopify Help Center: Editing Menus — コンテンツ > メニューにおけるナビゲーション管理およびネスト項目の削除規則。
- Shopify Help Center: Drop-down Menus — 2階層ネスト制限、テーマごとの表示場所、モバイルテストの重要性。
- Shopify Help Center: Duplicating Themes — コード編集前にテーマをバックアップとして複製する公式ベストプラクティス。
- Shopify Developer Documentation: Liquid linklists Object — ハンドル名を用いて特定のメニューを呼び出すLiquid API仕様。
- Shopify Dawn Repository: sections/header.liquid — ヘッダー内のlink_list設定を示すDawnテーマのオープンソースコード。
- Shopify Dawn Repository: snippets/header-drawer.liquid — section.settings.menu.linksを参照するDawnのドロワー構造。
- Shopify Community: Customizing Main Menu and Sidebar Menu for Desktop and Mobile — Rideテーマにおけるheader-drawer.liquidのカスタマイズ事例。
- Shopify Community: Use Different Menu for Mobile and Desktop — デスクトップとスマホでメニューを分けたいという要望に関するコミュニティスレッド。
- Fudge: How to Change Mobile Menu Behavior in Shopify — 標準メニューの動作特性とモバイル表示のカスタマイズ解説。
- W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — タッチターゲットに少なくとも24×24 CSSピクセルを求める達成基準2.5.8。
- Nielsen Norman Group: Mobile Navigation Beyond the Hamburger — ハンバーガーアイコンの発見性と可視ナビゲーションに関するユーザビリティ調査。
- Navi+ Help Center: Display Rules Settings — モバイルおよびデスクトップ表示ルールの設定手順書。
- Shopify App Store: Navi+ Navigation & Menu Bar — メガメニュー、ドロワー、ボトムタブバーを構築するアプリ詳細。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。