Shopifyストアのテーマに合わせてナビゲーションメニューを統一する方法（カラー、フォント、モバイルメニュー）

ナビゲーションメニューは、ストアに後から無理やり付け足したような違和感を与えてはなりません。訪問者が商品コレクションを閲覧するとき、メニューリンクのタイポグラフィ、色彩、余白、角の丸みは、ストア全体のデザインと滑らかに溶け込んでいる必要があります。しかし、多くのShopifyマーチャントが「トップページのバナーは洗練されているのに、メニューだけが浮いて見える」という悩みに直面しています。一般的なシステムフォントのままだったり、背景色が微妙に合っていなかったり、角張った枠線や未調整のモバイルドロワーが目立ったりする現象です。

その基本原則は極めてシンプルです。メニューがテーマと調和するとは、テーマが既に使用している値をそのまま再利用することを意味します。新しいカラーコードを思いつきで選んだり、別のフォントを当てずっぽうに指定したりするのではなく、まずテーマのデザイントークンを読み取ってシートに書き出し、その値をデスクトップヘッダー、モバイルドロワー、外部アプリのメニューへと一貫して適用します。

Quick Answer: How to Match a Navigation Menu to Your Store Theme

テーマにメニューを合わせるには、新しい値を選ぶのではなく、テーマがすでに使っている値（カラースキーム、フォント、角丸、余白）をそのまま使います。まずヘッダー設定で適用し、残った差は複製したテーマ上の短いカスタムCSSで埋め、モバイルドロワーも確認してください。

完全な視覚的調和を実現するための5つの手順は以下の通りです：

1. テーマのデザイントークンを読み取る： テーマ設定を確認し、アクティブな配色、フォントファミリー、ボタンの角丸（px値）を把握します。
2. テーマ標準のヘッダー設定を活用する： 正しいメニューを割り当て、対応するカラースキームを選択し、レイアウト機能を確認します。
3. テーマ変数を使ったCSSで微差を埋める： ヘッダーセクションに固定値ではなくテーマ変数を参照する短いCSSを追加します。
4. モバイルドロワーメニューを合わせる： スライド式ドロワーの背景、リンク文字色、区切り線、ハンバーガーアイコンを統一します。
5. アプリで追加したメニューを同期する： ボトムタブバーやメガメニューアプリの設定画面に、控えておいたテーマの値を入力します。

なお、グローバルなテーマ設定で行った変更はオンラインストア全体に反映されるため、ナビゲーションメニュー単体のみを変更したい場合は、セクション単位のカスタムCSSや専用アプリの個別設定が必要となります。

What “Matching Your Theme” Means: The Theme Match Sheet

視覚的な統一感は、ストアを完成度の高いものに見せてくれます。メニューデザインとブランドアイデンティティのガイドでは、その背景にあるブランドの考え方を扱っています。本記事は、その実践的で技術的な部分にあたります。テーマに合致したメニューは、単に使いやすいだけでなく、ストアの一部として自然に馴染みます。

推測に頼らず確実に調和させるために、テーマ一致シート（Theme Match Sheet）を作成しましょう。この一覧表は、テーマが保持する7つの視覚要素を抽出し、メニューのどこに反映させるべきかを整理したものです：

このシートを適用する際は、次の4つの具体的行動に集中してください：

• Copy theme colors： ランダムな色味を選ぶのではなく、ヘッダーに指定されている正確なカラースキームを転記します。
• Reuse theme fonts： ストアの見出しや本文で採用されているフォントファミリーをメニュー項目へそのまま適用します。
• Match corner radius： ドロップダウン枠やバッジの角丸が、ストア内の主要ボタンと同じ曲線を描くように揃えます。
• Mobile menu match： カラースキーム、フォント、区切り線をスマホ用ドロワーへも波及させ、同一の体験を提供します。

Step 1: Read Your Theme’s Design Tokens

「デザイントークン」とは、カラー、フォント、余白、角丸などのデザイン上の決定事項に対して付けられた共通名称のことです。CSS内に直接カラーコードを書き散らす代わりに、名前を付けたトークンとして管理することで、デザインの一貫性を担保できます。Shopifyテーマからこれらのトークンを正しく拾い上げることが第一歩です。

Colors and color schemes

Shopify管理画面から オンラインストア > テーマ へ進み、カスタマイズ を開いて テーマ設定 を開きます。カラー パネルを開きます。

