Shopifyナビゲーションメニューアプリでメニューを作成する方法（ステップ解説）
使いやすいストアナビゲーションの構築は、Shopify店舗の操作性を高める重要な基盤です。メニューアプリは既存のShopifyナビゲーションを破棄するものではありません。管理画面の「コンテンツ > メニュー」（Content > Menus）にある整ったリンク構造を土台として継承し、テーマ単体では実現が難しい視覚的レイアウト（複数列のメガメニューやモバイル専用画面）を追加した上で、テーマの「アプリの埋め込み」（App embeds）で有効化して初めて公開されます。
標準のドロップダウンリストでは商品が見つけにくい、カテゴリ画像入りのパネルを作りたい、あるいはスマートフォンで親指が届く下部固定タブバーを設置したいと考えているなら、本ガイドでコードを一行も触らずに導入する手順を順を追って解説します。
クイックアンサー：Shopifyナビゲーションメニューアプリでの作成方法
Shopifyナビゲーションメニューアプリでメニューを作成するには、「コンテンツ > メニュー」でリンクを整理し、アプリを導入してエディタでメニューを作成し、サブメニューやメガメニューを追加し、モバイル用レイアウトを設定した上で、テーマエディタの「App embeds」でアプリを有効化してPCとスマートフォンで検証します。
基本の5ステップは以下の通りです：
- 「コンテンツ > メニュー」でメニュー構造を整理する： アプリを導入する前に、管理画面でコレクション、商品、主要固定ページを確実に準備します。
- ナビゲーションアプリを導入し最初のメニューを作成する： Shopify App Storeからアプリを追加し、デスクトップ用メニューの枠組みやテンプレートを選択します。
- サブメニュー、メガメニュー、画像を追加する： リンクを論理的な列にグループ化し、視覚的な誘導を助けるコレクション画像を配置します。
- モバイル用メニューを構築し実機スマートフォンで確認する： スライド式ドロワーや下部固定タブバーを設定し、実機端末でタップのしやすさを確かめます。
- アプリの埋め込みで公開しトラブルシューティングを行う： テーマエディタのアプリ埋め込みスイッチをオンにして保存し、デスクトップとモバイルの双方で表示を確認します。
Shopify標準メニューで十分な場合（アプリが必要になるタイミング）
Shopifyでは、標準のメニューは管理画面のコンテンツ > メニューで一元管理され、テーマ設定によってストアフロント上のどこに表示されるかが決まります。
小規模な商品点数であれば、Shopify標準のナビゲーション機能だけで日常的な閲覧に対応できます。Shopifyヘルプセンターの公式ドキュメントによると、最上位のメニュー項目には最大2階層のネスト（入れ子）ドロップダウンを設定できます（最上位項目 → 第1階層 → 第2階層）。この合計3階層の上限は、シンプルなコレクション、基本的なポリシーページ、単純なカタログ構成であれば、追加のアプリなしで対応できます。
しかし、Baymard InstituteによるEコマースナビゲーションのユーザビリティ調査が指摘するように、顧客が商品を購入するためには、まず目的の商品を見つけられなければなりません。サブカテゴリが多数に増えると、文字だけのドロップダウンでは縦に長いリストをスクロールせざるを得なくなります。テーマによっては、標準メニューにカテゴリバナーや商品画像、複数列グリッドを組み込むには追加のカスタマイズが必要になる場合があります。
標準テーマに備わっている構造的な限界について詳しく把握したい場合は、Shopify theme menu limitationsの技術的解説記事をご確認ください。
| 要件 | Shopify標準メニュー | ナビゲーションメニューアプリ |
|---|---|---|
| コストと初期導入 | Shopifyストアに含まれており、追加アプリのインストールは不要。 | アプリのインストールとダッシュボードでの設定が必要。 |
| 階層の深さ | 最上位項目の下に最大2階層のネストに対応。 | 多層構造の階層ツリーや柔軟な列グループ化に対応。 |
| ビジュアル要素・画像 | 主にテキストリンク中心。追加のカスタマイズがない限りテーマの仕様に依存。 | コレクション画像、商品カード、アイコンの直接表示。 |
| 複数列レイアウト | テーマのヘッダー仕様に依存（単一列であることが多い）。 | 複数列メガメニュー。 |
| モバイル操作性 | テーマ備え付けのハンバーガーメニューに固定。 | 専用のスライドドロワーや下部固定タブバーを選択可能。 |
| テーマ変更時の挙動 | 標準のテーマヘッダーテンプレートに紐づいたまま。 | 新しく公開したテーマ側でアプリの埋め込みの再有効化が必要。 |
商品数がごくわずかで、購入者が1〜2回のクリックですべてのページに到達できる場合、標準メニューは単に十分であるだけでなく、最もシンプルな選択肢です。一方で、多様な商品群を案内するために視覚的な手がかりや人間工学に基づいた配置が必要な規模では、専用ナビゲーションアプリが実用的になります。
ステップ1：アプリ導入前にメニュー階層を設計する
分かりやすいメニューの第一歩は、整理されたShopifyカタログです。App Storeを開いたりアプリブロックを追加したりする前に、まずは構造を図式化しましょう。
第一に、すべてのリンク先ページが管理画面に存在しているかを確認します。必要なコレクションを漏れなく作成し、有効な商品が割り当てられているかを確かめ、基本情報ページ（会社概要、お問い合わせ、配送ポリシー、よくある質問）が公開されているかチェックします。まだ存在していないページにメニューをリンクさせることはできません。
次に、紙やスプレッドシート上でメニュー階層をスケッチし、論理的な階層が3段階以内に収まるように設計します。曖昧で凝ったマーケティング用語よりも、簡潔で分かりやすいラベルの方がひと目で把握しやすくなります。例えば、「冬のきらめき」のような抽象的な表現ではなく、「メンズアウター」といった明瞭なカテゴリ名を採用します。
その後、Shopify管理画面のコンテンツ > メニューでメインメニューのリンクリストを整備します。多くのナビゲーションアプリは既存のリンク構造を読み込んで活用できるため、URLを最初から入力し直す手間を省けます。取扱規模に最適なメニュー形式を検討する際は、choose the right menu typeの指針も参考にしてください。
Shopify公式によるドロップダウンメニューの解説動画：
管理画面側でコレクションとリンクの整理が完了したら、いよいよアプリ側の設定へと進みます。
ステップ2：アプリをインストールし最初のメニューを構築する
Shopify App Storeから利用したいナビゲーションアプリを選択し、インストールをクリックしてストアに追加します。ShopifyのTheme App Extensionsで作られたアプリは、テーマコードを手動で編集する必要がありません。選ぶアプリがこの方式かどうか確認しましょう。
アプリの管理画面が開いたら、最初に作成するメニューの形式を選定します：
- デスクトップメガメニュー（Desktop Mega Menu）： パソコン向けの大画面用ドロップダウンパネル。複数列のカテゴリリンクと特集画像を横並びで表示します。
- モバイルドロワーメニュー（Mobile Drawer Menu）： スマートフォンでハンバーガーアイコンをタップした際に画面端からなめらかに開くサイドパネル。
- ボトムタブバー（Bottom Tab Bar）： モバイル画面の最下部に常時固定され、主要なページへ親指で直接アクセスできるナビゲーションバー。
アプリの仕様に応じて、あらかじめ用意されたデザインテンプレートから始めるか、白紙からコンテナを作成します。既存のShopifyメニューとの連携に対応しているアプリであれば、現在のリンクツリーを一括で取り込むことができるため、親子関係を再度手作業で結び直す必要がありません。
ビジュアルエディタ上で主要な項目（「ショップ」「新着アイテム」「コレクション」など）を追加し、静的URLを手動で貼り付けるのではなく、アプリ内の検索ピッカーを使って適切なリンク先を関連付けます。画像を挿入する前にプレビュー画面を活用し、フォントサイズ、余白、行揃えを整えておきましょう。
ステップ3：サブメニュー、メガメニュー、画像、コレクションリンクを追加する
主要なナビゲーション項目が配置できたら、選択肢の多いカテゴリを複数列のメガメニューへと拡張します。Nielsen Norman Groupのメガメニューに関する記事が述べているように、メガメニューは多数の選択肢を収める上で優れたデザイン手法です。すべての選択肢を同時に表示し続けられるためです。
アプリ内で使いやすいメガメニューを組み立てる手順は次の通りです：
- 論理的なグループに分類する： サブカテゴリを明確な見出し（例：「トップス」「ボトムス」「アクセサリー」）の下に縦列として配置します。
- 列内の階層を浅く保つ： 各見出しの下にあるリンクは1階層に留め、顧客がひと目で全体をスキャンできるようにします。
- 視覚的な誘導を取り入れる： Nielsen Norman Groupの調査によると、メガメニュー内の画像はユーザーが目的の選択肢を正しく選ぶ手助けをします。リンクリストの横に代表的なコレクションサムネイルや注目商品のバナーを挿入しましょう。
- コレクションと商品をリンクする： URLを手入力するのではなく、アプリ内蔵の選択ツールでコレクションや商品を指定してください。入力ミスを減らせますが、コレクションやページの名称変更・削除を行ったときはリンクを再確認しましょう。
列の間隔、視覚的階層の整理、プロモーションカードのレイアウト設計については、mega menu best practicesの実践ガイドで詳しく解説しています。
メニューアプリはShopify標準のナビゲーションを置き換えるのか？
アプリを導入すると、Shopifyの元々のメニューが完全に上書き・消去されてしまうのではないかと心配するストアオーナーは少なくありません。
結論から言えば、元のメニューはShopify管理画面のコンテンツ > メニューに残り、これまでどおりそこでリンクを管理できます。アプリが担当するのは、自身のメニューをテーマのストアフロント上にどのように表示するかという点です。
アプリの仕様や選択した設定に応じて、主に以下の配置方式が存在します：
- 前後に挿入（Insert Before / Insert After）： CSSセレクタを使用して、テーマのヘッダーやアナウンスバーの直前または直後にアプリのメニューコンテナを挿入します。
- テーマメニューの置換（Replace Theme Menu）： テーマ標準のメニュー要素をCSSセレクタで特定し、その領域全体をアプリで作成したメニューに置き換えます。
- セクションやブロックとしての配置： テーマエディタ内の標準セクションやブロックとして直接メニューを追加できるアプリもあります。例えばNavi+では、この配置方式はメガメニュー（Mega Menu）およびグリッドメニュー（Grid Menu）に対応しています。
概念イラスト：ヘッダー下部へのメニュー挿入とCSSセレクタによるテーマメニュー置換の比較。
図1：概念イラスト — ヘッダー下部へのメニュー挿入とCSSセレクタによるテーマメニュー置換の対比。
アプリ内で既存のShopifyメニューを活用する
一部のアプリはShopify既存のメニューと連携し、現在の階層構造を初期データとして引き継ぐことができます。ただし、「コンテンツ > メニュー」側での変更がリアルタイムに反映される仕様なのか、アプリ側で手動の同期ボタン（Sync）を押す必要があるのかは、事前にアプリのマニュアルを確認しておきましょう。
テーマを変更した場合はどうなるか
ストアのテーマを変更または新しく公開した場合、アプリで作成したメニューが新しいテーマへ自動的に現れることはありません。テーマ拡張に関するShopify公式ドキュメントにある通り、テーマ変更時はアプリの埋め込みが初期状態で無効になるため、新しいテーマ上で手動で再有効化する必要があります。
さらに、テーマごとにヘッダーのHTML構造やCSSクラス名が異なるため、特定のCSSセレクタで置換していた場合は新しいテーマに合わせてセレクタの修正が必要になることがあります。日常的にアクセスの集まるストアでは、本番公開前に複製したテスト用テーマで挙動を検証するのが安全な手順です。
ステップ4：モバイルメニューを構築し実機スマートフォンで検証する
パソコン用のメガメニューを単に縮小表示しても、スマートフォンでは快適に閲覧できません。狭い画面に無理やり複数列のパネルを押し込むと、視覚的な圧迫感を生み、買い物の妨げになってしまいます。
Baymard Instituteのユーザビリティ調査では、一部のモバイル被験者がメインナビゲーションを開いたものの、選択肢に圧倒されて混乱し、すぐに閉じてしまいました。また、Shopifyのドロップダウンメニューに関する公式ドキュメントでも、モバイルでの使いやすさを改善するためにテーマ側のCSS調整が必要になる場合があると言及されています。
アプリでモバイル用メニューを構成する際は、レスポンシブ切り替えとあわせて次の2つの形式が中心となります：
- モバイルドロワーメニュー（Mobile Drawer Menu）： 画面端からスムーズにせり出すサイドメニュー。アコーディオン形式で下層を展開し、現在地を見失わずに探索できます。
- ボトムタブバー（Bottom Tab Bar）： 画面最下部に固定される水平バー。ホーム、検索、カテゴリ、カートなどの主要動線を親指の自然な可動域内に集約します。
- スマートレスポンシブ切り替え： 端末サイズに応じた自動変換を備えるアプリもあります。例えばNavi+では、画面幅が768px未満になると自動的にモバイルモードへと切り替わり、Smart responsive機能によりデスクトップ用メガメニューのライブ参照をモバイルドロワー内に組み込むことができます。
概念イラスト：モバイルドロワーメニューと下部固定タブバーの比較。
図2：概念イラスト — スライド式モバイルドロワーと画面下部固定タブバーの対比。
パソコンブラウザのエミュレータだけでなく、必ず手元のスマートフォン実機でプレビューを行ってください。実際に指で触れてみることで、タップ領域が十分に確保されているか、スクロール操作が軽快に動くかを直感的に評価できます。
モバイル画面の設計をさらに深めたい方は、mobile drawer menuの設計論、片手操作に適したbottom tab barの設定手順、そしてモバイル人間工学を包括的に解説したmobile navigation beyond the hamburger menuの記事もあわせてご確認ください。
ステップ5：ストアフロントで公開し一般的な問題を解決する
アプリのエディタでメニューを組み上げただけでは、実際の購入者にはまだ公開されていません。Theme App Extensionsで構築されたアプリは「アプリの埋め込み」を利用しており、テーマコードを手動で編集せずにテーマエディタからアプリをオンにできます。
Shopifyの開発者ガイドラインによれば、アプリ埋め込みブロックはインストール直後はデフォルトで無効化されています。マーチャントはテーマエディタ内のテーマ設定 > アプリの埋め込み（App embeds）を開き、手動で有効化して保存する必要があります。
Shopifyの技術ドキュメントの記述通り、アプリの埋め込みはテーマ上に重なって表示される要素であり、あらゆるテーマバージョンで利用できます。この仕組みにより、マーチャントがテーマコードを手動で書き換える必要はありません。
メニューを公開する手順：
- Shopify管理画面を開き、オンラインストア > テーマへ移動します。
- 公開中のテーマ（または検証用の複製テーマ）の横にあるカスタマイズをクリックします。
- 左側のサイドバーにあるアプリの埋め込みアイコンをクリックします。
- 利用しているメニューアプリのトグルを見つけ、オン（有効）に切り替えます。
- 右上の保存するをクリックします。
| よくある問題 | 考えられる原因 | 解決手順 |
|---|---|---|
| メニューがサイト上に表示されない | テーマエディタのアプリ埋め込みが無効になっている、または本番ではなく下書きテーマで保存している。 | 公開中のテーマエディタを開き、「アプリの埋め込み」でスイッチがオンになっていることを確認して保存します。 |
| 従来のメニューと新しいメニューが重複して表示される | アプリの配置が「Replace（置換）」ではなく「Insert（挿入）」になっているか、CSSセレクタの指定が誤っている。 | アプリの表示設定を「Replace」に変更するか、テーマのヘッダーナビゲーションを正確に指すようCSSセレクタを修正します。 |
| リンク切れ（404エラー）が発生する | リンク先のコレクションや固定ページがShopify管理画面で削除されたか、URLハンドルが変更された。 | アプリのエディタを再度開き、内蔵の検索ピッカーから該当のコレクションやページを再選択して保存します。 |
| モバイルでの表示崩れ | モバイル専用のドロワーやタブバーを設定しないまま、デスクトップ用メガメニューが表示されている。 | アプリ内でモバイル専用レイアウト（スライドドロワーや下部バー）を有効化し、レスポンシブの切り替え設定を確認します。 |
トレードオフ：メニューアプリが不要なケース
ナビゲーションアプリは優れた視覚的自由度をもたらしますが、すべてのShopifyストアにとって必須というわけではありません。外部アプリを導入する際には、以下の運用面での注意点も考慮すべきです：
- シンプルな品揃えなら複雑なメニューは不要： 取扱商品が少数で、コレクションも2〜3件程度なら、Shopify標準のドロップダウンメニュー（最大2階層ネスト）で素早くすっきりした導線を提供できます。
- テーマ切り替え時に確認作業が発生する： 公開テーマを変更するたびにアプリの埋め込みを再度有効化する必要があり、セレクタの微調整が求められることがあります。
- メガメニューを内蔵したテーマもある： 複数列のヘッダー設定を標準で備えたテーマもあります。標準機能で要件が満たせるなら、追加アプリを検討する前にまずそれを試しましょう。
カタログの規模拡大、視覚的な商品提案の必要性、あるいは標準テーマでは対応しきれないモバイル体験の向上が求められる段階になってから、アプリの導入を検討するのが堅実です。
チェックリスト：メニューアプリ導入前に確認すべき項目
導入するナビゲーションアプリを選定する際は、以下のチェックポイントを基準に評価してください：
- 標準メニューとの連携性： 「コンテンツ > メニュー」の既存リストを取り込めるか、リンク更新時の同期手順が明確か。
- 独立したモバイル対応： デスクトップ用メニューを縮小するだけでなく、ドロワーや下部タブバーといった人間工学的なモバイル専用機能が備わっているか。
- ノーコードでの安全な導入： Liquidファイルを直接編集することなく、「アプリの埋め込み」とテーマブロックだけで完結するか。
- テーマ変更時の移行手順： テーマを刷新する際の再設定や移行手順がシンプルでわかりやすいか。
- 複製テーマでの事前検証： 本番ストアの顧客体験に影響を与えることなく、非公開の複製テーマ上で自由にレイアウトを試作・検証できるか。
- 階層数の実用性： 視認性を損なうことなく、必要なカテゴリの深さ（実用上は最大3階層までを推奨）を綺麗にサポートできるか。
- 表示トラブル時のサポート体制： 独自仕様のテーマヘッダーを使用していてCSSセレクタの設定に迷った際、ドキュメントや問い合わせ窓口が用意されているか。
Navi+の役割と活用ポイント
上記のワークフローをご自身のストアで実践したい方に向けて、Navi+ Tab Bar & Mega MenuはShopify向けのドラッグ＆ドロップ式ビルダーを提供しています。
Navi+では、固定式ボトムタブバー、複数列デスクトップメガメニュー、モバイルドロワー、アイコンメニュー、フローティングアクションボタンをドラッグ＆ドロップで作成できます。既存のShopifyメニューと連携して現在の階層構造を読み込めます。
メニューを公開する際は、テーマの「アプリの埋め込み」設定で「Store Connector」を有効化するだけです。既存の要素の前後に挿入するか、CSSセレクタを用いてテーマ標準のヘッダーメニューを完全に置き換える（Replace）かを自由に選択できます。Mega MenuやGrid Menuについては、セクションやブロックとしての追加にも対応しています。
訪問者の体験を守るため、Navi+ではすでにアクセスのあるストアに、まず複製したテーマでメニューをテストすることを推奨しています。この手順を試したい場合、Navi+ Tab Bar & Mega Menuには無料プランがあります。メニューを作り、複製したテーマでテストし、納得できてから有効にしてください。
よくある質問（FAQ）
メニューアプリはShopify標準のナビゲーションを完全に置き換えますか？
アプリの設定や配置方式によって異なります。ヘッダーの上下に新しいメニューを挿入することも、CSSセレクタによってテーマのメニュー領域を丸ごと置き換えることも可能です。元のリンク構造自体は「コンテンツ > メニュー」内にそのまま残ります。
テーマを変更した場合、設定したメニューアプリはどうなりますか？
公開テーマを変更しても、アプリの埋め込み設定は自動的には引き継がれません。新しいテーマのエディタ画面でアプリの埋め込みを再度オンにし、メニュー置換用のCSSセレクタが新しいテーマのコードと合致しているか確認する必要があります。
Shopifyの標準ドロップダウンメニューは何階層まで作成できますか？
Shopifyの公式ドキュメントによると、標準ナビゲーションにおける最上位メニュー項目の下には最大2階層のネストドロップダウンを設定でき、全体として最大3階層の深さになります。
メニューアプリを使用するためにテーマのコードを編集する必要がありますか？
アプリがShopifyのtheme app extensionsで構築されていれば不要です。テーマコードを手動で編集することなく、テーマエディタからメニューを公開・設定できます。選ぶアプリがこの方式か確認してください。
単純なドロップダウンではなくメガメニューが必要になるのはどのような場合ですか？
同時に多くのカテゴリを一覧で見せたい大規模カタログを運営している場合や、コレクション画像などを交えて顧客が一目で目的の売り場を見つけられるようにしたい場合にメガメニューが適しています。
モバイル端末でメニューを快適に操作できるようにするにはどうすればよいですか？
スライド式ドロワーや下部固定タブバーといったスマートフォン専用のレイアウトを設計するか、自動レスポンシブ切り替えを備えたアプリを使用し、最終的な操作性を必ず実機のスマートフォンで確認してください。
調査出典および参考文献
- Shopify Help Center — Menus and links. help.shopify.com/en/manual/online-store/menus-and-links
- Shopify Help Center — Drop-down menus. help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
- Shopify Help Center — Apps and theme structure. help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps
- Shopify Developer Documentation — Theme app extension configuration. shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration
- Shopify Developer Documentation — Theme app extensions overview. shopify.dev/docs/apps/build/online-store/theme-app-extensions
- Nielsen Norman Group — Mega Menus Work Well for Site Navigation. nngroup.com/articles/mega-menus-work-well
- Baymard Institute — Homepage & Navigation UX Best Practices. baymard.com/blog/ecommerce-navigation-best-practice
- Navi+ Help Center — Publishing Mega Menu on Shopify. help.naviplus.io/docs/usage/mega-menu-desktop/publishing-on-shopify
- Navi+ Help Center — Mega Menu Desktop FAQ. help.naviplus.io/docs/usage/mega-menu-desktop/faq
- Shopify App Store — Navi+ Tab Bar & Mega Menu. apps.shopify.com/pronavi-navigation-design
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。