Shopifyストアでメニューリンクを設定する方法（スマホ対応・手順解説）

Shopifyでのメニューリンク設定は、管理画面の「Content > Menus」から数クリックで完了します。しかし、テーマ側で正しいメニューが選択され、かつスマートフォン上でも快適に機能して初めてメニュー設定は「完了」と言えます。本ガイドではその両方を分かりやすく解説します。

ネットショップを立ち上げる際、商品、コレクション、案内ページをナビゲーションバーに接続することは最優先の作業です。分かりやすいナビゲーションは、買い物客がストア内で目的のページを見つけやすくします。現在のShopifyでは、リンク一覧の管理は管理画面で集約して行い、それらがパソコンやスマートフォン上でどのように表示されるかは有効なテーマが制御します。

クイックアンサー：Shopifyでメニューリンクを設定する方法

Shopifyでメニューリンクを設定するには、管理画面のContent > Menusにアクセスし、編集したいメニュー（通常はMain menu）を開いて「Add menu item」をクリックし、名前とリンク先を指定して「Save menu」をクリックします。ドロップダウンを作成するには、項目を別の項目の下へドラッグして入れ子にします。

リンクを追加する具体的な6つの手順は以下の通りです：

1. Shopify管理画面で Content > Menus に移動します。
2. 編集したいメニュー（通常は Main menu）をクリックします。
3. Add menu item をクリックします。
4. Name 欄に表示名を入力し、Link 欄でリンク先を選択またはURLを入力します。
5. Add をクリックします。
6. Save menu をクリックして変更を公開します。

大カテゴリの下にサブカテゴリを整理したい場合は、項目を別の項目の下にドラッグしてドロップダウンメニューを作成します。

Shopifyのメニューとリンクの基本（ヘッダー、フッター、テーマ）

Shopifyのナビゲーションを正しく理解するには、管理画面上の「メニューリスト」と、画面上に描画する「テーマの表示」を明確に区別する必要があります。メニューとは管理画面で作成されるリンクの一覧リストであり、リンクとは顧客を特定のコレクション、商品、固定ページ、外部サイトへと案内する1つひとつの項目です。

Shopifyストアには初期状態で、全ページに表示される2つの標準メニュー（main menuとfooter menu）が用意されています。メインメニュー（Main menu）はパソコン画面では通常ヘッダーに横並びで表示されるかサイドバーに配置されます。フッターメニュー（Footer menu）はサイト最下部に位置し、利用規約、返品ポリシー、問い合わせ情報などがまとめられます。

メニューがどこにどのような見た目で表示されるかは、テーマが決定します。テーマごとにデザインが異なるため、メニューの表示方法もテーマによって変わります。あるテーマではヘッダーに横一列のテキストとして展開されますが、別のテーマでは画面端からスライドするドロワー形式にまとめられる場合もあります。

テーマが表示を司っているため、ヘッダーおよびフッターのテーマ設定を確認し、選択されているメニューが現在編集しているメニューと一致しているかを確かめる必要があります。管理画面でリンクを保存したのにショップ上で変わらない場合、テーマに別のメニューが割り当てられていることがほとんどです。ストア設計全体の基礎については、こちらのShopifyメニューの総合ガイドも併せてご覧ください。

Content > Menusでメニューリンクをステップ順に追加する手順

Shopifyではナビゲーションリンクが専用画面に集約されています。古い解説記事では「オンラインストア > ナビゲーション」と記載されていることが多いですが、現在のShopifyでは Content > Menus に配置されています。

新しいメニューを作成する

初期のヘッダーやフッター用メニュー以外にも、フッターの2列目用やサイドバー用に別の独立したメニューを作成したい場合があります。

新しいリストを作成するには、Content > Menus に進み、メニューを新規作成するオプションをクリックします。「フッター規約リンク」や「お買い物ヘルプ」など分かりやすいタイトルを入力してください。作成後は項目を追加し、テーマエディタ側でそのメニューを選択して表示させます。

メニュー項目を追加する（Add menu item）

既存のメニューへのリンク追加はわずか数分で行えます：

