Shopifyでヘッダーメニューのレイアウトをカスタマイズする方法（テーマ設定・ドロップダウン・メガメニュー）

Quick Answer: How to Customize the Header Menu Layout in Shopify

Open Online Store > Themes > Customize and select the Header section. There you can change the logo position, pick which menu appears, and (in themes like Dawn) choose a menu type: Dropdown, Mega menu, or Drawer. Build the menu itself in Content > Menus.

ヘッダーメニューのレイアウトをステップ順にカスタマイズする手順：

1. テーマ設定を開く：Shopify管理画面で「オンラインストア > テーマ > カスタマイズ」へ進み、左側サイドバーで「ヘッダー（Header）」セクションを選択します。
2. ロゴ位置とレイアウトを設定する：「Logo position」設定を調整し、ロゴをメニューと同じ行の左側に置くか、メニューの上部中央に置くかを選択します（テーマによって設定項目の名称は異なります。DawnではLogo positionです）。
3. メニューの割り当てと階層化を行う：「コンテンツ > メニュー」で最大2階層のサブメニューを作成し、「ヘッダー > メニュー」に紐付けます。
4. メニュー形式を選びモバイル表示を確認する：「Menu type」でDropdown、Mega menu、またはDrawerを選択し、「Mobile logo position」でスマートフォンの表示を整えます。

What “Header Menu Layout” Means in Shopify

Shopifyマーチャントがヘッダーメニューのレイアウト変更について考える際、単一の設定項目だけで完結することはほぼありません。Shopifyのヘッダーレイアウトは、以下の4つの層が連携することで成り立っています：

1. ブランド識別と配置（Logo position）：ナビゲーションリンク、検索バー、カートアイコンに対するロゴの相対的な位置を決めます。
2. 割り当てられたメニュー（表示するメニューの選定）：管理画面で作成されたどのリンク構造をヘッダーセクションに接続するかを指定します。
3. 構造階層とメニュー形式（メニュー深度と表示方法）：デスクトップ上でサブカテゴリーがどのように開くか（単一列のドロップダウン、幅広の複数列メガメニュー、非表示ドロワー）を制御します。
4. モバイル表示ルール（モバイルレイアウトとドロワー動作）：タッチ画面上でアイコンやロゴがどのように配置され、横からスライドするメニューがどう展開するかを定めます。

Shopifyの公式ドキュメントによれば、大半のテーマにおけるデフォルトのメインメニュー変更はテーマのヘッダーセクション設定内で行います。ただし、リンク自体や親子の階層関係は「コンテンツ > メニュー」で構築します。この管理画面では、最上位の項目に対して最大2階層のサブメニューをネストでき、全体で最大3階層の構造を作成できます。

テーマによって設定項目の名称や実装は異なるため、本ガイドではShopifyの基準テーマであるDawnを例として解説します。他テーマにおける構造やラップトップ画面での折り返し挙動については、ヘッダーレイアウトモデルとブレークポイントの詳細解説をご参照ください。

Step 1: Change the Logo and Menu Position in the Theme Editor

ヘッダーレイアウトの最初の物理層は、ロゴとナビゲーションリンクの位置関係です。Shopifyでの設定手順は次の通りです：

1. Shopify管理画面にログインします。
2. 「オンラインストア > テーマ」に進みます。
3. 対象のテーマの「カスタマイズ」をクリックします。
4. 左側のセクション一覧から「ヘッダー」を選択します。

Dawnテーマでは、「Logo position」という設定項目があり、主に4つの選択肢が用意されています：

• Middle left：ロゴを左側に配置し、メインメニュー項目と同じ水平行に並べます。縦幅を抑えた標準的な配置です。
• Top left：ロゴを左上に配置し、ナビゲーションメニューをその直下の専用行に配置します。
• Top center：ロゴを中央上部に大きく配置し、その直下にナビゲーションメニューを中央揃えで配置します。ロゴを中央にし、メニューをその下に置きたい場合はこの設定を選びます。
• Middle center：ロゴを中央に配置し、メニューを左側、ヘッダーのアイコンを右側に配置します。

これらはDawnにおける設定名であり、他のテーマでは名称や選べる配置が異なります。テーマによってはロゴとメニューのアライメントが別々の項目に分かれている場合や、レイアウトが固定されている場合があります。テーマに希望する配置項目がない場合は、後述のコード編集やアプリの判断基準をご覧ください。

Step 2: Choose the Header Menu and Build Nested Links

いくらヘッダーの配置を変更しても、接続されているメニューが違ったり階層化ができていなければドロップダウンは機能しません。Shopifyでは、メニューは管理画面で作成し、テーマ側で読み込みます。

