Shopifyメニュー内の画像サイズを修正する方法（メガメニューとモバイルドロワー）

Quick answer

メニュー内の画像サイズを整えるには、CSSの aspect-ratio で全画像に共通の形状を指定し、枠一杯に収めるなら object-fit: cover（端が切り取られる場合があります）、画像全体を見せるなら contain を選びます。表示サイズ以上の元画像をアップロードし、モバイルドロワーは別途検証します。

1. 元画像の比率を統一： メニューの同一列に並ぶすべての画像のアスペクト比を揃えます。
2. CSSで枠の比率を固定： テーマのセレクタに aspect-ratio と object-fit を指定します。
3. Dawnの切り抜きを停止： PC向けメガメニューの背景画像をcontainモードへ変更します。
4. ぼやけた画像を解消： 高密度ディスプレイに適した寸法の画像を適用し、URLを確認します。
5. モバイルドロワーを点検： スマートフォンのスライド式ドロワーの表示崩れを個別に確認します。

Why menu images end up uneven, cropped or blurry

CSSを修正する前に、ナビゲーションメニューがShopifyテーマ標準のものか、インストールしたメニューアプリで生成されているかを確認してください。テーマとアプリではHTML構造が異なるため、間違ったクラス名にCSSを記述しても画面には反映されません。

メニュー画像の表示トラブルは、主に以下の3つの原因に分類されます。

画像の表示枠に明確な比率が指定されていない場合、ブラウザは画像本来の高さでレンダリングします。縦長の画像と正方形の画像が並ぶと、メニュー行に不自然な段差が生じます。逆に横長の枠が強制されている場合、正方形画像の上端や下端が切り落とされます。症状を正しく特定することが適切な修正への第一歩です。

この動画は、ドロップダウン型メガメニューに画像を追加する方法を示しています。サイズ問題がどこから始まるかを知るための背景としてご覧ください。

Step 1: Standardize your source images

不揃いな並びを根本的に防ぐ最も堅実な方法は、Shopifyへアップロードする前に元画像のアスペクト比を統一することです。Shopify公式のテーマ画像ドキュメントでも、「レイアウト全体で統一感を保つには正しい画像アスペクト比を使用する必要がある」と強調されています。

メガメニューの同じ行に並ぶ画像には、単一の比率を採用します。

• 正方形（1:1）： コレクション画像、商品サムネイル、左右対称のグリッドに最適です。
• 横長（3:2や16:9など）： プロモーション用バナーやエディトリアル風の横長カードに適しています。

その行のすべての画像をまったく同じ比率で書き出します。PCの画面上で実際に表示されるピクセル寸法と同等か、それ以上の大きさでアップロードしてください。特にRetinaディスプレイなどの高密度画面でくっきりと表示させるには、表示枠の約2倍の寸法で素材を作成するのが理想です。

フォーラム等で見かける特定の推奨ピクセル数値を鵜呑みにしないでください。カラム幅はテーマや列数によって異なるため、すべてのストアに当てはまる標準サイズは存在しません。また、ShopifyのLiquid画像フィルター仕様にある通り、「画像を元の寸法以上に拡大リサイズすることはできません」。小さな画像を拡大すると必ず画質が劣化します。

Step 2: Force one shape with aspect-ratio and object-fit

Concept illustration：同じメニュー画像をobject-fit coverとcontainで比較。

ストア内にすでに多様な比率の画像が存在し、すぐに再アップロードできない場合は、CSSを使って強制的に均一な枠に整えます。MDN Web Docsで解説されている現代のCSSプロパティ aspect-ratio は、「要素のボックスに希望する幅と高さの比率を定義すること」を可能にします。

テーマの「カスタムCSS」項目またはメインのスタイルシートに以下のコードを追加します。

/* .your-menu-selector img をお使いのテーマ固有のセレクタに置き換えてください */
.your-menu-selector img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

※注意：.your-menu-selector img は、ご利用中のテーマで実際に使われているクラス名に変更してください。

この指定では、width: 100% で列幅一杯に広げ、aspect-ratio: 1 / 1 で枠を完全な正方形に固定し、object-fit: cover で枠を埋めます。MDN Web Docs の仕様に基づく挙動の違いは以下の通りです。

お使いのテーマで正しいセレクタを見つける手順

