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 枚、その色を示す画像。これが買い手の期待です——「赤」をクリックしたら赤い商品が表示されるべきで、白ではいけません。
ファッション・ホーム向けの上位構成:
- 主バリエーション画像:全色で同じ角度、同じ照明、同じ構図(視覚比較のため)
- セカンダリのライフスタイル画像:バリエーションに合わせた色で使用シーン
- ディテール画像:色・質感を正確に示すクローズアップ
サイズバリエーションには通常、個別画像は不要ですが、サイズで見た目が大きく変わる場合(例:小さいバッグと大きいバッグでプロポーションが異なる)は別です。服なら、モデル着用画像のセットとサイズチャート画像で十分です。
色の精度が決定打: 買い手はバリエーション画像が画面上の色と合うことを期待します。スタジオ照明で色が転んでいるなら、アップロード前に補正してください。色関連の返品は、色違いバリエーションでの「画像と実物の不一致」が大部分を占めます。
ページ速度と画像サイズは本当にコンバージョンに影響する?
します、測定可能なほどに。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.jpg(IMG_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 に任せましょう。
