Image SrcとVariant Imageを混同すると商品画像がどうずれるか

Shopifyの商品CSVで画像がずれる原因の大部分は、Image Src列とVariant Image列の役割を混同することにあります。Image Srcは「商品に属する画像の一覧」を定義し、Variant Imageは「その画像のうちどれをどのバリエーションに割り当てるか」を指定します。この2つの関係を正しく理解すれば、CSV一括登録での画像ずれを防げます。

Image SrcとVariant Imageは何が違うのか

Shopifyの商品CSVには画像に関連する列が複数あります。よく混同される2つの列を整理します。

Image Src（商品レベルの画像URL）

Image Srcは、商品に紐づく画像ファイルのURLを記述する列です。1つの商品に5枚の画像を登録する場合、同じHandleの5つの行にそれぞれ異なるURLを書きます。Image Srcで指定された画像は商品ページのギャラリーに表示されます。

• 画像のURL（https://cdn.shopify.com/... など）をそのまま記述
• Image Position列で表示順を制御（1, 2, 3…）
• Image Alt Text列で代替テキストを設定
• 商品全体の画像リストを構成する

Variant Image（バリエーションに割り当てる画像URL）

Variant Imageは、特定のバリエーション（色違いやサイズ違い）に「どの画像を表示するか」を指定する列です。ここに書くURLは、必ずいずれかのImage Srcと一致している必要があります。

• バリエーション行に記述する画像URL
• 記述したURLは商品画像ギャラリーのどこかの画像と一致する必要がある
• 空欄の場合、variant画像が未指定になり、テーマや商品ページ、連携先によっては代表画像が表示されることがあります
• バリエーション選択時にハイライトされる画像を決定する

4つの画像関連列の比較表

列名	対象レベル	役割	必須
Image Src	商品	商品に属する画像のURL	画像を登録するなら必須
Image Position	商品	画像の表示順（1, 2, 3…）	推奨
Image Alt Text	商品	画像の代替テキスト	任意（アクセシビリティ上推奨）
Variant Image	バリエーション	バリエーションに割り当てる画像URL	任意（空欄ならvariant画像未指定）

CSVの複数行構造と画像の関係

Shopify商品CSVは1商品につき複数行で構成されます。1行目が商品本体、2行目以降がバリエーションです。画像行も同じ構造の中に含まれます。

正しい行構造の例

Tシャツ（赤・青の2色）に画像3枚を登録する場合を考えます。赤の画像、青の画像、ロゴ画像の3枚です。

Handle,Title,Variant 1,Image Src,Image Position,Variant Image
tshirt,Tシャツ,赤,https://cdn.shopify.com/red.jpg,1,https://cdn.shopify.com/red.jpg
tshirt,,青,https://cdn.shopify.com/blue.jpg,2,https://cdn.shopify.com/blue.jpg
tshirt,,,https://cdn.shopify.com/logo.jpg,3,

3行目はバリエーションではなく画像の追加行です。Variantの列（Variant 1など）が空で、Image Srcだけが埋まっている行は「この商品にもう1枚画像を追加する」という意味になります。

混同で起きる典型的な画像ずれパターン

パターン1：Variant Imageを空欄にしたままImage Srcだけ入力

Variant Imageを空欄にすると、variant画像が未指定の状態になり、テーマや連携先の表示によっては代表画像が表示されることがあります。色違い商品でVariant Imageを書き忘れると、青のバリエーションを選んでも赤いTシャツの画像が表示されます。

Handle,Title,Variant 1,Image Src,Variant Image
tshirt,Tシャツ,赤,https://cdn.shopify.com/red.jpg,
tshirt,,青,https://cdn.shopify.com/blue.jpg,

この場合、赤も青もred.jpgが表示されます。正しくは青の行に https://cdn.shopify.com/blue.jpg をVariant Imageに記述します。

パターン2：Image SrcとVariant Imageで違うURLを書く

Variant Imageには「商品画像として登録済みのURL」を書く必要があります。Image SrcにないURLをVariant Imageに書くと、意図しない挙動になります。

Handle,Title,Variant 1,Image Src,Variant Image
tshirt,Tシャツ,赤,https://cdn.shopify.com/red.jpg,https://cdn.shopify.com/red.jpg
tshirt,,青,https://cdn.shopify.com/blue.jpg,https://example.com/another-blue.jpg

another-blue.jpgはImage Srcに存在しないため、正しく紐付かない可能性があります。Variant ImageのURLは必ずいずれかのImage Srcと完全一致させる必要があります。

パターン3：Image SrcのURLを差し替えてVariant Imageを更新し忘れる

画像を差し替える際、Image Src列のURLを新しいものに変更したのにVariant Image列を古いURLのままにしてしまうケースです。

