Shopify 商品画像のベストプラクティス:サイズ・フォーマット・速度

2026 年版 Shopify 商品画像ガイド:2048×2048 マスター、JPEG/PNG/WebP、ファイルサイズ目標、テーマ互換性、alt テキスト SEO、バリエーション設定を網羅。

Shopify 商品画像のベストプラクティス:サイズ・フォーマット・速度

Shopify の画像アップロード枠は、どのマーケットプレイスよりも余裕があります——5000×5000 ピクセル、1 ファイル 20MB、複数フォーマット対応。しかし、その自由度こそが落とし穴でもあります。販売者はカメラから出たままの画像をアップロードし、テーマは予想外の形で切り抜き、モバイル訪問者はヒーロー画像の表示を 4 秒待たされ、直帰率が静かに上昇していきます。この記事では、Shopify 販売者が実際に気にする 10 の質問——仕様、テーマ、パフォーマンス、SEO、バリエーション——に、判断に必要な数値とともにお答えします。

Shopify の商品画像のサイズはいくつにすべき?

2048×2048 ピクセル、正方形 でアップロードしてください。これは Shopify 公式ドキュメントが推奨するマスターサイズであり、主要なテーマはすべてこれを前提に設計されています。

画像の用途 推奨サイズ アスペクト比 理由
商品画像(マスター) 2048×2048 px 1:1 ズーム + Retina 表示
商品画像(最小) 800×800 px 1:1 これ未満ではズーム機能が失効
コレクション画像 1024×1024 px 1:1 テーマの表示グリッド
ヒーロー/バナー 1920×1080 px 16:9 デスクトップ全幅表示
スライドショー 1600×500〜1920×600 px 3:1〜4:1 テーマ依存
ロゴ 450×200 px 約 2:1 ヘッダー表示
ファビコン 32×32 px 1:1 ブラウザタブ

アップロードの上限: 5000×5000 px、20MB。これを超えると拒否されます。ただし「アップロードできる」と「アップロードすべき」は別問題——下のファイルサイズの章を参照してください。

ページを速く保つためのファイルサイズは?

Shopify 公式ガイドが推奨する実務的な目標は 商品画像 1 枚あたり 200〜500KB、モバイル主体のストアではさらに 200〜300KB に寄せるべきです。

なぜ重要か:4G モバイル回線では、画像 100KB ごとに読み込み時間がおよそ 150〜300ms 増えます。10 枚の画像が各 2MB の商品ページは 20MB の転送量——遅めのモバイル回線では 30 秒以上の読み込みになり、Shopify の計測データではこれがカート放棄率と強く相関します。

画像サイズ 読み込み時間(4G) 何が起きるか
<200KB <1 秒 高速、遅延を感じない
200〜500KB 1〜2 秒 ヒーロー/商品画像には許容範囲
500KB〜1MB 2〜4 秒 明らかな遅延、直帰リスクが上昇
>1MB >4 秒 モバイルで顕著な直帰

Shopify は画像を自動で圧縮し、対応ブラウザには WebP を配信しますが、ソース側の最適化が前提です。15MB の PNG をアップロードしても圧縮はされますが、自動圧縮は保守的——アップロード前に JPEG 品質 80〜85 で圧縮しておく方が結果は格段に良くなります。

JPEG、PNG、WebP、SVG のどれを使う?

フォーマットの選択は画像の種類で決まります。

フォーマット 向いている用途 避けるべき用途 備考
JPEG 商品写真、ライフスタイルカット 透過が必要な画像 品質 80〜85 がスイートスポット
PNG ロゴ、アイコン、透過ありのインフォグラフィック 写真(ファイルが肥大化) アルファチャンネルが必要な時のみ
WebP すべての用途(書き出せるなら) 古いブラウザ(2026 年では稀) 同品質で JPEG より 25〜35% 小さい
SVG アイコン、ロゴ、シンプルなグラフィック 商品写真 無限拡大可能、ファイルは極小
GIF アニメーションデモ(控えめに) それ以外すべて アニメは MP4/WebM を使う

Shopify は対応ブラウザに対してアップロード形式に関わらず自動で WebP を配信します——アップロード形式にこだわる必要はありません。重要なのは、ソースが高品質か、ファイルサイズ目標内かどうかです。商品撮影の安全な既定値は JPEG 品質 85 です。

Shopify では必ず正方形画像を使う必要がある?

必須ではありません——が、ほぼ使うべきです。ほとんどの Shopify テーマは既定で正方形グリッドを使い、非正方形のアップロードは切り抜かれます。テーマが 1:1 を想定しているのに 4:3 をアップロードすると、商品の上下が切れるか、余白の箱に浮いて他の画像と並んだときに不揃いに見えます。

正方形が向く場面: 既定の商品グリッド、コレクションページ、検索結果、関連商品カルーセル。ユースケースの 90% はこれです。

