Shopifyメニューアプリでデスクトップ用ナビゲーションメニューを作成する方法（ステップバイステップ）

メニューアプリで構築するデスクトップナビゲーションメニューの完成度は、事前の設計に左右されます。最大3階層のツリーをスケッチし、単なるリストではなく列でレイアウトを組み、意図を持ってホバーまたはクリックを選択し、ヘッダー下の適切な位置に公開することで、カタログの閲覧性は劇的に向上します。

商品数が増加しているストア運営者にとって、秩序ある水平メニューは直感的な案内役となります。購入者が商品を探し回ったり、過密なリストに悩まされたりしてはいけません。ヘッダー下に整然とした列を展開することで、デスクトップでコレクションへの直接的な視覚アクセスを提供できます。

クイックアンサー：Shopifyメニューアプリでデスクトップ用ナビゲーションメニューを作成する方法

Shopifyメニューアプリでデスクトップナビゲーションメニューを作成するには、まず最大3階層のツリーを設計し、テーマ設定でアプリ埋め込みを有効化し、第1階層の項目とドロップダウン列を構築し、ホバーまたはクリックを選択して、ヘッダーの下または差し替えで公開した上で各画面幅をテストします。

1. メニューツリーを設計する：アプリ設定前に紙の上で最大3階層を整理します。
2. アプリ埋め込みを有効化する：テーマエディタでStore Connector埋め込みをオンにします。
3. 第1階層の項目を追加する：Desktop Mega Menuを作成し、主要な水平リンクを配置します。
4. ドロップダウン列を構築する：マルチカラムを有効化し、列幅のバランスを整えます。
5. ヘッダー下に公開してテストする：Insert AfterまたはReplaceを選び、デスクトップ表示を確認します。

本ガイドの続きでは、Navi+を使用した各手順と、よく発生する問題への対処法を詳しく解説します。

メニューアプリがShopifyのデスクトップメニューにもたらす拡張性

Shopifyには標準で安定したナビゲーション機能が備わっていますが、レイアウトの自由度は使用テーマに依存します。Shopifyヘルプセンターによると、最上位のメニュー項目には最大2階層のネストされたドロップダウンメニューを保持できます。また、メインメニューやドロップダウンの表示位置はテーマによって異なります。

一部のShopifyテーマには独自のメガメニュー機能が組み込まれています。テーマ標準機能で十分な複数列レイアウトが実現できる場合は、そのまま利用するのが最も無駄のない選択です。以下のウォークスルー動画で、テーマベースの設定方法を確認できます：

If your theme already has a mega menu, this walkthrough shows the theme-only route.

しかし、商品数やカテゴリが拡大するにつれて、標準メニューではレイアウトの窮屈さを感じるようになります。専用のメニューアプリを導入することで、以下のような実用的な機能が追加されます：

• 柔軟な12分割グリッドによる各列の個別幅設定。
• ドロップダウンパネル内に直接配置できるおすすめコレクション画像タイル。
• ホバーとクリックの展開トリガーに関する意図的な切り替え制御。
• ヘッダーの上部、内部、または直下など、自在に位置決めできる配置制御。

ニールセン・ノーマン・グループ（NN/g）のユーザビリティ調査が示すように、2次元のメガメニュー構造は、深い階層のリストに隠された項目を記憶させることなく、利用者がすべての選択肢を一度に俯瞰するのを助けます。標準機能の制約を把握するには、Shopifyテーマ標準メニューの限界に関する解説をご覧ください。

まずメニューツリーを設計する：第1階層、列、リンク

アプリを開く前に、ナビゲーションの階層構造を用紙やスプレッドシートに書き出してください。整理されたデスクトップメガメニューは、以下の3階層ツリーで構成されます：