1. Shopify管理画面の Content > Menus を開きます。
2. 編集するメニュー名（例：Main menu）をクリックします。
3. リスト下部までスクロールし、Add menu item をクリックします。
4. Name 欄に顧客に見せたい文字列を入力します。この名称がメニューに表示され、セールや新着を目立たせるために特殊文字や絵文字を含めることもできます。
5. Link 欄をクリックし、コレクション、商品、ページ、ブログ記事を選択するか、外部URLを貼り付けます。
6. Add をクリックしてリストに追加します。

メニューを保存して並び順を変更する（Save menu）

項目を追加したら、適切な表示順になっているか確認しましょう：

1. 移動させたいメニュー項目の横にあるハンドルアイコン（⠿）にカーソルを合わせます。
2. メニュー項目の横にあるハンドルアイコン（⠿）をクリックしたまま押し続け、上下の別の位置へドラッグします。
3. 目的の位置に到達したら指（マウスボタン）を離します。
4. Save menu をクリックします。

設定を確実に反映させるため、ページを離れる前に必ず Save menu をクリックしてください。

適切なリンク先の選び方：コレクション、商品、ページ、ブログ、外部URL

Shopifyのナビゲーションは非常に柔軟です。オンラインストアにメニューを追加して、商品、コレクション、ウェブページ、ブログ記事などへのリンクを整理して表示できます。目的に合った適切なリンク先を選択することで、顧客が無駄なクリックをせずに目的の商品へ辿り着けます。

リンクを設定する前に、該当するコレクション、固定ページ、ブログ記事をあらかじめShopify内で作成しておくことが大切です。リンク先のデータが存在しない場合、メニュー編集を一旦中断してページを作り直す必要があります。

ページには移動せずドロップダウンを開くだけのトップレベル項目が必要な場合は、Shopifyのドロップダウンメニューのガイダンスに沿って、#リンクを設定したトップレベルメニュー項目に「カテゴリから探す」などの説明的なラベルを使用してください。お使いのテーマで、ページを読み込まずにドロップダウンが開くことを確認しましょう。

項目を入れ子（ネスト）にしてドロップダウンメニューを作成する

商品数が増えてくると、メインヘッダーにすべてのコレクションを横並びにするレイアウトは視認性を著しく損ないます。親項目の下に子項目を入れ子（ネスト）にして、ドロップダウンメニューを作成しましょう。

コンセプトイラスト（Concept illustration）：フラットなメニュー一覧と入れ子のドロップダウンメニューの比較。

項目を入れ子にするには、まず親項目と子項目の両方をメニュー内に追加します。子項目の横にあるハンドルアイコン（⠿）をクリックしたまま親項目の真下に移動し、少し右側へスライドさせて（Drag to nest）行をインデント（字下げ）させます。インデントされたのを確認して離すと、その項目は親の Top-level item の下に収まる Nested item になります。

管理画面上では、すべての行が左端に揃った Flat menu list と、サブ項目が右に字下げされた Nested drop-down menu を視覚的に比較確認できます。

何階層まで入れ子にできるか？

Shopifyでは階層構造について明確な制限が設けられています。トップレベルの項目は、最大2階層の入れ子ドロップダウンメニューを持つことができます。これにより、合計で最大3層の構成が可能になります：

• トップレベル項目（Top-level item、例：「アパレル」）
  • 第1階層の子項目（Nested item 第1層、例：「ウィメンズ」）
    • 第2階層の孫項目（Nested item 第2層、例：「ワンピース」）

Shopify管理画面上では2段階の入れ子に対応していますが、実際のショップでの表示はテーマのデザインに左右されます。すべてのテーマで設計が異なるため、メニューの表示方法もテーマごとに変わる可能性があり、すべての階層を表示しないテーマもあります。お使いのテーマでメニューを実際に確認してください。多層ナビゲーションの設計については、こちらの多階層メニューの仕組みと設計も参考にしてください。

フッターでのドロップダウンメニュー