縦長(3:4 または 4:5)を選んでよい場面: 全身モデル撮影を中心とするファッションストアで、縦構図が重要な場合。これは縦のアスペクト比向けに設計されたテーマ(Dawn のテーマ設定、Impact、Impulse)が必要です——正方形が既定のテーマに縦長を無理に入れないでください。

横長(16:9)が合う場面: ヒーローバナー、セカンダリ画像として使う情景系のライフスタイルカット。正方形グリッドのテーマでメイン商品画像に使うのは厳禁です。

安全なワークフロー:必要より広めに撮影し、マスター商品画像として 2048×2048 の正方形に切り抜き、別角度のバリエーションも 2048×2048 で作成する。横構図はバナーとスライドショーのみに使う。

Shopify のテーマは画像表示にどう影響する?

テーマごとに切り抜きとサイズ指定のロジックが異なります——「自分のサイトでは写真が悪く見える」という苦情で最も多い原因です。画像仕様を確定する前に、実際のテーマで必ず検証してください。

テーマ 商品ページの切り抜き コレクショングリッド 備考
Dawn(Shopify 標準) 設定可(正方、縦長、横長、ナチュラル) 商品ページ設定に従う 最も柔軟
Debut 正方固定 正方 厳格な 1:1 表示
Impact 縦長向き 設定可 ファッション向け最適化
Motion フルブリード、テーマ制御 カード型 動きの多い演出
Minimal 余白付きで中央揃え 正方 正方形でないと余白が入る

実務上のテスト: アップロード後、商品ページとコレクションページをデスクトップとモバイルの両方で確認します。商品の切り抜きがおかしい場合は、ソース画像を直してください——テーマの CSS 調整に頼ると、アップデートで壊れます。

Amazon や eBay との比較は?

同じ商品画像ライブラリから複数プラットフォームに出品する場合、仕様の違いは重要です。

仕様 Shopify Amazon eBay
推奨サイズ 2048×2048 px 2000×2000 px 1600×1600 px
最小サイズ 800×800 px 1000×1000 px(ズーム対応) 500×500 px
最大サイズ 5000×5000 px、20MB 長辺 10000 px 7MB
アスペクト比 テーマに応じて柔軟 1:1 必須 1:1 推奨
背景 任意 純白(メイン画像) 清潔であれば白でなくても可
ロゴ/ウォーターマーク メイン画像では禁止 メイン画像では不可
文字のオーバーレイ メイン画像では禁止、セカンダリは可 メイン画像では制限あり
ファイル形式 JPEG、PNG、WebP、GIF、SVG JPEG、PNG、TIFF、GIF JPEG、PNG、GIF、BMP、TIFF

実務的な示唆: Amazon 準拠の 1 枚(2000×2000 純白、文字なし)はどこでも使えますが、Shopify には「清潔すぎ」てライフスタイルやインフォグラフィック画像ほど売れません。2048×2048 のクリーン背景マスターを基盤に、その上にバリエーションを載せていく形で画像ライブラリを構築しましょう。

SEO のための alt テキストの書き方は?

alt テキストの対象は 3 つ:スクリーンリーダー、Google 画像検索、画像が壊れたときのフォールバック。最初の 2 つに向けて書いてください——3 つ目は自然に満たされます。

良い alt テキストの式: [商品名] [主要な説明] [関連するコンテキスト]

画像タイプ 弱い alt 強い alt
メイン商品 "white mug" "White ceramic coffee mug 12oz with matte finish"
色違い "red version" "Red ceramic coffee mug 12oz matte finish"
ライフスタイルカット "mug on table" "White ceramic mug on wooden breakfast table with morning coffee"
ディテール "close up" "Matte white ceramic mug close-up showing handle texture"
インフォグラフィック "diagram" "Coffee mug dimensions infographic showing 3.5 inch height and 4 inch diameter"

ルール:

  • 125 文字以内(スクリーンリーダーはこの長さで切ります)
  • 主要キーワードを自然に含める、詰め込まない
  • 実際に写っているものを書く、商品タイトルをコピーしない
  • 同一商品の画像ごとに異なる alt(同一コピー禁止)
  • 「image of」「photo of」などの表現は使わない——支援技術が自動で付加します

バリエーション画像(色、サイズ、スタイル)の扱い方は?

Shopify は商品バリエーションごとに画像を割り当てられます。ほとんどのストアがここで手を抜いています。

最低限の構成: 色ごとに 1 枚、その色を示す画像。これが買い手の期待です——「赤」をクリックしたら赤い商品が表示されるべきで、白ではいけません。

ファッション・ホーム向けの上位構成:

  1. 主バリエーション画像:全色で同じ角度、同じ照明、同じ構図(視覚比較のため)
  2. セカンダリのライフスタイル画像:バリエーションに合わせた色で使用シーン
  3. ディテール画像:色・質感を正確に示すクローズアップ

