- 独立した5つの寸法：「メニューサイズ」は単一のスライダーではありません。文字サイズ、行の高さ、コンテナ幅、アイコンサイズ、そして実際のタップ可能領域の組み合わせです。
- タッチターゲットの基準：WCAG 2.2 AA基準に基づき、インタラクティブな要素は最低でも24×24 CSSピクセル（AAAでは44×44 CSSピクセル）を確保してください。
- 狭小画面での検証：文字の欠落を防ぐため、サイズ調整後は必ず幅320 CSSピクセルの画面で表示を確認する必要があります。
Quick Answer: How to Adjust Menu Size in a Navigation App
メニューのデザイン設定を開き、文字サイズ、項目の高さ、メニュー／ドロワーの幅、アイコンサイズ、タップ領域の余白の5つを個別に調整します。タップ領域は24×24 CSSピクセル以上を保ち、幅の狭いスマートフォンで確認し、設定が存在しない場合にのみカスタムCSSを使ってください。
コードを書かずにストアのメニューサイズを調整するには、次の5つのステップを実行します：
- メニュータイプを選択： ナビゲーションアプリを開き、調整したいレイアウト（画面下部タブバー、モバイルドロワー、デスクトップメガメニューなど）を選択します。
- 文字サイズを設定： 明確な視覚的階層を作るため、第1階層リンクと下位カテゴリのフォントサイズを個別に調整します。
- 行の高さを調整： 親指でタップしやすいよう、垂直方向のパディングを増やすか最小行高（
min-height）を設定します。 - 幅とアイコンを調整： 長いコレクション名が途切れないようドロワーやサブメニューの幅を広げ、アイコンサイズを整えます。
- 狭いスマートフォンでテスト： 実機または320 CSSピクセルの幅でメニューを確認し、可読性とタップのしやすさを検証します。
What “Menu Size” Actually Means: Five Dimensions
スマートフォンでメニューのバランスが崩れている場合、多くのストア運営者はサイズを一括で拡大縮小する単一のスライダーを探しがちです。しかしWebデザインにおいて、「メニューのサイズ」は1つの設定項目ではなく、5つの異なる幾何学的寸法の組み合わせです。
他の要素を調整せずに1つの寸法だけを変更すると、レイアウトが崩れてしまいます。例えば、ドロワーの幅を広げずに文字サイズだけを大きくすると、長いコレクション名が途切れたり不自然に折り返されたりします。また、行の高さを広げずにアイコンを拡大すると、ボタン同士が窮屈に詰まってしまいます。
| 寸法 | 制御する対象 | 変更する場所 | 注意点 |
|---|---|---|---|
| 文字サイズ | リンク表示の視認性と重み | メニューデザイン内のタイポグラフィ設定 | 幅を広げずに文字を拡大すると単語が途切れる |
| 行の高さ | メニュー項目間の垂直方向の間隔 | 最小高さ（min-height）または垂直パディング |
行が高すぎると重要リンクが画面外に押し出される |
| メニュー／ドロワー幅 | ドロワーやサブメニューの水平空間 | ドロワー幅またはサブメニュー幅の設定 | ドロワーが広すぎるとストア背景が完全に隠れる |
| アイコンサイズ | バーや行内のグラフィックシンボルの寸法 | デザイン設定内のアイコン寸法 | バーの高さを上げずに拡大すると垂直方向に圧迫 |
| タップ領域 | タップを認識する実際のアクティブ領域 | 要素サイズと周囲のパディングの合算 | パディングが狭い小さな要素は誤タップの原因に |
これらの測定値はCSSピクセル（px）で表されます。CSSピクセルは、Webブラウザが表示の一貫性を保つために使用する抽象的な単位です。高密度なスマートフォンの画面では、1つのCSSピクセルがデバイスの複数の物理ピクセルに対応します。
配色、フォントファミリー、ホバー時の挙動、ドロップシャドウのスタイルも変更したい場合は、メニューの色とフォントを変更する方法に関する詳細ガイドをご覧ください。
Why Theme Menus Often Look Too Small or Too Big on Mobile
多くのShopifyマーチャントが直面する疑問の一つは、ナビゲーション設定の管理場所が分かれていることです。
標準的なShopifyの管理画面では、メニュー項目やリンク構造は オンラインストア > ナビゲーション で管理されます。しかし、モバイルメニューの外観、文字スタイル、レスポンシブ配置は、ナビゲーション画面ではなくテーマエディタで設定されます（fudge.ai）。
Shopify 管理画面
├── オンラインストア > ナビゲーション --> リンク階層 & URL（コンテンツ）
└── オンラインストア > テーマ
└── テーマエディタ --> ヘッダー配置 & 外観スタイル（表示）
多くのShopifyテーマには、モバイルドロワーのサイズや行の高さを変える専用設定がないため、コミュニティフォーラムの回答はカスタムCSSのスニペットになりがちです。利用できる設定はテーマごとに異なるので、まずご自身のテーマエディタを確認してください。
また、デスクトップのヘッダーはモバイルのタッチ操作とは全く異なる振る舞いをします。横並びのリンクがハンバーガーメニューに格納されると、ノートPCで適切に見えていた文字サイズが、スマートフォンの画面では極端に小さく見えたり過度に巨大に見えたりします。詳しくは、Shopifyテーマメニューの限界に関する解説をご参照ください。
Adjust Tab Bar Size: Icon, Label and Bar Height
画面下部に固定されたタブバーは、主要な遷移先を親指の自然な可動域内に配置できるため、モバイルコマースで非常に有効なパターンです。しかし、バーが薄すぎたり要素が詰まりすぎていると、正確にタップすることが困難になります。
図1：コンセプトイラスト（Concept illustration）— Adjust Tab Bar Size: Icon, Label and Bar Height
ナビゲーションアプリでタブバーを調整する際は、次の3つの基本設定を連動させます：
- アイコンサイズ： ホーム、商品、検索、カートなどの各項目を表すベクターアイコンの大きさ。
- ラベルの文字サイズ： アイコンの下または横に配置される短いテキスト。
- バーの高さ： 画面最下部に固定されるコンテナ全体の垂直方向の高さ。
視認性を高めるためにアイコンを拡大する場合、バー全体の高さも同時に高くする必要があります。バーの高さを変えずにアイコンだけを大きくすると、アイコンとラベルがコンテナの上下の境界に押し付けられてしまいます。
ラベルは「ホーム」「検索」「カート」のように、極力短い単語に抑えてください。テキストが長すぎると、省略記号で途切れたり隣のタブと重なったりします。片手でストレスなく操作できるよう、十分なタップ領域を確保しましょう。親指操作のエルゴノミクスについては、タブバーと親指に優しいナビゲーションのガイドをご覧ください。
Adjust Mobile Menu (Drawer) Size: Text, Row Spacing and Width
スライドイン方式のドロワーメニューは、モバイルにおける標準的な形式です。縦並びのリスト形式でカタログを展開するため、フォント階層、行間、コンテナ幅のバランスが重要になります。
1. 階層別のテキストサイズ
すべての項目に同じフォントサイズを適用しないでください。主要なカテゴリ（第1階層）は視線を誘導するために大きめのフォントを設定し、サブカテゴリ（第2・第3階層）はインデントを付けつつ少し小さめの文字サイズに設定します。
2. 最小行高とパディングによる行間調整
リンク同士が近すぎると、隣の項目を誤ってタップしてしまいます。アプリ内の Min Height（最小行高）または垂直方向の Item Padding を活用してください。最小高さを設けることで、短い単語のリンクであっても十分なタップ領域が確保されます。
3. ドロワー幅（Drawer Width）
ドロワー幅は、メニュー展開時に画面を覆う水平スペースを決定します。幅が狭すぎると、文字数の多いコレクション名が2行や3行に不揃いに改行されてしまいます。
フォントサイズを大きくした場合は、長い名称が1行に収まるようにドロワー幅も広げてください。必ず幅320 CSSピクセルの小型画面で検証を行ってください（W3C Reflow）。ドロワー構造の詳細は、モバイルドロワーメニューのベストプラクティスで解説しています。
Adjust Mega Menu Size on Desktop and Mobile: Columns, Headings, Images
デスクトップのメガメニューは、多列展開のドロップダウンパネルで豊富な商品群を整理します。パネル幅、列配置、画像要素のバランスを適切に制御することが求められます。
単一列サブメニュー vs 複数列メガパネル
ナビゲーションアプリでは、単純なドロップダウンと広大なメガパネルの設定を区別して管理します：
- 単一列サブメニュー： Submenu Width 設定を使用してパネルの幅を指定します（サブメニュー幅の設定）。これにより、短い単語に合わせて縮みすぎたり、不自然に広がりすぎたりするのを防ぎます。
- フル展開パネル： 多くの部門列を持つメガメニューでは、各列間に十分な余白が生まれるよう全体の展開幅を調整します。
メガメニューの寸法設計
├── サブメニュー幅（単一列ドロップダウン）
├── フル展開幅（複数列カテゴリ配置）
├── 列の見出し（子リンクより一段大きな視覚的重み）
└── カテゴリ画像（レイアウト崩れを防ぐための適切な幅制限）
見出しと子リンクの階層構造
複数列のレイアウトでは、見出しが目次としての役割を果たします。列の見出しを子リンクよりも明確に大きく強調し、素早く流し読みできるように設計してください。
プロモーション画像のサイズ管理
メガメニューにはバナーや注目商品画像が配置されることがよくあります。画像は多くの水平スペースを消費するため、パネルが窮屈に感じられる場合は、メニューコンテナを不用意に広げる前にまず画像の幅を制限してください。
モバイル画面はデスクトップのパネルよりはるかに狭いため、デスクトップの寸法がそのまま通用すると考えず、メガメニューのモバイル版はデスクトップ版とは別に確認してください。
Pick a Size That Works for Thumbs: Tap Targets and Readability
メニューの寸法を視覚的な感覚だけで決めないでください。Webアクセシビリティの規格や人間工学の調査によって、タップ領域と可読性の実証済みの指標が定められています。
W3CのWeb Content Accessibility Guidelines（WCAG 2.2）における達成基準 2.5.8（ターゲットサイズ・最小、レベルAA）では、ポインター入力のタップターゲットを最低でも 24 by 24 CSS pixels にすることが求められています（W3C Target Size Minimum）。
タッチスクリーンでより快適な操作性を実現するための達成基準 2.5.5（ターゲットサイズ・拡張、レベルAAA）では、少なくとも 44 by 44 CSS pixels のサイズが推奨されています（W3C Target Size Enhanced）。主要な操作ボタンに関しては、周囲の余白に関わらずこの基準を満たすことが推奨されます。
Nielsen Norman Groupの調査でも、タップターゲットの物理的な最小サイズは約 1cm by 1cm (0.4in by 0.4in) であるべきだと示されています（NN/g Touch Target Size）。さらにNN/gは、インタラクティブ要素はまず「十分な大きさ」を備えている必要があり、その上で「適切な間隔」を空けるべきだと強調しています。小さすぎるボタンの周りに余白を足しても、根本的な押しにくさは解消されません。
また、拡大表示への対応も不可欠です。WCAG達成基準 1.4.4（テキストのサイズ変更）では、支援技術を用いずにテキストを最大 200 % まで拡大しても、コンテンツや機能が損なわれないことが求められます（W3C Resize Text）。アクセシビリティの全容は、ナビゲーションアクセシビリティガイドをご参照ください。
Test on a narrow screen and at larger text
適合性を維持するには小型端末でのテストが必要です。WCAG達成基準 1.4.10（リフロー）では、垂直スクロールコンテンツが 320 CSS pixels に相当する幅で横スクロールを発生させずに動作することが定められています（W3C Reflow）。
検証時のチェックポイント：
- ブラウザの開発者ツールを開き、ビューポート幅を320 CSSピクセルに設定します。
- モバイルドロワーとサブメニューを開き、文字が画面端で切れていないか確認します。
- テキスト拡大機能をオンにして、拡大時にも押しやすさと可読性が保たれているかをテストします。
When You Still Need Custom CSS (and How to Test It Safely)
大半のサイズ調整はナビゲーションアプリの管理画面で行えます。しかし、テーマのスタイルが強く干渉している場合や特殊な箇所の微調整には、カスタムCSSが必要になることがあります。
Shopifyのプラットフォーム仕様を事前に把握しておきましょう：
- テーマ全体への適用範囲： テーマ設定のカスタムCSS欄に入力したコードは、チェックアウト画面を除くオンラインストアのすべてのページに適用されます（Shopify Adding Custom CSS）。
- 文字数制限： Shopifyではテーマ全体のカスタムCSS入力が 1500 文字 に厳格に制限されています（Shopify Adding Custom CSS）。
- テーマの複製（バックアップ）： Shopifyは、コードの改変やCSS追加を行う前にテーマを複製することを強く推奨しています（Shopify Duplicating Themes）。バックアップがあれば、意図しない崩れが発生しても即座に元へ戻せます。
- テーマ固有のクラス名： CSSクラス名はテーマごとに大きく異なります。フォーラムに掲載されているコードを安易にコピーして貼り付けると、表示崩れやアプリとの干渉を引き起こす恐れがあります。
Shopifyテーマでのメニューフォントサイズ変更の手順については、以下の解説動画をご覧ください：
動画：Shopifyテーマにおけるメニューフォントサイズの変更手順の紹介。
Troubleshooting: Size Not Changing, Text Cut Off or Wrapping
メニューのサイズ調整時によく発生する3つの問題と、それぞれの解決策は以下の通りです：
1. サイズ変更がストアフロントに反映されない
- 編集対象の階層相違： 第1階層を編集したのか、下位の第2・第3階層を編集したのかを確認してください。第1階層の設定は、個別に設定されている下位階層には自動反映されません。
- プレビューモードの切り替え： モバイル向けとデスクトップ向けの設定が分かれている場合、デスクトップ用の数値を変更してもスマートフォンには反映されません。
- ブラウザのキャッシュ： スタイルシートのキャッシュが残っている可能性があります。シークレットウィンドウで確認してください。
- テーマCSSの優先順位： テーマ内のセレクタの詳細度が高い場合、アプリのスタイルが上書きされることがあります。開発者ツールで優先されているルールを調査してください。
2. メニューの文字が途切れる（Truncation）
W3Cのドキュメントが指摘するように、利用可能な水平空間に対して単語が長すぎる場合、文字が切り捨てられてしまいます（W3C Resize Text）。
対処法：
- コンテナ幅を広げる： ドロワー幅やサブメニュー幅を広げます。
- 文字サイズを微調整： フォントサイズを1〜2px縮小します。
- ラベルを短縮： 長すぎる名称を簡潔な単語に書き換えます。
3. 2行への折り返しと三点リーダーの相違
MDN Web Docsによれば、三点リーダー（...）で切り捨てるには text-overflow: ellipsis、overflow: hidden、white-space: nowrap を同時に指定する必要があります（MDN text-overflow）。
三点リーダーが付かずに2行に折り返されている場合、それはブラウザの標準的なテキスト改行です。文字が切れて読めなくなるよりは、2行に収まる方が親切であるケースも多く、行の高さが十分であればエラーではありません。
図3：コンセプトイラスト — 狭いドロワーで三点リーダー表示になったメニューと、幅を広げて1行にすっきり収まったメニューの対比。
Trade-offs: What Resizing Cannot Fix
寸法調整は視認性と操作性を改善しますが、デザイン上の制約も存在します：
- 情報密度の低下： 文字を大きくし行を高くすると押しやすくなりますが、1画面に収まる項目数が減り、スクロールの手間が増加します。
- 過密なメニューは文字縮小では救えない： 乱雑なカテゴリが大量にある場合、文字を縮小しても使いやすくはならず、読めない文字の塊になるだけです。構造の整理と統合が必要です。
- ストア背景の喪失： ドロワー幅を画面いっぱいの幅に広げると文字は収まりますが、ストアの背景が完全に隠れてしまいます。背後のページをわずかに見せることで、現在地を見失わずに買い物を続けられます。
- デスクトップとモバイルの差異： 横長画面で美しく見えるバランスが、縦長のタッチ画面でそのまま通用することは稀です。両方の端末で個別に検証してください。
Where Navi+ Fits
お使いのShopifyテーマにモバイルドロワーの幅やタブバーの高さを変える設定がない場合、Navi+ Tab Bar & Mega Menu を利用すると、Tab Bar、Mobile Menu、Mega Menu のサイズをノーコードで調整できます。
アプリ内で検証済みのサイズ調整機能：
- 階層別の文字サイズ管理： 第1階層、第2階層、第3階層リンクの Font Size（px単位）を個別に指定可能（Navi+ レベル1デザイン設定）。
- 行の高さと余白の調整： 各階層で Min Height（px）と垂直方向の Item Padding を設定し、快適なタップ間隔を確保（Navi+ レベル1デザイン設定）。
- アイコン寸法の制御： ナビゲーションアイコンの Icon Size（px）を自由に微調整可能（Navi+ レベル1デザイン設定）。
- ドロワーとサブメニューの幅設定： 単一列ドロップダウン用の Submenu Width（サブメニュー幅の設定）およびメガメニューの展開幅を設定可能。
- コンテナ全体の寸法： 下部タブバーのメニュー高さや、モバイルメニュードロワーの幅（モバイルとデスクトップの両方）を設定可能。
- レスポンシブ構文： 間隔入力欄で
mobile | desktop構文をサポートし、1つの入力欄でモバイルとデスクトップに異なる値を設定可能。 - 明確な最大3階層設計： 最大3階層までの構造に絞ることで、顧客が迷わない明快な導線設計を維持。
テーマにドロワー幅やタブバーの高さを変える設定がない場合、Navi+ Tab Bar & Mega Menu では、メニューの階層ごとに文字サイズ、項目の高さ、アイコンサイズ、メニュー幅を設定し、公開前にプレビューで確認できます。まず複製したテーマで試してください。
Action Checklist
メニューを本番公開する前に、以下の8つの監査ポイントを順に確認してください：
- テーマを複製する： コードやCSSを変更する前に、有効なテーマのバックアップコピーを作成する（Shopify Duplicating Themes）。
- 階層別に文字サイズを設定： 主要カテゴリと子リンクに個別のフォントサイズを割り当てる。
- 最小行高を確保： パディングまたは最小高さを設定し、タップしやすい間隔を設ける。
- コンテナ幅を調整： 最も長いコレクション名がきれいに収まるようドロワーやサブメニューの幅を広げる。
- アイコンの比率を整える： コンテナの高さに合わせてアイコンサイズをバランスよく設定する。
- タップターゲットの基準を確認： クリック可能な要素が最低でも24×24 CSSピクセルを満たしているか確認する（W3C Target Size Minimum）。
- 320 CSSピクセルで表示テスト： 幅320ピクセルで横スクロールが発生しないことを確認する（W3C Reflow）。
- テキスト拡大時の文字切れ確認： 200%にテキストを拡大しても意図しない切り捨てが発生しないか検証する（W3C Resize Text）。
FAQ
How do I make the mobile menu text bigger without code?
テーマまたはナビゲーションアプリの内蔵フォント設定を使用します。Shopifyテーマではスタイルシートの編集が必要になることが多いですが（fudge.ai）、Navi+ のようなアプリには、各階層ごとにFont Sizeを調整する設定があります（Navi+ レベル1デザイン設定）。
How wide should a mobile menu drawer be?
絶対的な標準値はありません。ストア背景を一部見せて現在地を見失わないようにしつつ、幅320 CSSピクセルの端末でも文字が途切れない十分な幅を確保することが推奨されます（W3C Reflow）。
How big should menu tap targets be?
WCAG 2.2 AA基準では最低24×24 CSSピクセル（W3C Target Size Minimum）、AAA基準では44×44 CSSピクセルが推奨されます（W3C Target Size Enhanced）。Nielsen Norman Groupは物理サイズとして約1cm×1cmを推奨しています（NN/g Touch Target Size）。
Why is my menu text cut off?
利用可能な水平幅に対して単語が長すぎる場合に文字が途切れます（W3C Resize Text）。ドロワーやサブメニューの幅を広げるか、フォントサイズをわずかに下げるか、名称を短くすることで解決できます。
Do I need to duplicate my theme before adding CSS?
はい。意図しない不具合が発生した際に変更を破棄して元の状態に戻せるよう、Shopifyは作業前にテーマを複製することを強く推奨しています（Shopify Duplicating Themes）。
Sources
- W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — ポインター入力の最小ターゲットサイズに関する達成基準 2.5.8（レベルAA）。
- W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Enhanced) — 拡張ターゲットサイズに関する達成基準 2.5.5（レベルAAA）。
- W3C Web Accessibility Initiative: WCAG 2.2 Resize Text — 200%までのテキスト拡大に関する達成基準 1.4.4。
- W3C Web Accessibility Initiative: WCAG 2.2 Reflow — 320 CSSピクセルでのリフローに関する達成基準 1.4.10。
- Nielsen Norman Group: Touch Target Sizes on Mobile Devices — モバイルにおけるタッチターゲットの物理的寸法に関する調査。
- Shopify Help Center: Duplicating Themes — コード編集前のテーマ複製に関する公式手順。
- Shopify Help Center: Adding Custom CSS to Themes — テーマ設定でのカスタムCSSの範囲と1500文字制限の仕様。
- fudge.ai: How to Change the Mobile Menu in Shopify — テーマエディタでのモバイルメニュー設定ガイド。
- MDN Web Docs: text-overflow CSS Reference — text-overflow、overflow、white-spaceの挙動に関する技術リファレンス。
- Navi+ Help Center: Level 1 Design Settings — Font Size、Icon Size、Min Height、パディングの設定解説。
- Navi+ Help Center: Layout Settings — Submenu Widthおよびメガメニューパネル設定の解説。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。