フッターにもドロップダウンを配置できるかという疑問がよく寄せられます。Shopify公式ドキュメントによると、標準的な構成においてフッターメニューはトップレベル項目のみを表示できます。

Shopify自身のドロップダウンメニューのヘルプページもフッターについては一貫していないため、フッターのドロップダウンは当てにしないでください。トップレベルのリンクだけを前提に設計し、テーマ設定を確認して、お使いのテーマがフッターのナビゲーションをどう扱うかストアで実際に試しましょう。

公式のShopifyビデオでも、ハンドルアイコンをドラッグしてドロップダウンを作成する手順が分かりやすく紹介されています：

ユーザーが見つけやすい項目の並び順と命名ルール

メニューの整理とは、顧客が探しているものを見つけやすくすることです。わかりやすいラベルと論理的な順序があれば、メニューは見渡しやすくなります。

Shopifyでは、視覚的な混雑を避けるため、トップレベルメニューの項目数を7つ以下に抑えることを推奨しています。トップレベルが短いほうが、顧客にとっても見渡しやすくなります。

ラベルの命名に関しては、確立されたユーザビリティ原則に従いましょう。Nielsen Norman Groupのメニュー設計ガイドでも指摘されている通り、メニューは造語や社内用語、抽象的な分類で奇をてらう場所ではありません。「セレクト」や「独自の世界観」といった抽象表現よりも、「ショップ」「メンズ」「ウィメンズ」「セール」「お問い合わせ」といった誰にでも通じる言葉を選びましょう。リンク先が想像できなければ、顧客はクリックしにくくなります。

最も売上が高いコレクションや重要なカテゴリをメニューの先頭に配置してください。また、スマートフォンの狭い画面でも途中で不自然に改行されないよう、表示名は短く端的に保ちましょう。

スマートフォンでの表示確認とよくあるトラブルの解決策

パソコン画面だけでナビゲーションを確認して終わらせるのでは不十分です。Shopifyでも、公開前にパソコンとモバイル端末の両方で正しく表示されることを確認するよう推奨しています。

ご自身の実機スマートフォンで実際のサイトを開いてみてください。ハンバーガーアイコンをタップし、入れ子になったフォルダを開き、親指でタップしやすいかモバイルメニューの操作性を確認します。

Nielsen Norman Groupの研究では、隠されたナビゲーションは表示されているナビゲーションに比べて見つけられにくいことが実証されています。スマホ画面では、テーマはリンク群をハンバーガーアイコン奥の Theme mobile drawer 内に格納します。タップするまで見えないため、顧客は能動的に探す必要があります。このドロワーが乱雑だったり、目的の商品に辿り着くのに4回もタップが必要だったりすると、離脱に直結します。また、タップ領域が狭すぎる場合など、モバイルの使い勝手を高めるために一部のテーマでCSSの微調整が必要になることもあります。

メニューが意図通りに動かない場合は、以下のトラブルシューティング表を参考にしてください：

なぜメニューの変更がストアに反映されないのか？

これはShopify初心者が最もよく直面する問題です。Content > Menusで熱心に5つのコレクションを追加し、Save menu をクリックしてサイトを再読み込みしたのに、古いメニューのまま変わらないという現象です。

これは、Shopifyがメニュー一覧とテーマの表示設定を切り離して管理しているために起こります。ストアにはメニューを複数持てますが、表示されるのはテーマエディタで選択されている1つだけです。テーマエディタを開き、Header セクションでどのメニューが使われているか確認してください。古いリストが選択されている場合は、更新したメニューに切り替えて保存します。

子リンクが表示されない、またはドロップダウンしない

項目を入れ子にしたはずなのに実際のサイトで展開しない場合は、インデントの深さを確認してください。Content > Menus 上で、子項目は親項目の行の下にしっかりと右へ一段字下げされている必要があります。左端が親項目と同じ位置にある場合、Shopifyはそれを独立したトップレベル項目として認識します。管理画面で正しく字下げされているのにドロップダウンしない場合は、テーマが1階層のみにしか対応していない可能性があります。

メニュー項目が突然消えてしまった

