Shopifyのナビゲーションメニューに新しい項目を追加する方法（各種リンク・全メニュー・モバイル対応）

Shopifyでメニュー項目を追加する作業自体は1分程度で完了します。しかし真に重要なのは、適切なリンクタイプを選び、正しい階層に配置し、顧客が利用するあらゆる画面（PCヘッダー、スマホのドロワーメニュー、フッター、アプリで生成されたメニュー）で正常に機能しているか確認することです。

管理画面での追加自体は短時間で終わりますが、各端末で綺麗に表示されるよう適切な階層配置が必要です。

本ガイドでは、Shopifyメニューにあらゆるリンクタイプを追加し、適切に配置して全画面で表示を確認する手順を解説します。

Quick answer: add a new item to your navigation menu

Shopifyのナビゲーションメニューに新しい項目を追加するには、管理画面の「コンテンツ > メニュー」へ移動し、テーマが使用しているメニューを開いて「メニュー項目を追加」をクリックし、名称を入力して一覧からリンク先を選択したあと、追加してメニューを保存します。

Shopify管理画面で以下の6つの手順を実行します：

1. Shopify管理画面で、コンテンツ > メニュー（Content > Menus）を開きます（Shopifyヘルプセンター）。
2. 有効なテーマで使用されているメニュー（通常はメインメニュー / Main menu）をクリックします（Shopifyヘルプセンター）。
3. メニュー項目を追加（Add menu item）をクリックします（Shopifyヘルプセンター）。
4. 名前（Name）に、ストア上で表示させたいラベル名を入力します。
5. リンク（Link）で、URLを手入力せずドロップダウン一覧からリンク先を選択します（Shopifyヘルプセンター）。
6. 追加をクリックし、メニューを保存をクリックして変更を反映します（Shopifyヘルプセンター; Fudge.ai）。

古い資料では「オンラインストア > ナビゲーション」と書かれている場合がありますが、現在はコンテンツ > メニューが標準です。

Before you add the item: create the destination first

メニューへ追加する前に、リンク先となるページ、コレクション、商品、ブログ、ポリシーを必ず先に作成・公開してください。

宛先はShopifyの一覧から直接選択してください。メニュー項目のURL変更やURL直接リンクは接続を損ね404エラーの原因になります（Shopifyヘルプセンター）。

項目名（名前）は短く、お客様に馴染みのある表現にしましょう。「ランニングシューズ」などの明快な名前は迷いを防ぎます。

Pick the link type for your new item

リンク欄をクリックするとShopifyのリンクタイプ一覧が表示されます（Shopifyヘルプセンター）。適切なタイプを選ぶことで確実な遷移が保たれます。

Link to an external site or an email address

外部サイトへリンクする場合は、完全なURLをリンク欄に入力し、ドロップダウンに表示された候補を選択します（Shopifyヘルプセンター）。

メールリンクは mailto:[email protected] をリンク欄に入力します（Shopifyヘルプセンター）。

内部ページへのURL直接手入力はリンク切れや404エラーの原因になります（Shopifyヘルプセンター）。

Concept illustration: 新しいメニュー項目のリンクタイプを選び、ストアのメニューに表示される様子。

Decide where the item goes: top level, inside a dropdown or the footer

メニュー項目はShopify管理画面の一覧と同じ順序でストア上に表示されます（Shopifyヘルプセンター）。

Move the item and change its order

項目の並び順を変更する手順：

1. 項目名の左横にあるドラッグハンドルアイコン（⠿）をクリックしたまま長押しします（Shopifyヘルプセンター）。
2. そのまま上下にドラッグして、目的の位置まで移動させます。
3. マウスを離し、メニューを保存をクリックします。

Put the item inside a dropdown

ドロップダウン内へ配置するには、親項目の直下へドラッグし、右側へ少しスライドさせてインデントします。

Shopifyではトップ項目の下に最大2階層のドロップダウンを配置できます（Shopifyヘルプセンター）。親項目にページ遷移させない場合はリンク欄に # を入力します。

