Shopifyで参考画像からメニューデザインを再現・実装する方法（メガメニュー、ドロワー、タブバー）
「こんなメニューを自分のShopifyストアに導入したい」と思えるスクリーンショットを見つけた経験はないでしょうか。憧れのブランドサイト、デザイナーがFigmaで作成したカンプ、Pinterestで見つけた洗練されたデザインなどです。整理されたカラム、コレクションの写真タイル、目を引くプロモーションバナー、きれいなバッジが並んでいます。しかし、Shopifyの管理画面を開くとすぐに壁にぶつかります。画像をアップロードしてメニューを一括生成するボタンも、メニュー項目内に画像を設定する標準機能も見当たらないからです。
メニューの画像は単なる絵ではなく、設計仕様書（スペック）です。構造、コンテンツブロック、スタイル、インタラクションの4つに分解し、適切なツールを選び、スマートフォン版を意図を持って設計することが成功への鍵となります。画像を具体的な構成要素に分解すれば、Shopify上での再現作業はずっと進めやすくなります。
Quick answer: how to turn a menu image into a working Shopify menu
参考画像を完成した絵としてではなく、仕様書として捉えましょう。メニュー種別、階層と列数、コンテンツブロック（リンク、画像、バナー、商品）、スタイル、モバイル動作を書き出し、テーマ設定、メニューアプリ、またはカスタムコードを使って各パーツを構築し、スマホ版は個別に設計します。
Shopify上でメニューデザインを再現するには、次の5つの手順を踏みます：
- Step 1: Break the image into a menu design spec: リンク階層、カラム数、画像カード、ブランドカラー、ホバーまたはクリック動作を書き出します。
- Step 2: Choose the build route: theme settings, a menu app, or custom code: 構築の手間、デザインの自由度、テーマ更新時の保守リスクを比較検討します。
- Step 3: Map each part of the image to a building block: 画像の視覚要素をリンクグループ、コレクションタイル、バナー、アイコンに対応付けます。
- Step 4: Translate the desktop design for mobile: デスクトップの横長グリッドを、スマホ向けのドロワー、ボトムタブバー、アイコン列へ再構成します。
- Step 5: Match colors, fonts, and spacing to your brand: 他社の素材を流用せず、自社のタイポグラフィ、パレット、アクセシブルなコントラスト比を適用します。
Shopifyの標準メニューはリンク情報を保持する役割を持ち、外見はテーマ、アプリ、またはコードが決めています。PC向けのグリッドはそのままスマホ画面に収まらないため、モバイルには独自の配慮が必要です。
Why a Shopify menu rarely matches a design image out of the box
メニューデザインを再現しようとする際、多くのマーチャントはまず管理画面のコンテンツ > メニューを開きます。しかしそこにはデザインを調整するビジュアルツールはなく、シンプルなテキストリンクのリストが並んでいるだけです。
Shopifyのメニューは、ネスト（入れ子）構造を持つリンクのリストとして設計されています。Shopifyヘルプセンターのドロップダウンメニュー解説によると、最上位の項目には最大2階層のドロップダウンメニューをネストでき、合計で最大3階層の構造になります。テーマ内部のテンプレート言語であるLiquidでは、メニュー項目は単なるlinkオブジェクトとして処理されます。ShopifyのLiquidドキュメントにある通り、項目は「a link in a menu」（メニュー内の1つのリンク）に過ぎず、titleやurlといった属性を持ちますが、項目自体に画像やバナーを紐付ける標準プロパティは存在しません。
ストアにメニューを追加することで、顧客がストア内を閲覧し、重要なページを見つけやすくなります（Shopifyヘルプセンター）。ただし、メインメニューやドロップダウンメニューの表示位置や外見は、使用しているテーマによって異なります。管理画面はルーティングデータ（リンク先情報）を保持しているだけで、色、フォント、余白、そしてドロップダウンが単なる縦並びリストになるかリッチな複数列メガメニューになるかは、テーマ、アプリ、またはカスタムコードが決めています。
参考画像の大半は、別のテーマや独自コード、外部アプリを使用しているストアのものです。もしお持ちの画像が現在利用しているテーマの公式デモである場合は、テーマデモのようなメニューを作成する手順ガイドをご覧ください。一方、他社サイトやカスタムデザインの場合は、画像を分解して自らパーツを組み上げていく必要があります。
Step 1: Break the image into a menu design spec
Concept illustration: 参考画像を、構造・コンテンツブロック・スタイル・インタラクションのメモに分解したイメージ。
コードを書いたり設定を触ったりする前に、参考画像をじっくり観察し、構造、コンテンツブロック、スタイル、インタラクションの4領域に分けた仕様書（スペック）を作成しましょう。
Structure: levels and columns
- メニュー種別の特定: 通常の横並びナビゲーション、画面幅いっぱいに広がるメガメニュー、画面端から引き出されるドロワー、画面下部のタブバーのいずれでしょうか。形式の比較には、適切なメニュー種別の選び方を参考にしてください。
- 第1階層の項目数を数える: ヘッダーに見えている主要リンク（例: 新着、コレクション、ブランドについて、セールなど）の数を把握します。
- ネスト階層の確認: ドロップダウン内の構成を見ます。直下にリンクが並んでいるだけか、それとも太字の大見出しの下に子リンクがグループ化されているかを確認します。Shopifyの標準上限は最大3階層です。
- 列数の確認: メガメニューの場合、横方向に何列の垂直カラムが並んでいるかを数えます。
Content blocks: links, images, banners, products
デザイン内に現れるすべての要素をリストアップします：
- テキストリンク列: コレクションや固定ページへ飛ぶ縦並びのリンク群。
- グループ見出し: 関連リンクをまとめる太字のタイトル。
- コレクション画像タイル: 正方形または縦長の写真にコレクション名が添えられたカード。
- プロモーションバナー: 季節の特集やクーポン、ルックブックを紹介する大きめのグラフィック枠。
- おすすめ商品カード: 写真、商品名、価格をコンパクトに表示した商品ブロック。
- リンク横のアイコン: 炎マークや星印など、文字の横に添えられた小さな視覚シンボル。
- アクションボタン（CTA）: ピル型のボタンなど、特に目立たせたいリンク。
Style: colors, fonts, spacing
画像の圧縮ノイズから無理にピクセル単位の数値を測るのではなく、定性的に特徴を記録します：
- 配色: ドロップダウンの背景色（白、淡いグレー、ダークトーン）、リンク文字色、ホバー時のアクセント色、区切り線を把握します。
- タイポグラフィ: フォントの系統（モダンなサンセリフか伝統的なセリフか）、大文字・小文字の扱い、見出しとリンクの太さのコントラストを確認します。
- 余白: ゆったりとした余白を持たせているか、多品種を見せるために詰めた密度にしているかを見極めます。
- 角の形状: 画像カードの角が直角か、丸みを帯びているかを確認します。
Behavior: hover, click, and mobile
- 展開のトリガー: マウスを乗せたとき（ホバー）に開くか、クリックが必要か。
- 階層の開き方: ドロワー内で、サブ項目が下へ広がるアコーディオン式か、横へスライドするか。
- スマホ表示の有無: 参考画像にスマホ版が含まれているか。もし含まれていない場合は、自分でモバイル体験を設計する必要があります。
メニュー仕様書ワークシート
構築作業を始める前に、以下のチェックシートをメモ帳にコピーして記入しましょう：
- メニュー形式: 横型ナビ / デスクトップメガメニュー / モバイルドロワー / モバイルタブバー
- 第1階層の項目数: (例: 5項目)
- ネスト階層の深さ: 1階層 / 2階層 / 3階層 (Shopify上限: 3階層)
- 列数: (例: PCドロップダウン内で4列)
- コンテンツブロック: リンク一覧 / コレクション写真 / バナー / 商品 / アイコン / ボタン
- カラーの目安: 背景色、文字色、ホバー色、区切り線
- フォントの特徴: サンセリフまたはセリフ、見出しの太さ
- PCでの動作: 安全な遅延を伴うホバー展開 / クリック切り替え
- モバイル戦略: ドロワー展開 / アコーディオン折りたたみ / ボトムタブバー / アイコン列
Step 2: Choose the build route: theme settings, a menu app, or custom code
仕様書がまとまったら、実装手段を選択します。Shopifyでは主に3つの選択肢があります：テーマ標準の設定機能、専用メニューアプリ、そしてカスタムコードによる自作です。
初期構築の手間、デザインの自由度、テーマ更新時の保守リスクという3つの観点から比較します：
| 構築手段 | 導入の手間 | デザインの自由度 | テーマ更新時のリスク | 最適なストア像 |
|---|---|---|---|---|
| テーマ設定 | 低（コード不要でテーマカスタマイザーから直接設定） | 限定的（使用しているテーマの標準機能の範囲内に限定される） | 低：テーマエディタによるカスタマイズ内容は更新後も引き継がれる | シンプルなドロップダウンや、テーマに付属する基本メガメニュー |
| メニューアプリ | 中（ドラッグ＆ドロップのビジュアル編集ツール） | 高（カラム追加、コレクション画像、バナー、商品、タブバーに対応） | 低〜中：アプリ埋め込みブロックはテーマコードを汚さないが、大規模変更時の互換性確認が必要 | テーマコードを触らずにリッチなカラムやバナーを作りたいストア |
| カスタムコード | 高（Liquid、CSS、JavaScript、スキーマブロックの自作） | 最大（マークアップ、アニメーション、挙動を自由に設計可能） | 高：更新前にカスタマイズしたコードのコピーを保存しておく必要があり、再適用が必要になる場合がある | 社内にフロントエンド開発者がいるストアや技術パートナーのいるブランド |
方法1：テーマの標準機能
まずはテーマカスタマイザー（オンラインストア > テーマ > カスタマイズ）を開き、ヘッダーセクションの設定を確認しましょう。一部のテーマは、コンテンツ > メニューでネストしたリンクを複数列に展開するメガメニュー機能を備えています。
最大の利点は更新時の安全性です。テーマエディタを使用して加えたカスタマイズは、更新されたテーマにもそのまま引き継がれます（Shopifyヘルプセンター）。しかし、自由度には制限があります。テーマ自体がヘッダー内に画像やプロモーションバナーを配置する設定を持っていない場合、標準機能だけでそれらを表示させることはできません。詳しくはShopifyテーマメニューの制限事項をご覧ください。
方法2：専用メニューアプリの導入
参考画像にプロモーションバナー、コレクションの画像タイル、商品カルーセル、スマホ用の固定タブバーなどがあり、現在のテーマで対応できない場合は、アプリの活用が現実的な解決策となります。
現在のShopifyアプリは「テーマアプリ拡張機能」を利用しています。アプリがテーマアプリ拡張機能を使用している場合、マーチャントはテーマコードを手動で編集する必要がありません（Shopify Developer Documentation）。アプリのビジュアルエディタ上でレイアウトや配色を整え、テーマエディタで「アプリ埋め込み（App Embed）」を有効化するだけで導入できます。
留意点として月額費用が発生することや、Shopifyの解説にある通り、新しいテーマに切り替える際に一部のアプリで互換性の確認が必要になる点が挙げられます（Shopifyヘルプセンター）。それでも、非エンジニアの事業者にとっては、テーマコードを壊さずに自由なデザインを実現できる最も安全な方法です。
方法3：カスタムコードによる実装
テーマやアプリの仕様に収まらない特殊なアニメーションや独自のレイアウトを追求する場合は、カスタムコードが必要です。開発者がヘッダーのLiquidテンプレートを修正し、CSSを当て、メタフィールドなどを組み込んでいきます。
以下は、カスタムコードを使って無料テーマに画像メニューを組み込む実例の動画です。コードの追加やメタフィールド連携の手順が確認できます：
コードによる実装は何でも自由に作れる反面、保守の負担が常に付きまといます。Shopifyヘルプセンターでは「テーマを更新する前に、カスタマイズしたコードのコピーを必ず保存しておく必要があります」と注意喚起しています（Shopifyヘルプセンター）。カスタマイズしたコードは更新後のテーマに再適用が必要になる場合があるため、コピーを保存しておき、更新のたびにメニューを再確認してください。
Step 3: Map each part of the image to a building block
構築方針が決まったら、ステップ1で書き出した仕様書の各要素を、Shopifyの具体的なナビゲーション部品へと落とし込みます。
以下の対照表は、よく見られる7つのデザイン要素が3つの手法でどのように構築されるかをまとめたものです：
| 画像内の要素 | 役割・機能 | テーマ設定 | メニューアプリ | カスタムコード |
|---|---|---|---|---|
| 第1階層リンクバー | 主要カテゴリが並ぶメインヘッダー | 標準対応：コンテンツ > メニューのリンクをHeaderに指定 | アプリによる：ヘッダーバーを置き換えまたは拡張できる場合がある | ヘッダー内でlinklists.main-menu.linksを回すLiquidループ |
| 見出し付きリンク列 | 太字の大見出しの下に子リンクを並べた複数列 | テーマによる：メガメニューブロックを備えている場合は可能 | アプリによる：見出し付きの列ビルダーがあるか確認 | ネストされたLiquidループ（for child in link.links）とCSS Grid |
| コレクション画像タイル | 写真とコレクション名がセットになったカード | テーマによる：一部の有料テーマはコレクション画像を自動取得 | アプリによる：コレクションにリンクする画像カードブロックがあるか確認 | collection.featured_imageやメタフィールドを呼び出すLiquid |
| プロモーションバナー | キャンペーンやルックブックを訴求する画像枠 | テーマによる：ヘッダーにプロモブロックを持つテーマもある | アプリによる：自分の画像とボタンリンクを設定できるバナーブロックがあるか確認 | スキーマに画像ピッカーとリンク設定を定義した静的ブロック |
| おすすめ商品カード | 商品画像、商品名、価格をコンパクトに見せる枠 | テーマによる | アプリによる：商品ブロックがあるか確認 | all_products[handle]経由で商品データを引き出すLiquid記述 |
| リンク横のアイコン | テキストの脇に添える小さな視覚マーク（セール等） | テーマによる | アプリによる：アイコン選択や独自アイコンのアップロードがあるか確認 | インラインSVGタグまたはハンドル名に対応付けたCSS疑似要素 |
| アクセントボタン（CTA） | 目立たせたピル型リンク（例: 来店予約など） | テーマによる：最後のリンクをボタン化できるテーマもあり | アプリによる：個別のメニュー項目にボタンスタイルを設定できるか確認 | Liquidテンプレート内の特定のアンカータグに独自CSSクラスを付与 |
メガメニューの設計原則
参考画像が幅広の複数列ドロップダウンであれば、それはメガメニューです。Nielsen Norman Groupのユーザビリティ調査では、メガメニューが効果的な理由として「二次元のドロップダウンレイアウトで多くの選択肢が一目で把握できること」が挙げられています。二次元のグリッドに整理して広げることで、顧客は狭いプルダウンを何度も辿ることなく、目的の売り場へ直行できます。
さらにNN/gは、「メガメニューは適切な場合に画像やアイコンを容易に活用できる」とも述べています（Nielsen Norman Group）。視覚的な手がかりはカテゴリの認識を助けます。ただし、画像はわかりやすさを支えるために使うべきです。画像タイルの下には必ず読みやすい文字ラベルを添え、どこへ移動するリンクなのかを明確に伝えましょう。
また、NN/gは「選択肢を関連するまとまり（セット）に小分け（チャンク化）すること」を推奨しています（Nielsen Norman Group）。20個のリンクがあるなら、無秩序に縦に並べるのではなく、トップス、ボトムス、アウター、小物といった明確な列見出しの下に分類します。列のバランス設計については、メガメニューのベストプラクティスもご覧ください。
Step 4: Translate the desktop design for mobile
Concept illustration: PCのメガメニューを、モバイルのドロワー、アイコンメニュー、下部タブバーに置き換えたイメージ。
PC画面の参考画像からメニューを作る際によくある失敗が、モバイル体験への配慮不足です。PCのメガメニューは横に広い画面を前提としていますが、スマートフォンの画面幅は狭いものです。4列に広がったPC用のレイアウトをそのまま縮小してスマートフォンに収めることは不可能です。
Baymard Instituteのユーザビリティ調査はこの困難さを指摘しています：「ユーザビリティテストにおいて、モバイルナビゲーションはユーザーにとって特に扱いづらい要素であることが繰り返し確認されています」。画面が狭いスマートフォンでは、小さな文字や押しにくいタップ領域が原因で離脱が起きやすくなります。
さらにBaymardは、多くの場合、モバイルメニューはデフォルトで折りたたまれ、ハンバーガーアイコンの後ろに隠されていると指摘しています（Baymard Institute）。メニューを隠すことで画面の表示領域は節約できますが、大きな代償を伴います。Nielsen Norman Groupの検証によると、メインナビゲーションを隠すと、コンテンツの見つけやすさ（発見可能性）がほぼ半減することが判明しています。
この視認性の低下を補うため、NN/gは「サイトの主要ナビゲーションリンクが4個以下の場合は、それらを隠さずに目に見えるリンクとして表示すること」を推奨しています（Nielsen Norman Group）。Shopifyストアにおけるモバイル設計では、次の3つのアプローチを組み合わせるのが実用的です：
1. スライド式ドロワーメニュー
商品数が多いストアでは、ハンバーガーボタンから開くドロワーが基盤となります。PCのメガメニューをドロワーへ落とし込む際は：
- 横並びのカラムを、縦スクロールのアコーディオンリストへ変換します。
- カラムの見出しをタップして開閉できるようにします。
- 第3階層の子リンクは少しインデント（字下げ）して並べます。
- PC用の巨大バナーは細い横帯バナーに縮小するか、スマホ版では非表示にしてスクロール負担を減らします。
2. 画面下部の固定タブバー（ボトムタブバー）
主要ページを常に露出させておくために、スマホ画面の最下部にタブバーを固定配置します。親指が最も届きやすいエリアに、ホーム、商品一覧、検索、カートといった主要な導線を3〜4個配置します。顧客はドロワーを開くことなく、ワンタップで目的の行動に移れます。詳しい導入方針はハンバーガーメニューを超えたモバイルナビゲーションをご覧ください。
3. カテゴリのアイコンメニュー列
PC用デザインにコレクションの写真カードが含まれていた場合、スマホではコレクションページ上部やドロワー内に丸いアイコン列として配置します。ワンピース、トップス、靴といった小さな丸型アイコンを並べることで、縦の画面領域を圧迫せずに視覚的な誘導が可能になります。
端末ごとに適した導線を設計することは、現代のEコマースにおいて標準的な考え方です。両環境を並行して構築する手順は、PC向けとスマホ向けに個別のメニューを作成する方法で詳しく解説しています。
Step 5: Match colors, fonts, and spacing to your brand
画像からメニューを再現するというのは、構造や空間の使い方を学ぶことであり、他社のブランド資産をコピーすることではありません。他社のロゴ、著作権のある写真、有償フォントをそのまま流用してはいけません。優れたレイアウト構造を、自社ストアのブランド言語に翻訳して適用しましょう。
テーマのスタイル定義を継承する
サイト全体と調和させるために、テーマの既存設定を活用します：
- テーマ内で指定されているフォント（オンラインストア > テーマ > カスタマイズ > テーマ設定 > タイポグラフィ）をメニューにも適用し、統一感を保ちます。
- ドロップダウンの背景には、ストアの標準的な背景色（クリーンな白や柔らかなベージュなど）を合わせます。
- ホバー時の下線やセールバッジ、ボタン類には、自社のブランドアクセントカラーを使用します。
ブランドの世界観とナビゲーションを調和させる詳細なコツは、ナビゲーションをブランドらしく見せる方法で解説しています。
アクセシブルな文字コントラストの確保
見た目の洗練が原因で文字が読めなくなっては本末転倒です。SNS上のデザイン画像には、白い背景に極めて薄いグレーの文字を配したり、賑やかな写真の上に細い白文字を乗せたものがよく見られます。実際の店舗でこれを行うと、多くの顧客にとって判読不能なメニューになってしまいます。
ウェブアクセシビリティの基準には明確な数値が示されています。W3C Web Accessibility InitiativeのWCAG 2.2基準によると、通常の本文テキストは背景に対して少なくとも4.5:1以上、大きな文字（18pt以上または太字14pt以上）でも少なくとも3:1以上のコントラスト比が必要です。
スタイリング時の重要ポイント：
- ドロップダウンの背景色に対して、リンク文字が4.5:1以上のコントラストを維持しているか確認します。
- プロモーションバナーの写真の上に文字を載せる場合は、文字の背面に不透明または半透明の下敷きカードを敷き、写真の明暗に左右されず4.5:1の比率を保てるようにします。
- スマホでのタップ誤認を防ぐため、リンク間の縦余白を十分に確保します。
Trade-offs: what not to copy pixel for pixel
参考画像が魅力的だと、影の濃さやアニメーション、余白のピクセル数まで完全に複製したくなります。しかし、実環境での操作性や保守性を考慮せずに視覚効果だけを真似ると、重大なトラブルを招く原因になります。
特に避けるべき3つの落とし穴は以下の通りです：
1. 過敏すぎるホバー反応
静止画のデザインカンプでは、カーソルが触れた瞬間に小気味よく開くメニューが想定されがちです。しかし実環境での即時展開はストレスのもとになります。ユーザーが画面上部の検索窓やカートボタンへマウスを移動させる途中で、意図せず巨大なパネルが開き、画面を遮ってしまうからです。
Nielsen Norman Groupは意図的な時間差を設けるよう助言しています：「何かを表示する前に、マウスが0.5秒間静止している必要があります」。このわずか0.5秒の待機時間が、カーソルの通過による誤作動を防ぎます。
キーボード操作への配慮も欠かせません。W3Cのフライアウトメニューに関する解説では、「Tabキーを使ってメニュー内を移動する際にサブメニューが自動的に開くべきではない」と明記されています。Tabキーでメイン項目を移動している最中に、サブメニューが勝手に開いてフォーカスを奪うと、操作者が方向感覚を失ってしまいます。サブメニューは、ユーザーが意図的に操作するまで閉じたままにしておくべきです。
2. 商品数に見合わない過剰な列数
参考画像が大丸や百貨店のような多数のカラムと数十の小カテゴリを持っていたとしても、商品数の少ないストアが同じ枠組みを採用してはいけません。中身の少ないメニューに多くのカラムを作ると、スカスカの空白やリンクが1つしかない列が生まれ、品揃えが乏しい印象を顧客に与えてしまいます。現在の在庫量に合わせた列数に調整してください。
3. 保守負荷を増大させる特殊な独自レイアウト
斜めの区切り線や変形パネル、複雑なJavaScriptによる物理アニメーションなどは、ポートフォリオ上では華やかに見えます。しかしShopify上でこれらを動かすには、極めて繊細で複雑な独自コードが必要になります。
Shopifyのテーマ更新に関する公式ガイドが示すように、テーマを更新する前に、カスタマイズしたコードのコピーを必ず保存しておくべきです。作り込んだ独自メニューは、更新後に再確認と再適用が必要になる場合があります。
あらゆる自由なイラストレーションと完全に一致することを保証できるツールやテーマは存在しません。目的はピクセルの一致ではなく、顧客が迷わず買い物を楽しめる使いやすい案内板を作ることです。
Where Navi+ fits
参考画像に複数列のレイアウト、コレクションの画像タイル、バナー枠、スマホ向けの固定タブバーなどが含まれており、現在お使いのテーマ標準機能では再現できない場合、高額なスクラッチ開発を依頼する必要はありません。ここで役立つのがShopify専用ナビゲーションアプリNavi+です。
Navi+は、Shopifyのマーチャントがメニューレイアウトをビジュアルに構築できるナビゲーションアプリです：
- PC向けメガメニュー: 商品、コレクション、画像、アイコンを自由に配置し、列幅を柔軟に調整できる複数列ドロップダウンを構築できます（Shopifyアプリストア）。参考画像のグループ構成やバナーをスムーズに再現できます。
- モバイルメニュー＆ドロワー: PC版の構造をそのまま活用することも、スマホ専用に再構成した階層を設定することも可能なモバイルドロワーを作成できます（Shopifyアプリストア）。
- 画面下部の固定タブバー: アイコンとテキストラベルを備えたアプリのようなボトムタブバーをスマートフォン表示に追加でき（Shopifyアプリストア）、重要ページへの導線を常時確保します。
- コレクションアイコンメニュー: スマートフォン訪問者が直感的にタップして巡回できる丸型アイコン列を設置できます。
- ノーコードで構築可能: テーマのコードファイルを触ることなく、テンプレート、AI支援、ドラッグ＆ドロップ操作でメニューを作成・編集できます（Shopifyアプリストア）。
- テーマに優しい安全設計: Shopifyのテーマアプリ拡張機能を利用して組み込まれるため（Shopify Developer Documentation）、テーマのLiquidファイルを直接書き換えて必要がありません。
- 標準に準拠した階層設計: 最大3階層までのネストをサポートし、Shopifyの基本的な情報構造と整合性を保ちます。
テンプレートは迅速に枠組みを作るための土台であり、自社コレクションの紐付けや圧縮画像のアップロード、配色の指定はご自身で行う必要があります。Navi+は画像ファイルを読み込ませて全自動でメニューを吐き出す機能を持つわけではありませんが、思い描いたレイアウトを自分の手で安全に組み上げるための柔軟なブロックを提供します。
お使いのテーマで参考画像のカラム、画像タイル、モバイルタブバーを再現できない場合は、Navi+のテンプレートをベースにパーツを組み立て、自社のカタログやブランドに合わせて調整してみてください。
Pre-publish checklist
新しく構築したメニューを本番公開する前に、以下の確認リストを一通りチェックしましょう：
- 仕様書との照合: ステップ1で作成した仕様書と見比べ、必要なカラムやブロックが揃っているか確認する。
- 全リンクの動作確認: すべてのリンク、コレクションカード、バナーをクリックし、404エラーにならないか確認する。
- 画像の最適化: 使用している画像が自社のものであり、Web用に容量圧縮され、適切なaltテキストが付いているか確認する。
- 実機テスト: パソコンのブラウザだけでなく、実際の手持ちスマートフォンで表示と操作性を確認する。
- キーボード操作の確認: Tabキーで項目を移動した際に、意図せずサブメニューが勝手に展開しないかテストする（W3C Flyout Menus）。
- コントラスト比の測定: 背景色と文字、バナー上の文字が4.5:1以上の基準を満たしているか確認する（WCAG 2.2）。
- スマホの画面収まり: ドロワーやタブバーが画面枠内に正しく収まり、意図しない横スクロールが発生していないか確認する。
- カスタムコードの控え: テーマファイルにLiquidやCSSを手書きした場合は、カスタマイズしたコードのコピーを保存しておく（Shopifyヘルプセンター）。
- テーマ更新計画: テーマのバージョンアップや他アプリ追加の際に、メニューの表示崩れがないか再確認する予定を立てておく（Shopifyヘルプセンター）。
- アプリ内プレビュー: Navi+を使用している場合、本番反映前にエディタ内でPC版メガメニューとスマホ版タブバーの両方をプレビュー確認する。
FAQ
Can I add images to a Shopify menu without an app?
コンテンツ > メニューで管理するShopify標準のメニューデータは、LiquidのlinkオブジェクトとしてURLとタイトルのみを保持します（Shopify Developer Documentation）。ドロップダウン内に画像を表示できるかどうかは、お使いのテーマが画像表示ブロックを備えているかどうかに依存します（Shopifyヘルプセンター）。テーマにその機能がない場合は、専用のメニューアプリを導入するか、テーマコードを独自にカスタマイズする必要があります。
How many levels can a Shopify menu have?
Shopifyのナビゲーション構造では、最上位の親項目に対して最大2階層のサブメニューをネストできます（Shopifyヘルプセンター）。したがって、全体の階層としては最大で3階層（第1階層 > 第2階層 > 第3階層）となります。
What should my desktop mega menu become on mobile?
PC用のメガメニューには、モバイル向けの専用レイアウト（項目を縦に展開できるスライド式ドロワーなど）が必要になるのが一般的です。モバイルのナビゲーションはユーザーにとって難しく（Baymard Institute）、メニューを隠すと発見率が低下するため、主要な導線が4つ以下の場合は画面上に常時表示させるべきです（Nielsen Norman Group）。たとえば画面下部の固定タブバーを使う方法があります。
Will a custom-coded menu survive theme updates?
テーマカスタマイザーを通じて行った設定変更は、テーマをバージョンアップしても新しいテーマに自動で引き継がれます（Shopifyヘルプセンター）。一方で、テーマのLiquidやCSSファイルに直接書き加えたカスタムコードは自動的には引き継がれません。更新前に必ずコピーを保存しておき、更新後のテーマに再度適用が必要になる場合があります。
Should I copy the image exactly?
いいえ、ピクセル単位で完全に真似るべきではありません。レイアウトの構造、カラムの分け方、使い勝手の良さなどの設計思想を取り入れつつ、画像、ロゴ、フォントは自社独自のものを使用してください。さらに、文字のコントラスト比を4.5:1以上に保ち（W3C WCAG 2.2）、自社の実際の商品数に見合った分かりやすいグループ分けを行うことが大切です（Nielsen Norman Group）。
Sources
- Shopify Help Center — Drop-down menus: https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
- Shopify Help Center — Menus and links: https://help.shopify.com/en/manual/online-store/menus-and-links
- Shopify Help Center — Updating themes: https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
- Shopify Developer Documentation — Link Liquid object: https://shopify.dev/docs/api/liquid/objects/link
- Shopify Developer Documentation — Theme app extensions: https://shopify.dev/docs/apps/build/online-store/theme-app-extensions
- Nielsen Norman Group — Mega Menus Work Well: https://www.nngroup.com/articles/mega-menus-work-well/
- Nielsen Norman Group — Hamburger Menus and Hidden Navigation: https://www.nngroup.com/articles/hamburger-menus/
- Baymard Institute — Navigation Menu Usability: https://baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
- W3C Web Accessibility Initiative — Contrast Minimum (WCAG 2.2): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- W3C Web Accessibility Initiative — Flyout Menus Tutorial: https://www.w3.org/WAI/tutorials/menus/flyout/
- Shopify App Store — Navi+ Navigation Design: https://apps.shopify.com/pronavi-navigation-design
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。