メニューの作成と割り当て手順：

1. Shopify管理画面の「コンテンツ > メニュー」を開きます（Shopifyヘルプ参照）。
2. 「メインメニュー」を選択します（または新規作成します）。
3. 最上位階層として主要カテゴリーを追加します。
4. サブメニューを作成するには、子項目を親項目の直下で右側にドラッグし、インデントが表示されたらドロップします。
5. 「メニューを保存」をクリックします。

Shopifyの仕様では、最上位の項目に対して最大2階層のサブメニューをネストでき（合計3階層まで対応）、すべてのテーマがネストされた項目をドロップダウンメニューとして表示するように設計されています。

保存完了後、「オンラインストア > テーマ > カスタマイズ」に戻り、ヘッダーセクションの「メニュー」設定で作成したメニューを選択して保存します。ドラッグ操作のコツやエラー防止については、ナビゲーションメニューにサブメニューを追加する方法で詳しく解説しています。

Step 3: Pick Dropdown, Mega Menu, or Drawer

ネストされたリンクを割り当てたら、デスクトップ画面でそれらをどのように展開させるかを決定します。Dawnのヘッダー設定内にある「Menu type」には、以下の3つの選択肢があります（ラベルはテーマによって異なります）：

図1：コンセプトイラスト（Concept illustration）— Step 3: Pick Dropdown, Mega Menu, or Drawer

ニールセン・ノーマン・グループ（NN/g）の調査によると、メガメニューは「多数の選択肢を収容するための極めて優れたデザイン手法」と評価されています。NN/gは、メガメニューが一目で全体を提示するため、一般的な見出しの奥を推測させることなく視覚的に導線を認知させられると指摘しています。

一方、Dawnで Drawer を選ぶ（Dawnの header.liquid にある section.settings.menu_type_desktop == 'drawer' の条件で制御）と、デスクトップでは横並びのリンクがメニューボタンの奥に隠れます。見た目はすっきりしますが、現実的なトレードオフがあります。NN/gの2016年の調査では、サイトのメインナビゲーションを隠すと、見つけやすさがほぼ半分に低下すると報告されています。商品数が多いストアでは、ドロワーはモバイルに限り、デスクトップでは開いたメニュー構成を使いましょう。バランスの取れたリンク列・見出し・ビジュアルタイルの設計については、メガメニューのベストプラクティス のガイドをご覧ください。

Show Menu Links Directly in the Header Instead of a Dropdown

よくある疑問として（Shopify CommunityのSenseテーマに関するスレッドにもあります）、ドロップダウンを使わずにトップレベルのリンクをヘッダー上にそのまま並べるにはどうすればよいか、というものがあります。

Shopifyにおいて、ドロップダウンの有無はテーマの切り替えスイッチではなく、リンクの階層構造によって決まります。Shopifyヘルプに記載の通り、すべてのテーマはネストされた項目をドロップダウンとして描画します。つまり、「コンテンツ > メニュー」で親項目の下に字下げされた子項目が存在する場合、テーマは自動的にドロップダウンコンテナを生成します。

ヘッダー上にリンクを直接フラットに配置する手順：

1. Shopify管理画面で「コンテンツ > メニュー」を開きます。
2. ヘッダーに割り当てているメニューを選択します。
3. 項目リストを確認し、字下げされている項目を左側へドラッグして最上位の行と揃えます。
4. すべてのリンクがルート階層にある状態にします。
5. 「メニューを保存」をクリックします。

これにより、ストアフロントのヘッダーバー上にドロップダウンなしで項目が直接横並びに表示されます。

表示幅の制約にも注意してください。NN/gは、トップレベルのナビゲーションリンクが4つ以下なら、見えるリンクとして表示することを勧めています。トップレベルのリンクが多いと、行が2行に折り返したり、幅の狭いノートPCでロゴと干渉したりすることがあるため、複数の幅でプレビューしましょう。行き先が多い場合は、メインバーに詰め込まず、メガメニューなどで親見出しの下にまとめます。

Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

デスクトップのモニターでバランスよく見えるヘッダーメニューのレイアウトも、スマートフォンでは簡単に崩れることがあります。モバイルは画面スペースが限られるため、テーマはモバイル専用のレスポンシブレイアウトでナビゲーションを扱います。

図2：コンセプトイラスト（Concept illustration）— Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Dawnのヘッダー設定には、「Mobile logo position」というモバイル専用のロゴ配置設定があります：

• Center：モバイルのヘッダーバーでロゴを中央に配置します。
• Left：モバイルのヘッダーバーでロゴを左側に揃えます。