CSSセレクタはShopifyテーマごとに異なるため、ご自身のテーマのクラス名を特定します。

1. パソコンのブラウザでオンラインストアを表示します。
2. メニューにカーソルを合わせ、メガメニューを開きます。
3. サイズが崩れているメニュー画像を右クリックし、検証（Inspect） を選択します。
4. DevToolsで<img>要素またはその親ラッパーを見つけ、クラス名を確認します。クラス名はテーマごとに異なります。
5. Shopify管理画面で オンラインストア > テーマ を開き、安全のため アクション > 複製 でバックアップを取ってから カスタマイズ を開きます。
6. テーマにCustom CSS設定がある場合はそこに、ない場合はテーマのメインスタイルシートの末尾（例：Dawnのbase.css）にCSSを追加します。

Step 3: Stop cropping in the Dawn mega menu

ShopifyのDawnテーマは、下記コミュニティのスレッドではメガメニューの画像が<img>タグではなくCSSの背景画像として描画されているため、混乱しやすいテーマです。この場合、Step 2のobject-fitルールは適用されません。

DawnのメガメニューのサイズについてのShopifyコミュニティの議論では、画像が切り取られず全体が見えるように、背景をbackground-size: containに切り替える方法が提案されています。これはコミュニティの一例であり、Shopifyの公式ガイダンスではありません。また、スレッドでこれで解決したとは確認されていません。

Dawnのデスクトップ用メガメニューで同じ方法を試すには、スレッドの提案どおり、次のコードをbase.cssファイルの末尾に追加します。

/* Adapted from a community thread: verify the panel ID and selector in your own theme */
@media screen and (min-width: 767px) {
  #MegaMenu-Content-2 li:before {
    /* contain shows the whole image; empty bands may appear */
    background-size: contain !important;
    background-position: center;
  }
}

注意すべき技術的ポイントが2点あります。

1. ストア固有のID番号： #MegaMenu-Content-2 というセレクタは、特定メニュー項目のIDです。ストアの構成によって番号が異なるため、必ずブラウザの検証ツールで確認してください。
2. メディアクエリの範囲： このルールは@media screen and (min-width: 767px)の中にあるため、幅の広い画面にのみ適用され、モバイルのメニュードロワーは修正されません（Step 5で扱います）。

この動画ではDawnで画像付きメガメニューを設定する流れを解説しています。リサイズ前の構造把握にご活用ください。

Step 4: Fix blurry menu images

PCでは鮮明に見える画像が、高解像度画面やスマートフォンでは粗くぼやけて見えることがあります。メガメニュー画像がぼやける問題に関するコミュニティ投稿では、主な原因として以下の2点が挙げられています。

原因1：元画像の解像度が表示領域より小さい

元画像のピクセル数が表示枠より少ないと、ブラウザは枠を埋めるために画像を引き伸ばします。ShopifyのLiquid画像フィルターのドキュメントによると、「画像は元のサイズより大きくリサイズすることはできません」。高密度のスマートフォン画面では、これがより目立ちます。Googleのweb.devが説明するとおり、「密度記述子は、デバイスのピクセル密度に応じて異なる画像を配信するために使われます」。目安として、表示サイズの約2倍の元画像をアップロードしてください。

[!WARNING] ぼやけの解消にobject-fit: noneを使わないでください。コミュニティのスレッドでは、メニュー画像が元のサイズのままになり形も崩れて、問題は解決しませんでした。

原因2：メニューが古いキャッシュ画像を参照している

画像を差し替えても、メニューが古い画像を使い続けることがあります。同じコミュニティのスレッドでは、新しい画像は.pngなのに古い.gifが使われ続けていたことが原因とされました。画像を右クリックして画像を新しいタブで開くを選び、アドレスバーのURLを確認します。古いファイル名が表示されたら、メニューが新しいファイルを参照するよう、元の場所で画像を更新してください。

Step 5: Check mobile and the menu drawer

Concept illustration：デスクトップのメガメニューの修正と、別途確認が必要なモバイルのメニュードロワー。

ナビゲーション画像を直すとき、デスクトップ画面だけでテストしてしまうのはよくある見落としです。デスクトップ専用のメディアクエリ内のCSSルールは、モバイルのスライドアウトパネルには届きません。さらに、テーマはモバイルドロワーに全く別のマークアップとクラスを使うことがよくあります。