Shopifyテーマは Color scheme（カラースキーム）と呼ばれる仕組みで配色を管理しています。これは背景色、テキスト色、ボタン色をセットにしたプリセットです。Shopifyのテーマエディタでは最大21種類のカラースキームを登録・管理できます。ヘッダーセクションにどのカラースキームが割り当てられているかを確認し、背景と文字のカラーコードを控えます。

Fonts and text size

続いて テーマ設定 > タイポグラフィ を開きます。ここでは 見出し と 本文 に指定されているフォント名とウェイト（太さ）が確認できます。

これらを記録しておきましょう。Shopifyヘルプセンターにも明記されている通り、テーマ設定で行った変更はオンラインストア全体に適用されます。メニューの文字を変えようとしてここでフォントを変更すると、商品ページのタイトルや説明文まで一括で変わってしまいます。また、Shopifyのドキュメントでは、タイポグラフィにシステムフォントを検討することも提案されています。

Corner radius and spacing

テーマ設定内のボタン、カード、入力欄の設定も確認します。多くのテーマには角の丸みを調整する設定があり、Button radius と呼ばれることがありますが、正確な名称はテーマにより異なります。

ボタンの角がシャープなのか、わずかに丸いのか、完全なピル形状なのかを確認します。メニューのドロップダウン枠やバッジがこれと同じ曲率を持っていれば、メニュー全体が自然に馴染みます。さらに、ボタンやセクション周りの余白を見て、リンク間隔をコンパクトにするか、ゆったり取るかを検討します。

Reading CSS variables in your browser

テーマがこれらの値を内部でどのように保持しているかを調べるには、ブラウザの開発者ツールを開きます：

1. Chrome、Firefox、Safariなどでストアの公開画面またはプレビューを開きます。
2. ナビゲーションヘッダーを右クリックして 検証（Inspect）を選択します。
3. <html> または <body> タグを選択し、Styles パネルを確認します。

Dawnをはじめとする近年のShopifyテーマは、エディタでの設定値を theme.liquid 内でCSS変数として宣言しています。例えばDawnでは以下のような変数が定義されています：

• --font-body-family：本文に指定されたフォント
• --font-heading-family：見出しに指定されたフォント
• --color-foreground：現在の文字色。赤・緑・青の数値で保存されているため、rgb(var(--color-foreground)) の形で使います
• --buttons-radius：テーマ設定から渡されたボタンの角丸値

このように Color scheme、Typography、Button radius のトークンを特定すれば、数値をベタ書きせずにテーマの設計をそのまま活かせます。変数の名称はテーマによって異なるため、DevToolsで必ず実物を確認してください。

Concept illustration: カラースキーム、タイポグラフィ、ボタン角丸をメニューに反映するためのテーマ設定とテーマ一致シートの対比。

Step 2: Use the Header Settings Your Theme Already Has

独自コードを書いたり外部アプリを導入したりする前に、Shopifyテーマのヘッダーセクションに備わっている標準機能を徹底的に活用しましょう。

Connecting your menu and color scheme

1. テーマエディタで ヘッダー セクションを開きます。
2. メニューの設定項目（名称はテーマにより異なります）で、表示したいナビゲーションリストが選ばれているか確認します。メニューの作成自体は オンラインストア > ナビゲーション で行い、最大3階層までリンクを入れ子構造にできます。
3. ヘッダーの設定にあるカラースキーム項目（名称はテーマにより異なります）を探し、先ほど控えたスキームを割り当てます。
4. プレビューで確認します。テーマによっては、ヘッダーとメニューがそのスキームの背景色と文字色を引き継ぎます。

Evaluating header menu layouts

Shopifyテーマには複数のレイアウト形式が用意されています。Shopifyの公式ドキュメントによると、メインメニューやドロップダウンメニューの表示位置はテーマによって異なり、最上位の項目には最大2階層のネストされたドロップダウンを設けることができます。

テーマに応じて以下の設定が可能です：

• メニューの種類： 通常のドロップダウン、複数列のメガメニュー、スライド式ドロワー
• デスクトップ上の配置： 左上配置、ロゴ中央配置、検索バーとのインライン配置
• 固定ヘッダー（Sticky）： ページスクロール時にもメニューバーを上部に固定表示

Native customizer boundaries

標準機能は手軽ですが、一定の制限が存在します：