ラベルはテーマによって異なります。たとえばStilettoのようなサードパーティテーマでは、モバイルメニューはHeaderセクション内の設定を使います。多くのテーマでは、モバイルのナビゲーションリンクはハンバーガーアイコンをタップして開くスライドアウト式のドロワーにまとめられます。

ただし、隠れたハンバーガードロワーだけに頼ることには代償があります。Nielsen Norman Groupの2016年の調査では、サイトのメインナビゲーションを隠すと、見つけやすさがほぼ半分に低下すると報告されています。

隠れたドロワーは商品数の多いストアでは今も有効ですが、親指が届く位置に固定の下部タブバー（例：Home、Shop、Search、Cart）を置いて主要ページを常に見せ、より深いカテゴリはドロワーに任せることもできます。画面ごとに独立したリンク構成を設定するには、デスクトップ用とモバイル用のメニューを分ける方法 のチュートリアルをご覧ください。

When Your Theme Runs Out of Options: Code Edits vs a Menu App

メガメニューの列数を5列に増やしたい、中央ロゴの左右にメニューを分割配置したい、モバイルドロワー内にプロモーションバナーを挿入したいなど、テーマ標準のカスタマイザーでは実現できない要件が生じることがあります。この場合、Liquidコードの改修か、専用アプリの導入を検討することになります。

Before you edit code: duplicate the theme

テーマファイル（sections/header.liquidやCSSなど）のコードを直接変更する場合は、決して稼働中の本番テーマを直接編集しないでください。Shopifyの公式ドキュメントでは、ミスがあった際に元に戻せるよう、事前にバックアップ用の複製を作成することを強く推奨しています。

安全なテーマ複製の実行手順：

1. Shopify管理画面で「オンラインストア > テーマ」を開きます。
2. 現在のテーマを探し、そのアクションメニューを開いて Duplicate を選択します。
3. 複製したテーマにコード検証用であることが分かる名前を付けます。
4. すべての編集とプレビュー検証は、本番公開前にこの複製テーマ内で行います。

The hidden cost of custom theme edits

コードを直接編集すると、継続的なメンテナンスが必要になります。Shopifyのドキュメントは、テーマを更新すると、加えたコード変更が更新後のコピーから削除される場合があると警告しています。配置・CSSメディアクエリ・ドロワーのアニメーションを変えるために header.liquid を書き換えた場合は、テーマを更新するたびに編集内容を確認し、再適用する前提で進めてください。

レイアウトの要件が標準設定を超える場合は、より複雑なナビゲーション向けに作られたテーマや、テーマと並行して動作するアプリを検討できます。

Common Header Menu Problems and Fixes

ヘッダーレイアウトの調整時によく起きるトラブルと、その診断・対処法は以下の通りです：

Trade-offs: When Not to Change Your Header Layout

ヘッダーレイアウトの再設計は、常に最善とは限りません。レイアウト変更を行う前に、以下のトレードオフを検討してください：

• 小規模なカタログにメガメニューは不要：カテゴリが数個のシンプルなストアでは、幅広いメガメニューのパネルは余白が多すぎる場合があります。1列のドロップダウンや、フラットなリンクの横並びで足りることが多いです。
• デスクトップのドロワーはナビゲーションの見えやすさを下げる：デスクトップで Drawer を選ぶとすっきり見えますが、NN/gの2016年の調査では、メインナビゲーションを隠すと見つけやすさがほぼ半分に低下すると報告されています。ページ上のストーリーで商品を見つけてもらうストアに限りましょう。
• カスタムLiquid編集はアップデート時の作業を生む：Shopifyのドキュメントによると、header.liquid の編集やカスタムCSSは、テーマを更新すると失われる場合があります。バージョンをまたいで編集を維持できる人がいない場合は、標準のテーマ設定かアプリを優先しましょう。
• アプリの導入は管理工数を増やす：外部ツールを追加すると、設定・管理すべきダッシュボードが1つ増えます。テーマの標準機能でカタログを問題なく整理できるのであれば、無理に追加する必要はありません。

Where Navi+ Fits

テーマ標準のヘッダー設定が限界に達したとき、Navi+ はテーマと並べてナビゲーション機能を追加する方法のひとつです。

メニューはNavi+アプリで作成し、テーマエディタでアプリ埋め込み（app embed）として有効化します。メニューはブラウザ上で、テーマ自身のヘッダーの隣に描画されるため、header.liquid を編集する必要はありません：