たとえばShopifyのDawnテーマでは、モバイルドロワーは.menu-drawer__menuを使います。セレクターはテーマのバージョンによって異なる場合があるため、必ずご自身のテーマを検査してください。デスクトップ用のクラスだけを対象にすると、モバイルドロワーでは不揃いな行や切り取られたサムネイルが残ります。

モバイル表示を確実に整えるためのチェック事項：

• 下位階層の展開確認： スマホでドロワーを開き、第2階層や第3階層のサムネイル画像が不自然に巨大化していないか確認します。
• 画面幅をテストする： DevToolsのデバイスモードで幅の狭いスマートフォン画面を試すか、実機で直接確認します。
• メニュー設定の分離： モバイル専用のレイアウトが必要な場合は、デスクトップとモバイルで独立したメニューを作成 して相互のレイアウト干渉を防ぎます。

Common mistakes (fixed widths, wrapped labels)

メニュー画像のサイズを揃えようとする際、周囲のレイアウトを壊してしまう4つの典型的な過ちがあります。

1. ピクセルやパーセントで無理な固定幅を指定する

メニュー画像のリサイズに関するShopifyコミュニティのスレッドでは、各メニュー項目に18%の固定幅を設定する修正案が出ていましたが、この値はそのショップのテーマに固有のものです。固定幅は、メニュー項目数が変わると列の折り返しを崩すことがあります。画像にはwidth: 100%を指定し、幅の配分は列のコンテナに任せましょう。

2. ラベルテキストの2行折り返しを見落とす

すべての画像を正方形に揃えても、商品カテゴリ名が2行に折り返されると行全体がズレて見えます。片方が1行、隣が2行になるとタイルの底辺が揃いません。美しい整列を保つには、文字サイズや余白を調整して ナビゲーションメニューのスタイルを変更 することが有効です。

3. !important を安易に多用する

画像ルールに !important を乱用すると、テーマ本来のレスポンシブ動作が無効になり、スマホ画面で表示がはみ出す原因になります。全体のバランスを整えたい場合は、個別画像タグを強引に上書きするのではなく、枠組み側で メニュー全体のサイズを調整 するアプローチを検討してください。

4. バックアップを取らずにテーマコードを書き換える

稼働中の本番テーマで base.css を直接編集するのは危険です。記述ミスが1箇所あるだけでショップ全体の表示が乱れます。CSSを変更する前には、必ずテーマを複製して復元可能な状態を確保してください。

Trade-offs: cover vs contain vs re-uploading

メニュー画像の比率を調整する手法には、それぞれ明確なトレードオフが存在します。

また、テーマファイルへ直接書き込んだカスタムCSSは、テーマのメジャーアップデート時に上書きされて消滅するリスクがあります。画像付きの大きなナビゲーションを構築する際は、カタログ構成に合わせて 適切なメニュータイプを選択 することが大切です。

When to stop hand-writing CSS: setting image ratio in a menu app

テーマの更新ごとにCSSセレクタを保守するのが負担な場合は、画像比率の設定を標準搭載したメニューアプリを使用することで、ノーコードで同じ仕上がりを実現できます。

Navi+の 画像比率（自動クロップ） 設定を使用すると、コードに触れることなくメニュー内の画像を均一なプロポーションに固定できます。以下の4つの表示モードから選択可能です。

• Unchanged（デフォルト）： アップロードされた元画像の比率をそのまま維持。
• 1:1 square： すべての画像タイルを狂いのない正方形に統一。
• 3:2 landscape： バランスの取れた横長の長方形枠を形成。
• 2:3 portrait： 雑誌のような縦長のエディトリアルカード形式で表示。

この機能は階層ごとに柔軟に適用できます。メニュー全体への一括適用、第2・第3階層のサブメニューへの個別適用、さらには特定アイテムのみ Unchanged に設定して親からの自動クロップを無効化することも可能です。

アプリは標準の aspect-ratio と object-fit: cover を自動生成して要素に適用するため、画像の再アップロードは不要です。また、アップロード時に焦点位置を微調整できる手動トリミング機能も備わっています。