• 設定項目の名称や調整幅はテーマごとに異なり、リンク間隔を細かく変えられるテーマもあれば、一切変更できないテーマもあります。
• テーマ設定のフォント設定は全ページ共通であるため、標準の設定項目だけでメニューリンクのフォントのみを個別に切り替えることはできません。

標準機能だけでテーマ一致シートの要件を満たせない場合に、次のステップであるCSSの追記へ進みます。

Step 3: Close the Gaps with Custom CSS That Reuses Theme Variables

カスタムCSSを活用すれば、テーマのLiquidテンプレートを破損することなく外観を微調整できます。保守性を保つためには、短く堅牢なコードを書くことが大切です。

Duplicate the theme first

CSSを追加する前には、必ずテーマのバックアップコピーを作成してください。

Shopifyヘルプセンターのテーマ複製ガイドでも、変更をいつでも破棄してやり直せるように複製を作っておくことが推奨されています。管理画面の オンラインストア > テーマ で、使用中テーマの横にあるアクションメニューを開き、複製 を選びます。作業はこの複製版で行い、確認が取れてから公開します。

Where custom CSS goes and its limits

Shopifyエディタには、ソースファイルを直接編集せずにCSSを注入できる箇所が2つあります：

1. テーマ全体のカスタムCSS： テーマ設定 > カスタムCSS にあり、サイト全体に影響します。
2. セクション別のカスタムCSS： セクションのプロパティパネルの最下部にある カスタムCSS です（例：ヘッダー セクション）。

Shopifyが定めている文字数制限に注意してください：

• テーマ全体のCSSルールは最大1500文字に制限されています。
• 特定セクションのCSSルールは最大500文字に制限されています。
• セクションにCSSを追加した場合、その効果はそのセクションの要素内に自動的に限定（スコープ）されます。
• テーマ全体のカスタムCSSはチェックアウト画面には適用されません。

メニューはヘッダー内に収まっているため、ヘッダーセクション内のカスタムCSS入力欄に短いルールを記述するのが最も安全で簡潔です。

Use var() instead of hard-coded values

CSS内に直接カラーコードやフォント名をハードコードするのは避けましょう。この書き方をすると、後でブランドカラーやフォントを変更した際にメニューだけが取り残されてしまいます。MDNの仕様通り、テーマのCSS変数を var() 関数で呼び出します：

.header__menu-item {
  font-family: var(--font-heading-family);
  color: rgb(var(--color-foreground));
}

（注：上記クラス名と変数名はDawnのものです。お使いのテーマの名称はDevToolsで確認してください）。

var(--font-heading-family) や rgb(var(--color-foreground)) を利用すれば、テーマ設定側で見出しフォントや色を変更した際にもメニューがテーマに追従します。元に戻す際は、コードを削除するか複製テーマを復元するだけで完了します。

Step 4: Make the Mobile Menu Match, Not Just the Desktop Menu

デスクトップ表示を入念に作り込んでも、モバイル側のドロワーメニューが手付かずで不格好なまま放置されているケースはよくある間違いです。

Why mobile drawers diverge

多くのShopifyテーマにおいて、デスクトップ用とモバイル用のナビゲーションは同じHTML構造を持っていません。デスクトップではヘッダー内に横並びで配置されることが多く、モバイルでは画面外からスライドして現れるドロワーやオーバーレイ内に生成されます。

モバイルドロワーは独立した要素であることが多いため、デスクトップ用に書いたCSSがドロワー内部に届かない場合があります。さらに、ハンバーガーアイコンの色はヘッダーの文字色を継承することが多いので、ドロワー自体には独自の背景、文字、区切り線のスタイルが必要になることがあります。

Aligning drawer styling

スマホユーザーに対しても一貫した印象を与えるため、ドロワー内で以下の点を確認します：

• Same font family： ドロワー内のリンクは、デスクトップヘッダーと同じフォントを使用します。
• Same text color： カテゴリ名や下層リンクは、ヘッダーのテキスト色に合わせます。
• Same divider style： メニュー項目を区切る横線は、商品カードの繊細な枠線と同じ色味に整えます。

Nielsen Norman Groupのユーザビリティ調査（Pernice & Budiu, 2016）によると、ハンバーガーメニューのような隠蔽型ナビゲーションは、可視化されたナビゲーションに比べて発見されにくいことが実証されています。タップして初めて現れる仕組みだからこそ、トリガーとなるアイコンや開いたドロワーの質感は、ブランドと完全に調和していなければなりません。

