Picovert

WooCommerceの画像サイズガイド：商品・サムネイル・ギャラリー

Picovert チーム著2026-04-065分で読了

WooCommerceストアは画像で商品を販売します — ぼやけた画像や大きすぎる画像は コンバージョン率とページ速度の両方に悪影響を与えます。WooCommerceは画像のトリミングと リサイズを自動的に処理しますが、最初から正しいサイズとファイルサイズでアップロードしてこそ うまく機能します。このガイドでは、ストアのすべての画像タイプに必要な正確なサイズを説明します。

WooCommerceの画像処理方法

WooCommerceはすべてのアップロードから複数の画像サイズを生成します：

  • 単一商品画像：商品詳細ページに表示される大きな画像
  • 商品サムネイル：商品リスト、カート、関連商品に使用される小さな画像
  • 商品カタログ画像：ショップ、カテゴリ、アーカイブページに使用される中程度の画像

これらのサイズはWooCommerce → 設定 → 商品 → 表示で設定します。WordPressも独自の 画像サイズを生成するため、サーバーには各画像のコピーが5〜10個になります — 最初から正しく サイズ調整された元画像を使う理由がここにあります。

推奨WooCommerce画像サイズ

  • 商品メイン画像（単一商品ページ）：最小800×800 px、推奨1000×1000 px （正方形）。ほとんどのWooCommerceテーマは正方形またはほぼ正方形の商品画像を使用します。 Retinaディスプレイでの鮮明な表示には表示サイズの2×でアップロード — 1000 pxは500 px 表示時にシャープです
  • カタログ / ショップページ画像：600×600 px〜800×800 px。 商品グリッドに表示される画像です。正方形画像は商品間で一貫したレイアウトを提供します — カタログで縦長と横長の向きを混在させないでください
  • サムネイル（カート、関連商品）：150×150 px〜300×300 px。 小さくて速い；各30 KB未満に保つ
  • 商品ギャラリー画像：ズーム可能なライトボックス用1000×1000 px。 WooCommerceのズーム機能にはより大きなソース画像が必要です — 1200×1200 pxでアップロードすると ズーム機能に余裕が生まれます
  • カテゴリバナー / ヘッダー：テーマによって1200×400 px〜1920×600 px。 幅広の横長画像です；小さな画面でのクロップを避けるためキーコンテンツを中央に配置してください

ファイル形式と品質

  • JPEG：すべての商品写真に使用 — 衣料品、電子機器、食品、ライフスタイル写真。 80〜85%品質でエクスポート。85% JPEG品質の1000×1000商品写真は80〜150 KBになるべきです
  • PNG：透明背景が必要な場合のみ使用 — 白色またはカスタム背景の独立した 商品写真。PNG商品画像は同等のJPEGの3〜5倍のサイズです； ファイルサイズを小さくするには画像圧縮を使用してください
  • WebP：最新テーマとページビルダーはWebPをサポートしています； 同じ品質でJPEGより25〜35%小さいファイルを提供します。テーマとCDNがサポートしていれば、 アップロード前にJPEG商品画像をWebPに変換してください
  • TIFF、BMP、HEICは避ける：これらの形式はウェブ配信に最適化されておらず、 ロード時間が大幅に増加します

ファイルサイズ目標

  • 商品メイン画像：1画像あたり200 KB未満。1000×1000 JPEGは80〜150 KBを目標
  • カタログ画像：各100 KB未満
  • サムネイル：各30 KB未満
  • ギャラリー画像：各200 KB未満 — ギャラリー画像5枚の商品ページは 合計1 MB以下にする

大きな画像は遅いWooCommerceページの最も一般的な原因です。Google PageSpeed Insightsは 200 KBを超える画像に警告を表示します — 遅いストアは顧客が商品を見る前に離脱します。 アップロード前に画像圧縮を使用してください。

アスペクト比：正方形が最適な理由

WooCommerceテーマは商品間で一貫した画像サイズを期待します。1つの商品画像が800×600 （横長）で別が600×900（縦長）の場合、WooCommerceはどちらも正方形にトリミングして 写真の重要な部分が切れる可能性があります。

  • すべての商品画像をアップロード前に1:1正方形比率に撮影またはトリミングします。 これにより、サムネイルとカタログに表示される内容を最も制御できます
  • 画像トリミングを使用して商品写真を正方形に変換し、 すべての面に同等の余白を付けて商品を中央に配置してください
  • 衣料品や縦長の商品の場合、テーマが非正方形画像をサポートしていれば4:5比率 （800×1000 px）も使用できます — 期待される比率はテームドキュメントを確認してください

サイズ変更後のサムネイル再生成

商品アップロード後にWooCommerceの画像サイズを変更した場合、既存の画像は自動的に 更新されません。サムネイルを再生成する必要があります：

  • 無料のRegenerate Thumbnailsプラグインをインストールし、 画像サイズ設定変更後に実行してください
  • またはWP-CLIを使用：wp media regenerate --all
  • 大規模なストアでのサムネイル再生成は数分かかる場合があります — トラフィックが少ない時間帯に実行してください

ステップバイステップ：WooCommerce商品画像を準備する

  1. 1200×1200 px以上で商品画像を撮影または入手してください。 正方形画像はWooCommerceの予期しないトリミングを防ぎます
  2. すべての面に同等の余白を付けて商品を中央に配置しながら1:1正方形比率に トリミング。一貫した余白がプロフェッショナルなカタログを作ります
  3. メイン商品画像とギャラリー用に1000×1000 px、またはカタログ専用画像は600×600 pxに リサイズ
  4. 商品画像を150 KB未満に圧縮。 80〜85% JPEG品質を使用するか、より小さいファイルのためにWebPに変換
  5. 最適化した画像をWooCommerce商品画像としてアップロード。ギャラリー画像は 商品エディタで追加商品写真として追加

WooCommerce画像サイズクイックリファレンス

  • 商品メイン画像：1000×1000 px、JPEG 80〜85%、150 KB未満
  • カタログ画像：600×600 px〜800×800 px、100 KB未満
  • サムネイル：150×150 px〜300×300 px、30 KB未満
  • ギャラリー（ズーム可能）：1200×1200 px、200 KB未満
  • カテゴリバナー：1200×400 px〜1920×600 px、JPEG
  • 比率：すべての商品画像に1:1正方形