多くのテーマはドロップダウンの親項目をクリックリンクではなく展開ボタンとして扱います（Shopifyヘルプセンター）。規模拡大時は多階層メニュー構造の計画を早期に行いましょう。

Add the item to the footer menu

補助的な案内リンクは、ヘッダーを過密にせずフッターメニューへ配置するのが適しています。

コンテンツ > メニューでフッターメニューを選び、メニュー項目を追加でリンクを設定します。フッターは第1階層のみ表示可能です（Shopifyヘルプセンター）。

Shopifyはメニュー過密を防ぐため、メインメニューの第1階層項目を7個以下に抑えることを推奨しています（Shopifyヘルプセンター）。

One item, every surface: where your new item shows up

項目を保存しても全端末で同じ見た目になるとは限りません。表示場所は画面とテーマ設定に依存します。

Shopifyは全ページにメインメニューとフッターメニューを標準表示します（Shopifyヘルプセンター）。ただし位置はテーマにより異なります（Shopifyヘルプセンター）。

スマホでは多くのテーマがメインメニューをハンバーガーボタン内のドロワーに収めます。位置はテーマ依存です。

Nielsen Norman Groupの調査では、ハンバーガーメニューは万能でなく、ナビゲーションの隠蔽は利便性を損ねると指摘されています（[NN/g](https://www.nngroup.com/articles/find-navigation-mobile-even-hamburger/））。ハンバーガーボタンに頼らないモバイルナビゲーションや視覚的カテゴリーのアイコンメニューも有効です。

外部アプリは管理画面の設定を使わずアプリ内でメニューを生成します（Shopifyヘルプセンター）。アプリ利用時はアプリ内で項目を追加してください。

Concept illustration: 新しいメニュー項目がPCヘッダーやモバイルドロワーに表示される場所。

New item not showing? Five quick checks

管理画面で追加した項目がストアで見当たらない場合は、次の5点を確認してください：

1. メニューを保存しましたか？ 「メニューを保存」をクリックするまでストアに反映されません（Shopifyヘルプセンター; Fudge.ai）。
2. テーマ設定で正しいメニューを選んでいますか？ テーマエディタでヘッダー・フッターのメニュー設定を確認します（Shopifyヘルプセンター）。
3. 階層のインデントは完了していますか？ ドロップダウン項目が親項目の下へ正しくインデントされているか確認します（Shopifyヘルプセンター）。
4. 旧バージョンのテーマを使用していませんか？ 一部の旧テーマは3階層以上のドロップダウンに対応していません（Shopifyヘルプセンター）。
5. アプリ制御のメニューになっていませんか？ ナビゲーションアプリは管理画面の設定を読み込みません（Shopifyヘルプセンター）。

リンク先が404エラーになる場合は、URL手入力ではなく一覧からページを選択し直してください（Shopifyヘルプセンター）。

Trade-offs: when not to add another item

メニュー項目が増えるほど訪問者の選択負荷は高まります。無計画な追加はサイトの回遊性を低下させます。

Shopifyは過密を防ぐため第1階層を7個以下に抑えることを推奨しています（Shopifyヘルプセンター）。関連項目はドロップダウンにまとめましょう。

ただしドロップダウンにも注意点があります。多くのテーマは親項目をボタン化し（Shopifyヘルプセンター）、親コレクションページへの直接アクセスが制限されます。

スマホではナビゲーションの隠蔽が利便性を低下させるため（NN/g）、深い階層の項目は見落とされやすくなります。

ヘッダー以外に置けないか検討しましょう。案内リンクは第1階層のみ表示のフッター（Shopifyヘルプセンター）が向いています。属性はフィルターのほうが合う場合もあります。デフォルトテーマメニューの限界も参考にしてください。

Adding the same item to a Navi+ menu

Shopifyによると、ナビゲーションアプリは管理画面のメニュー設定を使わず、アプリ内でメニューを作成します（Shopifyヘルプセンター）。Navi+のTab Bar、Mobile Menu、Mega Menuもこの方式のため、コンテンツ > メニューで追加してもNavi+には反映されません。

Navi+での項目追加手順：

1. Shopify管理画面でNavi+を開き、更新するメニューを選択します。
2. + Add itemをクリックします。新しい項目は常にリストの末尾に追加されます（Navi+ Documentation）。
3. 項目を上方向へドラッグして並び順を調整します。
4. 右へドラッグすると、その上の項目の子階層になります（Navi+ Documentation）。
5. Saveをクリックします。保存するまでストアへは反映されません（Navi+ Documentation）。
6. Tab Barの場合は対象メニューを公開（publish）して反映させます（Navi+ Documentation）。

階層上限はプランでなくメニュー種別に依存し（Navi+ Documentation）、Tab Barは3階層に対応します（Navi+ Documentation）。詳細はメニューアプリでデスクトップ用ナビゲーションを作成する方法をご覧ください。

If you want the same new item to sit in a bottom tab bar or a mega menu on top of your theme menu, Navi+ Tab Bar & Mega Menu lets you add it in the app’s menu tree, drag it into place, save and publish.

Action checklist

項目を公開済みと判断する前に、次の8項目を確認してください：

• リンク先が存在する： 対象ページ、コレクション、商品、規約が管理画面で公開されている。
• 一覧から選択した： URL手入力でなくドロップダウン候補から直接選んでいる。
• 適切なリンクタイプ： リンク先リソースと合致するタイプを選んでいる。
• 適切な配置場所： 第1階層7個以下、インデントされたサブ項目、またはフッター。
• メニューを保存した： 「コンテンツ > メニュー」エディタで保存ボタンを押した。
• テーマ設定の合致： ヘッダー・フッターが編集したメニューを指定している。
• スマホ実機で確認： スマホでドロワーを開き、タップと表示を確認した。
• アプリ側も更新した： メニューアプリ利用時はアプリ管理画面内にも追加した。

FAQ

Shopifyのメニュー項目はどこから追加できますか？

Shopify管理画面のコンテンツ > メニューへ進み、稼働中のメニュー（通常はメインメニュー）を開いてメニュー項目を追加をクリックします（Shopifyヘルプセンター）。

メニュー項目を外部サイトやメールアドレスにリンクできますか？

可能です。外部サイトはURLを貼り付けてドロップダウンから選択し（Shopifyヘルプセンター）、メールは mailto:[email protected] を入力します。

メニューは何階層まで入れ子にできますか？

第1階層の下に最大2階層のドロップダウンを作成でき、合計3階層まで対応します（Shopifyヘルプセンター）。一部の旧テーマは3階層以上に対応していません（Shopifyヘルプセンター）。

追加した新しい項目がストアに表示されないのはなぜですか？

保存漏れ、テーマのメニュー指定違い、またはアプリ制御が主な原因です（Shopifyヘルプセンター; Fudge.ai）。親項目の下へ正しくインデントされているかもご確認ください（Shopifyヘルプセンター）。

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

できません。Shopifyのフッターメニューは第1階層の項目のみ表示可能で、ドロップダウン階層には非対応です（Shopifyヘルプセンター）。

新しい項目はモバイル画面にも自動で表示されますか？

スマホでも表示されますが、通常はテーマによりドロワー内に格納されます（Shopifyヘルプセンター）。アプリ制御の場合はアプリ内でも追加が必要です（Shopifyヘルプセンター）。

Sources

• Shopify Help Center: Add, remove, or edit menu items in your online store
• Shopify Help Center: Set up drop-down menus in your online store
• Shopify Help Center: Understanding navigation
• Nielsen Norman Group: Mobile Navigation: Hamburger or Not?
• Navi+ Documentation: Item Create & Manage
• Navi+ Documentation: Tab Bar & Bottom Navigation
• Navi+ Documentation: Multi-level Structure
• Fudge.ai: How to Add a New Menu Item in Shopify