Shopifyはリンクの整合性を保ちます。リンクされているリソースを削除すると、対応するメニュー項目も削除されます。季節限定のコレクションや下書きページを管理画面から削除すると、それを指していたメニュー項目も一緒に削除されます。項目が消えた場合は、リンク先のコレクションやページが削除されていないか一覧で確認してください。

スマートフォンのドロワーメニューだけに頼ることで主要カテゴリの閲覧数が落ちていると感じる場合は、常時表示されるスマホ向けボトムタブバーの導入を検討し、主要リンクを常に指が届く位置へ配置することをおすすめします。

判断基準：Shopify標準メニューで十分なケース

すべてのShopifyマーチャントに追加のナビゲーションアプリや高度な独自コードが必要なわけではありません。多くのショップにとって、Shopify標準のメニュー機能で十分対応できます。

標準メニューが最適なケース：

• 取扱商品数が少数で、シンプルなコレクション構成のストア。
• メインヘッダーのトップレベル項目が7つ以下に収まっている。
• テーマに付属するモバイルドロワーが初期状態で美しく使いやすい。
• ドロップダウン内に宣伝バナーや商品画像、複数列のグリッドを必要としない。

標準メニューの利用には、追加のアプリは必要ありません。

しかし、カタログが拡大するにつれて制限も見えてきます：

• 階層の制限： トップレベルの項目は最大2階層の入れ子ドロップダウンまで、つまり合計3階層までです。
• テーマデザインへの依存： すべてのテーマで設計が異なるため、メニューの表示方法もテーマに左右され、余白やレイアウト、アニメーションはテーマ側の実装に縛られます。
• モバイルナビゲーションの隠蔽： 標準のスマートフォン表示では、すべてのリンクがハンバーガーメニューの奥に隠れます。隠されたナビゲーションは発見されにくいため、顧客はタップして探す手間を強いられます。

自社のストアがテーマ付属メニューの限界に達しているかどうかを判断するには、テーマメニューの限界と見極め方の解説も参考にしてください。

さらに充実させたい場合：Navi+のMobile Menu、Mega Menu、Tab Bar

商品数が増加したり、スマホ経由のアクセスがより素早いナビゲーションを求めている場合、シンプルなテキストだけのドロワーでは不十分になることがあります。そこで役立つのが、拡張ナビゲーションの導入です。

コンセプトイラスト（Concept illustration）：標準テーマのモバイルドロワーと、ボトムタブバー付きモバイルメニューの比較。

Navi+ Tab Bar & Mega Menu を利用すると、テーマのコードを一切触ることなく、固定ボトムタブバー、メガメニュー、画像付きモバイルドロワー、アイコンメニュー、フローティングボタンをドラッグ＆ドロップで自由に構築できます。

これまでの管理画面操作の良さを維持しながらスマホ体験を向上させたい方のために、Navi+は既存のShopifyメニューを再利用できます。Mobile Menu 機能では、既存のShopifyメニューを取り込み、「Sync now」ボタンを1回クリックするだけで最新データを反映できます。これにより、普段のリンク追加や並び替えはこれまで通りShopify管理画面の Content > Menus で行い、反映したい時にNavi+側で「Sync now」を押すだけでスマホ用ドロワーを最新状態に保てます。 同期は手動です。Navi+が自動で更新することはなく、Content > Menus のメニュー自体も変更しません。

Navi+のメニューも最大3階層の入れ子に対応しており、Shopify標準メニューと同じ深さです。そのため違いは階層の深さではなく、メニューの見せ方と置き場所（ドロワー、タブバー、メガパネル）にあります。ストアに最適なメニュー形式を見つけるには、ショップに最適なメニュータイプの選び方をご参照ください。

スマホでの買い回りを劇的に高める Tab Bar、パソコンの大画面を活かす Mega Menu、洗練された Mobile Menu ドロワーなど、選択肢は多彩です。現在のテーマ付属メニューで十分であればそのまま使い続け、もしコード編集なしでよりリッチなスマホドロワーや画面下部の固定タブバーを試してみたい場合は、ShopifyアプリストアからNavi+ Tab Bar & Mega Menuを試してみてはいかがでしょうか。