[!NOTE] 自動画像比率設定は、PCメガメニュー、モバイルメガメニュー、モバイルドロワー内の 大画像（Big image） および 画像バナー（Image banner） 項目にのみ適用されます。小さなメニューアイコンは形状維持のため除外されています。また、この設定は低解像度画像を鮮明化するものではないため、素材は Step 4 に記載の解像度基準を満たしている必要があります。

参考画像からメニューデザインを再現したい場合、内蔵の比率コントロールを使えば手作業でのCSS修正を減らせます。Navi+では、1:1の正方形または3:2の横長を一度選ぶだけで、メニュー内のすべての大きな画像がそれに従います。まずはメニューのコピーで試してください。

Action checklist

メニュー画像の寸法を点検し、適切に修正するための7項目のチェックリストです。

• メニュー生成元の確認： ナビゲーションがテーマ標準か外部アプリ製かを確認。
• 目標アスペクト比の選定： 同一行で共通化する形状（1:1正方形または3:2横長など）を決定。
• 元画像の書き出し： 表示枠以上の解像度（Retina向けには2倍）で素材を用意。
• CSSセレクタの特定： ブラウザの検証ツールでメニュー画像に付与されているクラス名を確認。
• 比率とfitの指定： カスタムCSSやテーマのCSSに一括整形ルールを追加。
• 画像URLの参照チェック： 古いキャッシュ画像ではなく最新の画像が読み込まれているか確認。
• モバイル表示の点検： スマホの実機やエミュレータでドロワーの表示バランスをチェック。

FAQ

メガメニューの画像サイズがバラバラになるのはなぜですか？

元画像のアスペクト比が不揃いな状態で、テーマが画像の高さに応じて枠を自動伸縮させているためです。比率や高さを固定するルールがないと、各枠はアップロードされた画像の縦横比に合わせて個別に拡大縮小します。

メニュー画像が切り取られてしまう原因は何ですか？

枠のアスペクト比が元画像と異なっており、object-fit: cover や背景画像のcover指定が適用されているためです。coverは枠を満たすためにはみ出た外側を切り取ります。全体を表示させたい場合は contain を使用します。

PCでは綺麗なのにスマホで画像がぼやけるのはなぜですか？

画面上の表示サイズに対して元画像の解像度が不足しているか、テーマが古い低解像度サムネイルを読み込んでいるためです。ShopifyのCDNは元サイズ以上に画像を拡大補正しないため、小さな画像は高密度なスマホ画面でぼやけます。

アップロードする画像サイズは何ピクセルが適切ですか？

PCのメガメニュー上で実際に表示される枠のピクセル寸法と同等以上のサイズでアップロードしてください。現代の高密度ディスプレイでシャープに見せるには、表示枠の約2倍の寸法で書き出すのが理想的です。

テーマコードを書き換えずに画像を正方形に統一できますか？

はい。ナビゲーションメニューを、画像比率の設定を備えたアプリで作成している場合は可能です。たとえばNavi+には、メニュー内の大きな画像と画像バナーに、テーマコードの編集や画像の再アップロードなしで、CSSで1:1の正方形比率を適用するImage ratio設定があります。

Sources

• MDN Web Docs: CSS object-fit ドキュメント（置換要素のボックス適合に関する標準技術仕様）
• MDN Web Docs: CSS aspect-ratio ドキュメント（ボックスのアスペクト比制御に関する標準仕様）
• Shopify開発者ドキュメント: Liquid image_url フィルター仕様（プラットフォームにおける画像リサイズ制限）
• Shopifyヘルプセンター: テーマ画像とアスペクト比（オンラインストアの視覚的一貫性に関する公式指針）
• Google Web Developers: レスポンシブ画像の配信（デバイスピクセル密度と解像度記述子）
• Shopifyコミュニティ: メガメニューの画像ぼやけ解消に関するディスカッション (Thread 363359) （コミュニティでの実例・非公式スレッド）
• Shopifyコミュニティ: Dawnテーマのメガメニュー画像サイズ調整 (Thread 255590) （コミュニティでの実例・非公式スレッド）
• Shopifyコミュニティ: メガメニュー内の画像サイズと位置変更 (Thread 182414) （コミュニティでの実例・非公式スレッド）
• Shopifyコミュニティ: メガメニューの画像配置とサイズ統一 (Thread 146397) （コミュニティでの実例・非公式スレッド）