モバイル階層の整理に関する詳しい設計指針は、モバイルドロワーメニューのベストプラクティス をご参照ください。確認の際は、PCのエミュレータだけでなく実機のスマートフォンで必ずテストしてください。

Concept illustration: テーマのフォントファミリー、文字色、区切り線スタイルを統一したデスクトップヘッダーとモバイルドロワー。

Step 5: Match a Menu Added by an App (Tab Bar, Mobile Menu, Mega Menu)

商品のラインナップが増えて標準のドロップダウンでは収まらなくなった場合、Shopifyアプリを使って固定ボトムタブバー、多列メガメニュー、フローティングボタンなどを追加することがあります。

アプリのメニューはテーマとは別にストアへ追加されるため、テーマの色やフォントの設定を自動的には引き継がない場合があります。初期状態のままでは、ストアの他の部分と見た目が揃わないことがあります。

Applying your theme match sheet to app settings

あらかじめ作成しておいたテーマ一致シートを参照し、アプリの設定画面に入力していきます：

1. タイポグラフィ： テーマの見出しや本文で使用されているフォント名とウェイトを選択します。
2. カラー： ヘッダーのカラースキームから取得したHEXコードを、背景、文字、アクティブ時の強調色に割り当てます。
3. 角丸： メニューバーやボタンの角丸スライダーを、テーマのボタン角丸と同じ数値に合わせます。
4. 区切り線： 境界線の太さや色を、商品カードの枠線と揃えます。

Keeping custom CSS inside the app

アプリメニューにCSSでの微調整が必要な場合は、テーマファイルに書き込むのではなく、アプリ管理画面内のカスタムCSS入力欄を使用します。

アプリがCSSをテーマファイルの外に保存する場合、テーマをアップデートしたり別テーマへ移行したりしても、その装飾は消えません。頼りにする前に、お使いのアプリがどう扱うか確認してください。

アプリを使ったナビゲーション設計の基礎は、メニュービルダーアプリの導入手順 をご確認ください。

Common Mismatches and How to Fix Them

メニュー外観の点検時には、以下の診断表を活用して原因の特定と修正を迅速に行ってください：

Trade-offs: When Not to Restyle the Menu

外観のブラッシュアップは不可欠ですが、デザイン変更が常に最善の解決策とは限りません：

カタログの構造的な欠陥

階層構造が複雑すぎたりリンクが過剰に詰め込まれていたりして顧客が商品を見つけられない場合、フォントや色を変えても根本的な解決にはなりません。表面的なデザインで情報設計の不備を隠すことは不可能です。Shopifyテーマメニューの制限 を確認し、装飾の前にコレクション構造自体の見直しが必要かどうかを判断してください。

テーマ内CSSの保守負担と文字数制限

テーマ内に直接CSSを書き込むと技術的負債になりがちです。テーマ全体CSSは1500文字、セクションCSSは500文字の制限があるため、複雑なコードはすぐに上限へ達します。また、テーマのメジャーアップデートのたびに手動での再移植が必要になります。

全体タイポグラフィへの波及

メニューのためだけにテーマ設定のフォントを変更すると、全商品のカードタイトルや本文まで影響を受けます。Shopifyのドキュメントではシステムフォントの検討が提案されているため、メニューのリンク専用に別のフォントを追加するかどうかは、慎重に考える価値があります。

Where Navi+ Fits

お使いのShopifyテーマが、モバイルのタブバー、複数列のメガメニュー、専用モバイルドロワー、アイコンメニュー、フローティングボタンなどの高度なナビゲーションを備えていない場合、Navi+ にはそれらを構築するための専用ツールが用意されています。

Navi+の管理画面にある Design タブでは、背景色、タイポグラフィ（フォント選択および文字サイズ）、アイコン・画像の設定を直感的に行えます。テーマ一致シートに控えた値をそのまま管理画面に反映できます。

さらに、Navi+は独立したカスタムCSS編集機能を備えており、各ルールにはメニューごとのプレフィックスが自動付与され、Shopifyテーマファイルとは完全に切り離して保存されます。そのため、テーマのバージョンアップや別テーマへの乗り換えを行っても、メニューのデザインが初期化されることはありません。

導入に際しては、以下の仕様と境界をご確認ください：