列	変更前	変更後（誤り）
Image Src	https://cdn.shopify.com/old-red.jpg	https://cdn.shopify.com/new-red.jpg
Variant Image	https://cdn.shopify.com/old-red.jpg	https://cdn.shopify.com/old-red.jpg（更新忘れ）

結果としてVariant Imageが存在しないURLを指すことになり、バリエーション画像が表示されなくなります。

正しいCSV入力のチェック手順

CSVをアップロードする前に、以下の順序で確認します。

1. Image Srcの重複確認 — 同じHandle内で同じURLが複数回出現していないか確認
2. Image Positionの連番確認 — 1, 2, 3… と飛ばしなく連続しているか確認
3. Variant ImageのURL照合 — Variant Imageの各URLが、同じHandle内のImage Srcのいずれかと完全一致するか確認
4. 空欄の意図確認 — Variant Imageが空欄の行は、意図的に空欄にしたものか確認
5. 拡張子の統一 — URLの大文字小文字、クエリパラメータまで含めて完全一致しているか確認

自動チェックで検出できることと人間の判断が必要なこと

画像ずれの確認には、機械的に検出できる部分と人間の目が必要な部分があります。

自動チェックで検出できる項目

チェック項目	方法
Variant ImageのURLがImage Srcに存在するか	URL文字列の完全一致検索
Variant Imageが空欄のバリエーションがあるか	空欄セルの検出
Image Positionの重複・欠落	数値の連番チェック
Handleごとの画像枚数とPositionの整合	行数カウントと数値の照合
URL形式の妥当性（httpsで始まるか）	正規表現マッチ

これらはスプレッドシートの関数や簡易スクリプトで検出できます。たとえばGoogleスプレッドシートなら VLOOKUP や COUNTIF を使って、Variant Image列のURLがImage Src列に存在するか確認できます。

人間の判断が必要な項目

確認項目	理由
画像の内容がバリエーション名と一致しているか	「赤」というバリエーションに赤い画像が割り当たっているかは目視が必要
Alt Textが画像の内容を適切に説明しているか	文脈の理解が必要
画像の画質・構図が商品ページに適しているか	審美的な判断
画像の表示順（Position）がユーザーにとって自然か	UX上の判断

画像ずれが起きてしまった場合の復旧手順

CSVアップロード後に画像がずれてしまった場合の手順です。

1. 現状の確認 — Shopify管理画面で該当商品を開き、どのバリエーションにどの画像が割り当たっているか確認
2. CSVの再エクスポート — 管理画面から「エクスポート」で現在のCSVをダウンロードし、実際のImage SrcとVariant Imageの状況を把握
3. Variant Image列の修正 — ダウンロードしたCSVでVariant Image列を正しいURLに修正
4. Image Srcとの整合確認 — 修正したVariant ImageのURLがImage Src列に存在することを確認
5. 再インポート — 修正したCSVをアップロード（上書きインポート）
6. 管理画面での最終確認 — 各バリエーションを選択し、意図した画像が表示されるか確認

よくある質問

Variant Imageを空欄にしておくとどうなりますか？

空欄の場合、そのバリエーションの画像は未指定になります。テーマや商品ページ、連携先によっては代表画像が表示されることがありますが、すべてのバリエーションで同じ画像を表示したい場合にも、各Variant Image列に同じURLを明示的に記述することをおすすめします。

画像URLはどこで確認できますか？

すでに登録済みの商品なら、CSVをエクスポートしてImage Src列を確認するのが確実です。新規登録の場合は、画像を事前にShopifyのファイル管理（Settings > Files）にアップロードし、そのURLをImage Srcに記述します。

同じ画像を複数バリエーションに割り当てられますか？

はい、可能です。複数のバリエーション行のVariant Imageに同じURLを記述すれば、同じ画像が複数バリエーションに割り当たります。たとえばS・M・Lサイズで同じ画像を使う場合、3行とも同じURLを書きます。

まとめ：画像ずれを防ぐ3つのポイント

• Image Srcは商品の画像リスト、Variant Imageはバリエーションへの割り当て — 役割を明確に分けて理解する
• Variant ImageのURLは必ずImage Srcのいずれかと完全一致させる — クエリパラメータや大文字小文字の違いにも注意
• CSVアップロード前にURLの照合チェックを必ず行う — 自動チェックで機械的な誤りを検出し、目視で内容の整合を確認する

機密CSVやスクリーンショットの送付は不要です。記事の内容について気になる点があれば、URLと具体的な疑問点をお知らせください。

CSV入力でお困りの際は以下の情報をご用意のうえご相談ください。

• 対象の商品CSVファイル（画像列の 部分）
• ずれが発生している商品のHandle
• 期待する画像とバリエーションの紐付け
• 使用しているCSVエディタ（Excel / Googleスプレッドシート / その他）
• 商品のバリエーション構成（色展開 / サイズ展開 / 両方）

参考にした公式情報

• Shopify Help Center: Product details