• Desktop Mega Menu：列・画像・注目リンクを備えたリッチなドロップダウンを表示します。
• Mobile Menu：ページを離れずにナビゲーション全体を表示する、スライドイン式のモバイルメニューです。
• Tab Bar：親指が届く位置に主要な行き先をいくつか保つ、モバイル向けの固定下部タブバーです。

Navi+ のメニューも最大3階層までです。カタログに合うメニュータイプを決めるには、Shopifyに適したメニュータイプの選び方 をご覧ください。

If your theme’s Header section stops at a basic dropdown, Navi+ lets you add a Desktop Mega Menu, a Mobile Menu, or a bottom Tab Bar alongside your theme — try it on a duplicate theme first and keep what works.

Action Checklist

ヘッダーメニューレイアウトを調整する際は、以下の8項目のチェックリストに沿って作業と検証を進めてください：

• テーマの複製を作成する：重要な設定変更の前に、「オンラインストア > テーマ」で必ずバックアップ用の複製を作成します。
• ロゴの配置を設定する：「カスタマイズ > ヘッダー」で最適なLogo position（Top centerやMiddle leftなど）を選択します（設定名はテーマにより異なります）。
• メニュー構造を構築する：「コンテンツ > メニュー」で項目をドラッグして階層化します（最上位項目の下に最大2階層まで）。
• ヘッダーにメニューを割り当てる：「ヘッダー > メニュー」に対象のメニューが正しく選択されていることを確認します。
• デスクトップのメニュー形式を選ぶ：商品数に応じてDropdown、Mega menu、Drawerの中から適切なものを設定します。
• モバイル表示のアライメントを確認する：スマホ実機で表示を確認し、「Mobile logo position」を設定します。
• タップ操作の快適性を検証する：モバイルドロワーの操作感を点検し、主要ページへの固定タブバーの必要性を検討します。
• 各画面幅での折り返しを点検する：デスクトップ、ラップトップ、タブレットの各サイズでリンクが不自然に改行されていないか確認します。

FAQ

How many levels can a Shopify header menu have?

Shopifyのメニューでは、最上位の項目に対して最大2階層のサブメニューをネストでき、全体で最大3階層の構造を作成できます。

How do I make a dropdown in the Shopify header?

Shopify管理画面の「コンテンツ > メニュー」で対象メニューを開き、親項目の直下で子項目を右側にドラッグしてインデントさせてから保存します。

How do I put the logo in the center with the menu below?

Dawnテーマのヘッダー設定で、「Logo position」を「Top center」に設定します。これによりロゴが中央上部に配置され、メニューがその直下に配置されます（テーマによって名称は異なります）。

Can I show menu links in the header instead of a dropdown?

はい。Shopifyテーマは子項目を持つメニューを自動でドロップダウン化します。横並びのリンクとして表示するには、「コンテンツ > メニュー」ですべての項目を最上位階層に配置してください。

Can I change the menu layout only on mobile?

はい。Dawnではヘッダー内に「Mobile logo position」（CenterまたはLeft）の設定があります。モバイル用リンクは通常ドロワー内でデスクトップと共有されますが、テーマによっては個別のモバイル設定が存在します。

Should I edit header.liquid?

header.liquid を編集するのは、テーマの複製バックアップを作成した後だけにしてください。コードの変更は、新しいテーマバージョンに更新すると削除される場合があります。

Sources

• Shopify Help Center: Drop-down menus — メニュー階層制限、ヘッダーへの割り当て、管理画面の操作手順に関する公式ドキュメント。
• Shopify Help Center: Duplicating themes — コード編集前にテーマバックアップの作成を推奨する公式ガイダンス。
• Shopify Help Center: Editing theme code — テーマ更新時にカスタマイズコードが削除される仕様についての公式解説。
• Shopify Dawn GitHub Repository: en.default.schema.json — Logo position、Menu type、Mobile logo positionなどを定義するスキーマファイル。
• Shopify Dawn GitHub Repository: sections/header.liquid — デスクトップメニュー形式やドロワー制御を実装するテンプレートコード。
• Nielsen Norman Group: Mega Menus Work Well Anywhere Navigation Needs to Go — 大規模な選択肢を提示する際のメガメニューの有用性に関する調査。
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt Metrics (2016) — メインナビゲーションを非表示にすることで発見率がほぼ半減することを示すユーザビリティ研究。
• Fluorescent Theme Documentation: Stiletto Header — サードパーティ製テーマにおけるヘッダーおよびモバイルメニュー設定の仕様例。
• Shopify Community: How to change header-menu layout Sense theme — ドロップダウン枠を出さずにリンクを直接横並び配置するためのコミュニティディスカッション。