• Navi+メニューは最大3階層までのネストに対応しています。
• Designタブの標準コントローラーで直接装飾できるのは上位2階層までです。
• 第2階層・第3階層で個別のフォントサイズやアイコンサイズを指定したい場合は、アプリ内のカスタムCSS入力欄に短いコードを追記します。

If your theme doesn’t have the menu type you need, such as a bottom Tab Bar or a mega menu, Navi+ lets you build one and set its fonts and colors from your theme match sheet in the Design tab — you can try it on a duplicate theme first.

Action Checklist Before You Publish

変更をストアへ公開する前に、以下の10項目を確認してください：

• テーマの複製を作成した： トラブル時にすぐ復元できるよう、アクティブなテーマのバックアップを取った。
• テーマ一致シートを記入した： 配色、フォントファミリー、太さ、ボタン角丸の数値をすべてメモした。
• ヘッダーのカラースキームを指定した： テーマエディタのヘッダーセクションで正しいカラースキームが選択されている。
• フォントファミリーを統一した： メニューリンクがテーマ設定の見出しまたは本文のフォントと一致している。
• WCAGコントラストを確認した： 文字と背景のコントラスト比が通常文字で4.5:1以上、大文字で3:1以上確保されている。
• 角の丸みを揃えた： ドロップダウン枠やバッジ、ボタンの丸みがストアのボタン角丸と揃っている。
• ホバーとフォーカス表示を点検した： マウス通過時の視覚変化とキーボード操作時のフォーカス枠を確認した。
• 実機スマホでドロワーを検証した： ハンバーガーアイコン、ドロワー背景、区切り線、タッチ反応を実機で確かめた。
• アプリメニューを同期した： タブバーやメガメニューの設定画面にテーマ一致シートの数値を反映した。
• CSSを安全かつ簡潔に保った： 文字数制限（500/1500文字）に収め、var() でテーマ変数を参照している。

FAQ

Can I change only the menu font without changing my whole store’s font?

テーマ設定のタイポグラフィはストア全体に適用されます。メニューのフォントだけを変更したい場合は、テーマエディタのヘッダーセクションにスコープを限定したカスタムCSSを追加するか、専用メニューアプリの設定画面でフォントを指定してください。

Where do I add custom CSS in Shopify?

テーマエディタ内で、テーマ全体用（上限1500文字）またはヘッダーなどの特定セクション用（上限500文字）のカスタムCSS入力欄に追加できます。セクションCSSはその枠内のみに適用され、テーマ全体のCSSもチェックアウト画面には適用されません。

Why does my mobile menu look different from my desktop menu?

テーマは通常、モバイルドロワーをデスクトップとは独立したHTML要素として構築するため、PC用CSSが届かないことがあります。ハンバーガーアイコンは文字色を継承しても、ドロワー内部の背景やフォントは個別に設定する必要があります。

How do I keep my menu matching after I change theme colors later?

数値を直接書くのではなく、var(--font-heading-family) や var(--font-body-family) のように var() 関数でテーマ変数を参照してください。そうすれば、後からテーマ設定を変更してもメニューがそれに追従します。

What contrast should menu text have?

ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG 2.1）に基づき、メニューの文字色は背景に対して通常テキストで最低4.5:1以上、大きめのテキストで最低3:1以上のコントラスト比を維持する必要があります。

Should I edit CSS or use an app?

まずはテーマ標準のヘッダー設定を使い、軽微な調整には短いCSSを活用してください。モバイルのタブバーや本格的なメガメニューなど、テーマが対応していない形式が必要な場合はメニューアプリを利用し、そのアプリがスタイルをテーマファイルの外に保持していて、テーマ変更後も残るかどうかを確認してください。

Sources

• Shopify Help Center: Customizing Theme Settings
• Shopify Help Center: Adding Custom CSS to Your Theme
• Shopify Help Center: Duplicating Themes
• Shopify Help Center: Set up Drop-Down Menus in Your Online Store
• Shopify Developer Documentation: Navigation and Search Architecture
• W3C Web Accessibility Initiative: WCAG 2.1 Understanding Contrast (Minimum)
• MDN Web Docs: Using CSS Custom Properties (Variables)
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Pernice & Budiu, 2016)
• Shopify Dawn Theme Repository: theme.liquid layout configuration
• Navi+ Help Center: Using Built-in Settings or Custom CSS
• Fudge: How to Change the Mobile Menu in Shopify