• 第1階層（トップレベルバー）：ヘッダー上に並ぶ水平項目。標準的なノートPCの画面で2行に折り返されないよう、5〜7項目を目安にします。
• 第2階層（列見出し）：開いたドロップダウン内の列タイトル。商品カテゴリ、対象ユーザー、利用シーンなど、顧客の購買動機に基づいてグループ化します。
• 第3階層（リンク）：各列見出しの下に並ぶ個別のコレクション、商品、またはページへのリンク。

これらの階層を整理する際は、徹底的な選別を行ってください。ニールセン・ノーマン・グループの調査では、ナビゲーションメニューは通常のウェブページ以上に厳格に削ぎ落とす必要があると指摘されています。過剰なリンクは視覚的なノイズとなり、流し読みの速度を低下させます。列見出しは簡潔にし、実際の選択肢となるコレクション画像タイルに限定して視覚要素を配置してください。

以下はバランスの取れた3階層ツリーの構成例です：

レディース (第1階層)
├── ウェア (第2階層 列 - 幅: 3/12)
│   ├── ワンピース・オールインワン (第3階層 リンク)
│   └── トップス・Tシャツ (第3階層 リンク)
├── シューズ (第2階層 列 - 幅: 3/12)
│   ├── ブーツ・パンプス (第3階層 リンク)
│   └── スニーカー (第3階層 リンク)
├── アクセサリー (第2階層 列 - 幅: 3/12)
│   ├── ハンドバッグ (第3階層 リンク)
│   └── ジュエリー (第3階層 リンク)
└── 注目アイテム (第2階層 列 - 幅: 3/12)
    └── [新シーズン コレクションタイル] (第3階層)

メンズ (第1階層)
├── アパレル (第2階層 列 - 幅: 4/12)
│   ├── シャツ・ポロシャツ (第3階層 リンク)
│   └── パンツ・チノパン (第3階層 リンク)
└── フットウェア (第2階層 列 - 幅: 4/12)
    └── カジュアルシューズ (第3階層 リンク)

雑貨・小物 (第1階層)
├── 財布・レザーグッズ (第2階層 列 - 幅: 6/12)
└── ベルト・マフラー (第2階層 列 - 幅: 6/12)

セール (第1階層 - 直接リンク)

効果的な配置パターンについては、メガメニューのレイアウトとグループ化に関するベストプラクティスをご覧ください。

ステップ1：Navi+をインストールしてアプリ埋め込みを有効化する

Shopify App StoreからNavi+をインストールします。

Navi+ はテーマのアプリ埋め込み（App embeds）経由で読み込まれます。作成したメニューをストアフロントに反映させるには、まずアプリ埋め込みを有効化する必要があります。

1. Shopify管理画面で オンラインストア > テーマ に移動します。
2. すでに顧客アクセスがあるストアの場合は、有効なテーマの横にある3点リーダーをクリックし、複製 を選択します。複製したテーマ上で作業することで、訪問者に影響を与えずに安全に構築、デザイン、テストを行えます。
3. 複製したテーマの カスタマイズ をクリックしてテーマエディタを開きます。
4. 左側サイドバーで、Shopifyテーマアプリ拡張機能ガイドに記載されている アプリ埋め込み アイコンをクリックします。
5. リスト内の Store Connector を探し、トグルを オン に切り替えます。
6. 右上の 保存 をクリックします。

アプリ埋め込みはテーマごとに個別に紐付いています。将来的にテーマを変更またはバージョンアップした場合は、新しいテーマのエディタを開いて再度Store Connectorを有効化してください。

ステップ2：Desktop Mega Menuを作成し、第1階層の項目を追加する

アプリ埋め込みが有効になったら、Shopify管理画面からNavi+のダッシュボードを開きます。