公開前の最終確認チェックリスト

ストアを公開したり広告を配信する前に、以下の項目を最終チェックしましょう：

• リンク先が正しく開くか確認： すべてのメニューリンクをクリックし、公開中のコレクション、商品、ページに繋がっているか確かめる。
• 7項目以内を維持： ヘッダーが混雑しないよう、トップレベル項目を7つ以下に抑えているか確認する。
• 親しみやすい言葉を使用： 顧客が瞬時に理解できる、一般的で平易な単語をラベルに用いる。
• テーマの割り当てを確認： ヘッダーおよびフッターのテーマ設定を確認し、選択されているメニューがContent > Menusで編集したものと完全に一致しているかチェックする。
• スマートフォンの実機で操作テスト： 実際のスマートフォンでストアを開き、パソコンとモバイルの両方で崩れなく表示されているか指で操作して確かめる。
• URLリダイレクトを設定： 既存ページのURLを変更した場合は、URLリダイレクトを設定してトラフィックを転送し、404エラーによる離脱を防止する。
• 管理画面で変更を保存： ブラウザのタブを閉じる前に、Content > Menusで Save menu をクリックしたことを再確認する。

FAQ

Shopifyの管理画面でメニューはどこにありますか？

Shopify管理画面の「Content > Menus」から、リンクとメニューの追加、削除、変更、確認が行えます。古いマニュアルには「オンラインストア > ナビゲーション」と書かれている場合がありますが、現在の仕様ではContentの下にあります。

Shopifyのドロップダウンは何階層まで作成できますか？

トップレベルの項目は、最大2階層の入れ子ドロップダウンメニューを持つことができます。これにより合計で最大3層まで作ることができますが、実際の見え方はご利用のテーマのデザインに依存します。

メニューを変更したのにストアに反映されないのはなぜですか？

テーマのヘッダーまたはフッター設定に別のメニューリストが割り当てられている可能性があります。ヘッダーとフッターのテーマ設定を確認し、選択されているメニューが編集中のものと一致しているか確認してください。

メニューのトップレベル項目は何個くらいにすべきですか？

Shopifyでは、ナビゲーションの過密を防ぎ、どの画面サイズでも見やすく保つために、トップレベル項目を7つ以下に抑えることを推奨しています。

フッターにドロップダウンメニューを追加できますか？

Shopify公式の案内では、標準的な構成においてフッターメニューはトップレベル項目のみを表示できるとされています。フッターリンクの挙動については、ご利用のテーマ設定をご確認ください。

メニュー項目が突然消えてしまったのはなぜですか？

リンク先のリソースを削除すると、対応するメニュー項目も自動的に削除されます。管理画面で商品、固定ページ、コレクションを削除すると、その項目を指していたメニューリンクも一緒に消去されます。

情報ソース

• Shopify Help Center: Menus and links — ShopifyのContent > Menusにおけるメニューおよびリンクの管理。
• Shopify Help Center: Editing menus — メニュー項目の追加、ハンドルによる並べ替え、絵文字の使用方法。
• Shopify Help Center: Understanding navigation — 標準メニューとテーマ設定でのメニュー割り当て。
• Shopify Help Center: Drop-down menus — 入れ子の階層制限、フッターの挙動、自動削除ルール、スマホ実機確認。
• Shopify Help Center: URL redirects — ページURL変更時におけるURLリダイレクトの作成方法。
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation — モバイル端末における隠しメニューの発見性に関するユーザビリティ調査。
• Nielsen Norman Group: Menu Design — 専門用語を避け、直感的なカテゴリラベルを設計するためのガイドライン。
• Shopify App Store: Navi+ Tab Bar & Mega Menu — ボトムタブバー、メガメニュー、モバイルドロワーを作成できるナビゲーションアプリ。
• Navi+ Blog: Shopify Menu Guide — ナビゲーションの基本構造とMobile Menuの同期機能に関するドキュメント。