サイズバリエーションには通常、個別画像は不要ですが、サイズで見た目が大きく変わる場合(例:小さいバッグと大きいバッグでプロポーションが異なる)は別です。服なら、モデル着用画像のセットとサイズチャート画像で十分です。

色の精度が決定打: 買い手はバリエーション画像が画面上の色と合うことを期待します。スタジオ照明で色が転んでいるなら、アップロード前に補正してください。色関連の返品は、色違いバリエーションでの「画像と実物の不一致」が大部分を占めます。

ページ速度と画像サイズは本当にコンバージョンに影響する?

します、測定可能なほどに。Google Core Web Vitals のデータと EC ベンチマーク調査が一貫して示しているのは:

  • LCP(Largest Contentful Paint)が 2.5 秒以下: 良好なランキングの基準
  • LCP が 2.5〜4 秒: エンゲージメント指標の明確な低下
  • LCP が 4 秒超: モバイルで直帰率が大幅に上昇

ヒーロー商品画像は通常、商品ページの LCP 要素そのものです。500KB 削るだけで、モバイル 4G での LCP は 200〜500ms 短縮するのが一般的で、セッション全体で効果が積み上がります。

ページ速度改善 典型的なコンバージョン効果
1 秒 → 2 秒 ベースライン、効果なし
3 秒 → 2 秒 コンバージョン +3〜7%
5 秒 → 2 秒 モバイルコンバージョン +10〜15%
8 秒 → 3 秒 モバイルコンバージョン +25〜30%

これが 200〜500KB というファイルサイズ目標が、感覚以上に重要な理由です。500KB の画像 10 枚は 5MB のページ、2MB の画像 10 枚は 20MB のページ——この差はモバイル訪問者全員にとって体感できます。

アップロード前チェックリスト

どの商品に画像を追加する前にも、一通り確認してください:

  • マスターサイズは 2048×2048 ピクセル(マルチチャネルなら 2000×2000)
  • 正方形アスペクト比がテーマ既定のグリッドに合致
  • JPEG 品質 80〜85 で書き出し(または WebP 品質 80)
  • 1 枚あたりのファイルサイズは 200〜500KB
  • ファイル名に説明性がある:product-name-color-angle.jpgIMG_4821.jpg ではない)
  • 画像ごとに alt テキストを記載、125 文字以内
  • 色が実物と一致(キャリブレーション済みディスプレイで確認)
  • Shopify 管理画面でバリエーション画像を正しく割り当て
  • アップロード後にデスクトップとモバイルでプレビュー確認済み
  • 実際に使うテーマで切り抜きをテスト済み

FAQ

Shopify は画像を自動で圧縮しますか?

します。Shopify は CDN 最適化版を提供し、対応ブラウザには WebP、ビューポートに合わせたサイズで配信します。ただし圧縮はアップロード時の画像にさらに非可逆でかける二段階——事前最適化したソースの方が、自動圧縮頼みより必ず結果が良くなります。

Shopify と Amazon で同じ商品画像を使えますか?

メイン商品画像は——はい、2000×2000 純白背景の 1 枚は両方で使えます。セカンダリは通常分ける必要があります:Amazon はメイン画像でロゴや大部分の文字オーバーレイを禁止し、セカンダリにも厳しいルールを適用します。Shopify は創造的自由が完全にあります。チャネル別のフォルダでタグ付けして管理してください。

ホームページのヒーローバナーの理想サイズは?

1920×1080 ピクセルが安全な既定値です。一部テーマは超ワイド表示用に 2400×1200 をサポートします。モバイル向けに最適化された切り抜き(1080×1080 または 1080×1350)は必ず用意してください——モバイルユーザーにはデスクトップバナーの中央を縦に切り出した帯ではなく、商品に寄った切り抜きを見せるべきです。

1 商品あたり何枚の画像が必要?

多くのカテゴリで 7〜8 枚が最適です:メイン白背景 1、追加アングル 2〜3、ライフスタイル/使用中 1〜2、スケール/サイズ参照 1、インフォグラフィック 1。4 枚未満だとリスティングが不完全に見え、10 枚超はノイズになるだけでコンバージョンは伸びません。

モバイルで商品画像がぼやけるのはなぜ?

よくある原因は 3 つ:(1) ソース画像が 2048px 未満で引き伸ばされている、(2) ソースが大きすぎてテーマが強く圧縮した版を配信している、(3) モバイルの Retina ディスプレイはデスクトップと描画が異なる——デスクトップで鮮明に見える画像が、3 倍密度のモバイル画面では軟らかく見えることがあります。対処法:鮮明な 2048×2048 のソースをアップロードし、縮小は Shopify に任せましょう。

参考資料

Shopify Product Image Best Practices 2026