1. 新しいメニューを作成し、メニュータイプとして Desktop Mega Menu を選択します。テンプレートから開始することも、空白の状態から作成することも可能です。
2. テンプレートを使用する場合は、設計したツリーに含まれない不要なサンプル項目を削除します。
3. 事前に作成したツリー設計に従って、第1階層の項目を1つずつ追加します。
4. 項目を上下左右にドラッグ＆ドロップして、並び順と親子関係を整理します。上下のドラッグで表示順が変わり、左右のドラッグで親項目の配下に子項目をネストできます。
5. すべての第1階層項目に有効なリンク先URLを設定します。複数列のドロップダウンを開く項目であっても、親カテゴリのコレクションページを設定しておくことで、見出しをクリックした訪問者を適切に誘導できます。

Step 3: Build dropdown columns, links, and images

次に、長くなりがちなリンクのリストを、視線移動がスムーズな列構造へと整えます。

図1：コンセプトイラスト（Concept illustration）— Step 3: Build dropdown columns, links, and images {#step-3-build-dropdown-columns-links-and-images}

1. ワイドなドロップダウンが必要な第1階層項目を選択し、Is Multi-Column menu item 設定をオンにします。これにより、直下の子項目（第2階層）が列の見出しとして機能するようになります。
2. 各列見出しの下に、第3階層のリンク先を追加します。
3. アプリの12分割グリッド機能を使用して、各列の幅を設定します。4列パネルの場合は3/12、3/12、3/12、3/12のように割り当て、2列構成の場合はそれぞれ6/12に設定します。
4. ドロップダウン内のリンク数が少ない場合は、レイアウト設定のマルチカラムサブメニュー幅設定を調整し、無駄な余白が広がりすぎないように制限します。リンクが3〜4個しかない項目には、無理にメガパネルを使わず単一列ドロップダウンを適用するのが自然です。
5. 右端の列にクリック可能なコレクション画像タイルを配置して視覚的な魅力を高めます。単なる装飾ではなく実質的な誘導先となるよう、該当画像にはコレクションへのリンクを設定してください。整然とした2次元レイアウトは顧客の意思決定を直感的に支援します。

ステップ4：ホバーまたはクリックを選択し、バーのスタイルを整える

続いて、ドロップダウンが開く操作方法を決定し、ストアのデザインに合わせてナビゲーションバーのスタイルを調整します。

デスクトップ表示でドロップダウンをマウスホバーで開くべきか、クリックで開くべきかはストア運営者の間でよく議論されます。ユーザビリティ調査により明確な利点とリスクが判明しています：

Navi+では、この操作モデルの切り替えをスイッチ1つで行えます。レイアウト設定内の Show submenu on hover を使用して希望の挙動を指定します。この設定をオンにするとホバーで開き、オフにするとクリックでドロップダウンが表示されます。

開閉トリガーを選択したら、視覚デザインを仕上げます：

• ストアヘッダーの配色と調和する背景色およびテキストカラーを指定します。
• カーソルを合わせた際の控えめな色変化や下線インジケーターを設定し、操作中の項目を明確に伝えます。
• フォントサイズと項目の左右間隔を調整し、ブランドロゴやヘッダーアイコンと自然に整列させます。

Step 5: Publish under the header and test every screen width

構築およびデザインを終えたメニューは、アプリ内で公開処理を実行することで初めてストア上に表示されます。

図2：コンセプトイラスト（Concept illustration）— Step 5: Publish under the header and test every screen width {#step-5-publish-under-the-header-and-test-every-screen-width}

Navi+のエディタ画面で Publish to website ボタンをクリックし、Insert/Replace スイッチをオンにします。

これらの配置設定をデスクトップ画面にのみ限定して適用するには、セレクタの末尾に (D) を付与します（例：header(D)）。

標準設定では、画面幅が768px未満になると自動的にモバイル表示へと切り替わります。

ワイドモニター、標準的なノートPC、横向きのタブレットなど、複数の環境で表示を確認してください。バーが意図せず2行に折り返されていないか、パネルが中央に安定して展開されるかを検証します。

1. キーボード操作に切り替え、Tab キーを押して項目が順番に選択されることを確認します。
2. 親カテゴリおよびドロップダウン内のリンクでフォーカス枠が明瞭に視認できるかをチェックします。
3. パネルが開いた状態で Escape キーを押し、パネルが閉じて親ボタンにフォーカスが戻ることを確認します（W3C WAI-ARIA基準準拠）。

特定テンプレートへの導入手順については、Dawnテーマにメガメニューを追加する方法の解説、および人気ShopifyテーマにおけるNavi+メニュー事例をご覧ください。画面付きの詳細手順は、公式のスクリーンショット付き公開ガイドをご参照ください。

スマートフォン上でも統一された案内を提供したい場合、後述するSmart responsive機能により同じメニューツリーをモバイルに展開できます。

よくある問題：メニューが表示されない、ヘッダーに隠れる、2行に折り返される

外部のデスクトップメニューを導入・公開する際、予期せぬ表示不具合が発生することがあります。以下の対応表を参考に原因を特定してください：

特殊なケースや高度な設定については、Desktop Mega Menu FAQをご確認ください。

トレードオフ：シンプルなドロップダウンがメガメニューに勝るケース

複数列のメガメニューは効果的な訴求ツールですが、すべてのShopifyストアに最適とは限りません。複雑なレイアウトを導入する前に、以下のトレードオフを検討してください：

• 取扱商品が少ないカタログ：取り扱い商品数が限られている場合や、主要な2〜3個のコレクションで完結しているストアでは、テーマ標準メニューやシンプルな単一列ドロップダウンの方が軽快で分かりやすいです。Shopify標準メニューは最大2階層のネストに対応しており、小規模な構成には十分機能します。
• 運用メンテナンスの負担：メガメニューは定期的な見直しを必要とします。コレクションの入れ替え、季節キャンペーンの終了、在庫の変動に合わせて、各列のリンクや画像を手動で更新し続ける必要があります。無計画な拡張は過密なメニューを招き、利用者を迷わせます。
• 操作上のストレスリスク：ホバー操作に依存するメガメニューは、適切な遅延処理がない場合やタッチ操作対応のノートPCで使用された場合に操作ストレスを生む原因になります。
• テーマへの依存関係：サードパーティアプリを使用する場合、テーマの変更やメジャーアップデートのたびにアプリ埋め込みの連携状態を確認する運用手順が加わります。

商品バリエーションが豊富で、複数列にわたるカテゴリ分類が不可欠な場合や、主要メニュー内でコレクション画像を視覚的に提示したい場合にこそ、デスクトップメガメニューの価値が発揮されます。自社ストアに適した構成を見極めるには、自社ストアに最適なメニュータイプの選び方をご覧ください。

Navi+が提供する解決策

Navi+ Tab Bar & Mega Menuは、制約の多いテーマ標準機能と複雑なカスタム開発との間のギャップを埋めるために設計されています。

デスクトップ表示向けに、Navi+は明快な3階層ナビゲーションツリーを基盤とする専用のDesktop Mega Menuエディタを提供します。柔軟なグリッド上で列幅を調整し、ホバーまたはクリックの動作を1つのトグルで選択し、Insert AfterやReplaceを用いてデスクトップ専用の配置を正確に指定できます。

小型ノートPC画面でバーを整然と保つため、Navi+ にはブレークポイント設定と、はみ出した第1階層の項目を折り返さず矢印の裏にまとめるオーバーフロー矢印ボタンがあります。さらに、Smart responsive はデスクトップの階層構造のライブ参照をモバイルのスライドドロワーに埋め込むため、2つ目のツリーを作る必要がありません。

自社ストアで試してみたい場合、Navi+ Tab Bar & Mega Menuを使用すれば、本記事で解説したDesktop Mega Menuを複製テーマ上で安全にテストし、いつでも不要時にオフに切り替えることができます。

公開前のアクションチェックリスト

新しいデスクトップナビゲーションを一般公開する前に、以下の項目を順に確認してください：

• メニューツリーの設計完了：紙や表計算ツールで最大3階層（最上位バー、列、リンク）を整理した。
• アプリ埋め込みの有効化：テーマエディタの「アプリ埋め込み」でStore Connectorをオンにして保存した。
• 第1階層項目のバランス確認：標準的なノートPC画面で最上位項目が1行に収まることを確かめた。
• 列の構造と幅の調整：第2階層の項目が均整の取れた幅を持つ列見出しとして構成されている。
• 画像の選定：配置した画像が単なる飾りではなく、実際のコレクション選択肢として機能している。
• 開閉トリガーの決定：適切な遅延を設けたホバー、または意図的なクリック展開のいずれかを選択した。
• 配置セレクタの検証：適切なヘッダーセレクタとデスクトップ専用接尾辞 (D) を付けて設定した。
• マルチ画面幅での表示テスト：ワイドモニター、通常ノートPC、タブレット環境で表示を確かめた。
• キーボード操作の検証：Tab キーで項目を順次移動でき、開いた状態で Escape キーを押すと親ボタンにフォーカスが戻る（W3C勧告準拠）。
• リンク先の正常性確認：全項目をクリックして、公開中のコレクションやページに正しく到達できることを確認した。

自社ストアで試してみたい場合、Navi+ Tab Bar & Mega Menuを使用すれば、本記事で解説したDesktop Mega Menuを複製テーマ上で安全にテストし、いつでも不要時にオフに切り替えることができます。

FAQ

デスクトップメニューは何階層まで作成できますか？

Shopify標準のドロップダウンメニューでは最上位項目の下に最大2階層のネストが可能です。Navi+のDesktop Mega Menuは、トップレベルバー、列見出し、個別リンクの3階層構造で構成されます。

メガメニューはホバーとクリックのどちらで開くべきですか？

適切に調整されていればどちらも実用的です。ホバーにはチラつきを防ぐ短い遅延（Baymard推奨：300〜500ミリ秒）が必要ですが、クリックはより安定してアクセシブルな選択肢です。Navi+では「Show submenu on hover」で簡単に切り替えられます。

ヘッダーのどの位置にメニューが表示されますか？

Insert After方式でセレクタに header を指定すると、ヘッダーの直下にメニューが表示されます。Replace方式を使用すると、テーマ標準のメニューが非表示になり、Navi+がその位置に収まります。

アプリをインストールしたのにメニューが表示されないのはなぜですか？

アプリ埋め込みが無効になっているか、メニューがまだ公開されていないケースが一般的です。テーマエディタでStore Connectorが有効か確認し、セレクタを点検し、固定ヘッダーと重なる場合はz-indexを調整してください。

タブレットや小型PCでデスクトップメニューがモバイル版に切り替わるのはなぜですか？

初期設定では画面幅が768px未満になるとモバイル表示に切り替わります。レイアウト設定でブレークポイントの数値を下げ、オーバーフロー矢印を有効にすることで水平レイアウトを維持できます。

同じメニューをモバイル端末でも表示できますか？

はい。Smart responsive機能により、デスクトップメニューのツリー構造をそのままモバイル用のSlide menuに反映できるため、個別にツリーを作り直す手間が省けます。

Sources

• Shopify Help Center: Drop-down menus
• Shopify Help Center: App embeds in themes
• Nielsen Norman Group: Mega Menus Work Well
• Nielsen Norman Group: Mega Menus Gone Wrong
• Baymard Institute: Dropdown Menu Flickering Issue
• Smashing Magazine: Frustrating Design Patterns: Mega-Dropdown Hover Menus
• Shopify Dawn Theme PR #1316
• W3C WAI-ARIA APG: Disclosure Navigation Example
• Navi+ Help: Publishing on Shopify
• Navi+ Help: Desktop Mega Menu FAQ
• Navi+ Help: How to Use Desktop Mega Menu
• Navi+ Help: Setting Layout