多くのストアが間違えているWooCommerceの商品画像サイズ（2026）

WooCommerceの商品画像サイズは、オンラインストアにおいて最も見落とされがちな設定の一つです。ほとんどのストアオーナーは、カメラで撮影した画像をそのままアップロードし、WooCommerceをデフォルト設定にして、そのままにしておきます。.

そして彼らは、なぜ一部のページで商品画像がぼやけて見えるのか、なぜCore Web Vitalsスコアが低いのか、なぜモバイルユーザーが商品ページが読み込まれる前に離脱してしまうのか、と疑問に思うのです。

Seahawk Mediaでは、あらゆる業界のWooCommerceストアを手がけていますが、常に同じパターンが見られます。画像サイズの問題が完全に無視されているか、商品カタログ全体で一貫性のない対応しかされていないのです。.

どちらも売上を減少させます。WordPressとWooCommerceを活用した、適切に構築され、高いパフォーマンスを発揮するECサイトが実際にどのようなものかをご覧になりたい場合は、弊社のポートフォリオで様々な業界における実例をご覧いただけます。

このガイドでは、2026年版で有効な正確なサイズ、WooCommerceが実際に画像サイズをどのように処理するか、アップロードすべき内容、画像のフォーマット方法、そして販売に集中できるように画像を自動的に最適化するツールについて解説します。.

要約：WooCommerceの商品画像サイズ

• ほとんどのストアにとって最適なWooCommerceの商品画像サイズは、単一商品ページでは800 x 800ピクセル、カタロググリッドでは600 x 600ピクセルです。.

• WooCommerceが品質を損なうことなくあらゆるサイズを生成できるよう、ソース画像は最低でも1200×1200ピクセルでアップロードしてください。.

• WooCommerceは、単一商品画像、カタログサムネイル、ギャラリーサムネイルの3種類の画像サイズを自動的に作成します。.

• 2026年にはWebP形式を採用しましょう。同じ画質であればJPEGよりも25～35%ファイルサイズが小さく、ブラウザのサポート率も97%です。.

• 画像の圧縮とサイズ設定変更後のサムネイル再生成には、必ずShortPixelを使用してください。.

• 画像サイズが間違っていると、画像がぼやけたり、読み込み速度が遅くなったり、Core Web Vitalsの指標が不合格になったり、売上損失につながったりします。.

WooCommerceは画像サイズをどのように処理しますか？

サイズを選択する前に、WooCommerceがアップロードした画像をどのように使用するかを理解しておくと役立ちます。WooCommerceは3つの画像サイズを登録し、アップロード時にソースファイルから自動的に生成します。.

それぞれの機能とそのデフォルト値は以下のとおりです。

画像サイズ	デフォルトの寸法	使用される場所
商品単体画像（woocommerce_single）	幅600ピクセル、トリミングなし	各商品ページのメイン画像
カタログサムネイル (woocommerce_thumbnail)	幅300ピクセル、正方形に切り抜かれた画像	ショップページグリッド、カテゴリページ、検索結果
ギャラリーサムネイル (woocommerce_gallery_thumbnail)	100 x 100ピクセル、正方形にトリミング	メイン商品画像の下にギャラリーナビゲーション用の小さな画像が表示されます

ここで重要なのは、これらのデフォルト設定は保守的であるということです。300ピクセルのカタログサムネイルはデスクトップのグリッド上では許容範囲内に見えますが、最新のRetinaディスプレイでは明らかにぼやけて見えます。600ピクセルの単一商品画像では、高品質なズーム機能を実現する余地がありません。ほとんどのストアは、初日からこれらの設定を調整する必要があります。.

2026年に推奨されるWooCommerce商品画像サイズ

要約すると、ソース画像は1200×1200ピクセル以上のサイズでアップロードしてください。単一商品の画像は幅800ピクセル、カタログのサムネイル画像は幅600ピクセルに設定してください。

ページ速度、コンバージョン率のバランスが取れた推奨サイズ設定は以下のとおりです

画像タイプ	推奨サイズ	注記
ソースアップロード（オリジナル）	最小サイズ：1200 x 1200ピクセル	WooCommerceに十分な解像度を与え、品質を損なうことなくあらゆるサイズを生成できるようにします。
商品ページ画像	800 x 800ピクセル	鮮明でズーム対応、あらゆるモダンなテーマに対応
カタログサムネイル	600 x 600ピクセル	デスクトップとモバイルで見やすいグリッド表示、Retinaディスプレイ対応
ギャラリーサムネイル	150 x 150ピクセル	ギャラリーナビゲーションが見やすく明確

正方形のアスペクト比は、WooCommerceのグリッドが統一された商品カードを中心に構築されているため、ほとんどのストアに最適です。カタログ全体で一貫した1:1の比率を使用することで、プロフェッショナルで一貫性のあるレイアウトが実現し、顧客の信頼を高めることができます。.

テーマが正方形以外の比率（縦長や横長など）を使用している場合は、寸法をテーマの仕様に合わせ、すべての製品でその比率を一定に保ってください。.

WooCommerceの商品タイプ別画像サイズ

上記の推奨サイズは、一般的な小売店に適しています。ただし、販売する商品によって画像の要件は大きく異なります。以下に、商品カテゴリー別の具体的な内訳を示します。.

• 衣類・アパレル：幅800～1000ピクセルの画像であれば、生地の質感、縫製、フィット感を十分に表現でき、ファイルサイズも不必要に大きくなりません。グリッドを均一に保つため、すべての衣類画像の縦横比を統一してください。

• ジュエリー：細部まで鮮明なクローズアップ写真は不可欠です。宝石、彫刻、精巧な金属細工の美しさを表現するには、高解像度の画像が必要です。幅1000～1500ピクセルの画像を使用し、お客様が細部まで確認できるよう、テーマがズーム機能に対応していることを確認してください。

• 電子機器：ノートパソコン、スマートフォン、カメラなどの製品では、技術的な詳細が重要です。顧客はラベルを読み、ポートを確認し、部品を検査する必要があります。あらゆるディスプレイタイプで鮮明さを維持するために、幅1200～1400ピクセルの画像を使用してください。

• 家具やインテリア：これらの商品は、サイズ感、質感、部屋の中での配置などを示すライフスタイル画像が重要です。1200～1600ピクセルの画像が適しています。縦長と横長の比率が一般的ですので、正方形にトリミングするのではなく、テーマのレイアウトに合わせてください。

• デジタル製品およびソフトウェア：ここでは小さめの画像で問題ありません。800×800ピクセルの鮮明なスクリーンショットやモックアップで十分です。

WooCommerceの画像サイズを変更する方法は？

WooCommerceで画像サイズを変更するのは5分もかかりません。重要なのは、何を変更すべきか、そして変更後に何をすべきかを知ることです。.

ステップ1： WordPressダッシュボードで「外観」→「カスタマイズ」に移動します。

ステップ2： WooCommerceに移動し、「商品画像」を選択します。

ステップ3：サムネイルのトリミングとサイズを調整します。変更を加えると、右側にプレビューが表示され、更新されます。「公開」をクリックして変更を保存します。

カスタマイザーでこれらの設定を変更すると、WooCommerceが今後使用する寸法が更新されます。ただし、サムネイル。この手順を省略することは、画像設定を更新した後にストアオーナーが犯しがちな最も一般的な間違いの1つです。

ステップ4： Regenerate Thumbnailsプラグインをインストールし、メディアライブラリ全体で実行します。これにより、既存のすべての画像が新しいサイズに再処理されます。大規模なカタログの場合、この処理はバックグラウンドで実行され、数時間かかることがありますが、ユーザーによる追加の操作は必要ありません。

2026年にはどの画像フォーマットが使われるべきか？

要するに、 WebPを主要な画像フォーマットとして使用しましょう。JPEGと同等の画質でありながら、ファイルサイズは25～35%小さく、2026年時点で世界のブラウザの97%が対応しています。

画像フォーマットに関する議論は、過去2年間で決定的に変化しました。ここでは、各フォーマットの現状を解説します。.

• WebPは、2026年現在、ほとんどのWooCommerce商品画像にとって最適な選択肢です。主要なブラウザはすべてWebPをサポートしており、写真、商品切り抜き、透過画像にも対応しています。

品質80～85のWebPは、品質90～95のJPEGと見た目上は区別がつかないものの、ファイルサイズは大幅に小さくなります。もしストアでまだWebPを提供していないのであれば、今年最も効果的な画像変更となるでしょう。.

• JPEGは商品写真の撮影には依然として使用可能ですが、もはや最適な選択肢ではありません。JPEGは透過性をサポートしておらず、同等の画質であればWebPよりもファイルサイズが大きくなります。

• PNGは、色付きの背景に商品画像を重ねたり、テキストを重ねたりするなど、透明度が本当に必要な場合にのみ使用してください。PNGファイルは、写真の場合、WebPやJPEGよりもかなりサイズが大きくなります。標準的な商品写真にはPNGを使用しないでください。

• AVIFはWebPに続く次世代フォーマットで、さらにファイルサイズが小さくなります。ブラウザのサポートは拡大していますが、一般的なWooCommerceストアでメインフォーマットとして使用できるほど普及しているとは言えません。今後の動向を注視していく価値はありますが、現時点ではほとんどのストアで推奨されるフォーマットではありません。

すべての画像を手動で再エクスポートすることなく、WooCommerceのメディアライブラリ全体をWebP形式に変換する最も簡単な方法は、ShortPixelを使用することです。.

この画像を圧縮し（お客様のホスティングリソースには影響を与えません）、WebPとAVIFに自動的に変換して、各ブラウザに最適な形式で配信します。グロッシー圧縮モードは商品写真に最適な設定で、画質を損なうことなくファイルサイズを40～60%削減します。

画像サイズがGoogle検索ランキングに影響する理由とは？

商品画像のサイズは、単なる見た目の問題ではありません。多くの店舗オーナーが十分に理解していない2つの具体的な方法で、Google検索における店舗のパフォーマンスに直接影響を与えます。.

コアウェブバイタルと最大のコンテンツペイント

Google は、これらの指標を使用してページ読み込みエクスペリエンスを測定します。メインの表示コンテンツがどれだけ速く読み込まれるかを測定するLargest Contentful Paint 指標WooCommerce の商品ページ。

最適化されていない3MBのヒーロー画像は、確実にLCPエラーを引き起こし、検索ランキングを直接低下させます。商品画像を適切に設定することは、 WooCommerceサイトの速度とSEOパフォーマンスを向上させるための最も具体的な対策の一つです。

画像検索と構造化データ

2026年には、Google LensやAIを活用した検索など、ビジュアル検索ツールがeコマースにおける商品発見においてますます重要になります。適切なProductおよびImageObjectスキーママークアップ、リッチイメージ検索結果に表示される可能性が大幅に高まります。

AIOSEOやRank MathなどほとんどのSEOプラグインはこれを自動的に処理しますが、サムネイルではなく、最高解像度の画像バリアント（800ピクセル以上）を指定する必要があります。画像サイズを変更した後は、スキーマ設定でこの点を確認してください。

モバイルパフォーマンス

モバイルユーザーの53%は、読み込みに3秒以上かかるページを離脱します。モバイル商品ページでは、商品画像がほぼ常に最も容量の大きい要素です。最適化された画像サイズ、WebP形式、そして遅延読み込みを組み合わせることで、モバイルパフォーマンスを良好に保つことができます。

eコマースサイトの最適化というより広い視野の中でどのように位置づけられるのかを包括的に理解するには、画像からチェックアウトまであらゆる段階を網羅した完全ガイドをご覧ください。

WooCommerceでよくある画像の問題とその解決方法

よくある問題点とその解決方法を以下に示します。

• 商品画像がぼやける原因は、ほとんどの場合、WooCommerceで設定したサイズよりも小さい画像をアップロードしていることです。商品画像のサイズを800ピクセルに設定しているにもかかわらず、400ピクセルのソースファイルをアップロードすると、WooCommerceが画像を引き伸ばしてしまい、画質が低下します。ソース画像は必ず1200ピクセル以上でアップロードしてください。ソース画像を修正したら、「サムネイル再生成」プラグインを実行してください。

• 商品グリッドのレイアウトが不均一になる原因：カタログ全体でアスペクト比の異なる画像をアップロードしていることが原因です。縦長、横長、正方形の画像が混在すると、商品グリッドが不均一になり、プロフェッショナルな印象を与えず、信頼性を損ないます。アップロードする前にすべての商品画像を同じアスペクト比に統一し、WooCommerceでハードクロップを設定して一貫性を確保してください。

• デスクトップでは画像が綺麗に表示されるのに、モバイルではぼやけて見える場合：これは通常、Retinaディスプレイの問題です。最新のスマートフォンは高密度ディスプレイを採用しているため、鮮明に表示するには、CSSのピクセル寸法の2倍の画像サイズが必要です。モバイルデバイスでRetinaディスプレイ並みの鮮明さを確保するには、カタログのサムネイルサイズを300ピクセルではなく600ピクセルに設定してください。

• 商品画像からのページ読み込み速度が遅い場合： WooCommerceストアの読み込み速度が遅くなる最も一般的な原因は、圧縮されていない大きなファイルです。ShortPixelをインストールし、メディアライブラリの一括最適化を実行して、WebP配信を有効にしてください。大規模なカタログを持つストアの場合、この変更だけで、他のどの最適化作業よりも大きなパフォーマンス改善効果が得られることがほとんどです。

• サイズ設定を変更しても画像が更新されない場合：カスタマイザーでサイズを変更したにもかかわらず、画像が以前のサイズで表示されています。これは、サムネイルが再生成されていないことを意味します。サムネイル再生成プラグインを実行して、既存のすべての画像を新しいサイズに再処理してください。

WooCommerceの画像最適化に最適なツールスタック

画像のサイズや圧縮率を手動で管理する必要はありません。適切なWordPress画像最適化プラグインの組み合わせを使えば、アップロードした瞬間からすべてが自動的に処理されます。

• ShortPixelは画像圧縮とWebP変換に対応しています。商品撮影にはGlossyモードをご利用ください。サーバー側で画像を圧縮し、既存ライブラリの一括最適化をサポートし、対応ブラウザにはWebPを自動的に配信します。WooCommerceストアにとって、 ShortPixelは品質、コスト、自動化の最適なバランスを提供します。

• Regenerate Thumbnailsは、WooCommerceで画像サイズを変更する際に必要となる無料プラグインです。インストール後、サイズ変更のたびに実行するだけで、あとはバックグラウンドで自動的に処理してくれます。まさにワンタスク型のプラグインですが、その役割をしっかりと果たしてくれます。

• MonsterInsightsは、ストアをGoogle Analytics 4に接続し、どの商品ページの直帰率。これは、特定のページにおける画像パフォーマンスの問題を示している可能性があります。

結論

WooCommerceの商品画像サイズを適切に設定することは複雑ではありませんが、デフォルト設定に頼るのではなく、意図的に決定する必要があります。.

• 1200×1200ピクセル以上のソース画像をアップロードしてください。.

• 商品単体の画像サイズを800ピクセル、カタログのサムネイルサイズを600ピクセルに設定してください。WebP形式を使用してください。.

• ShortPixelの光沢モードで圧縮してください。サイズ変更後はサムネイルを再生成してください。カタログ全体でアスペクト比を統一してください。.

これらの手順は、視覚的な品質、Core Web Vitalsスコア、モバイルパフォーマンス、検索表示順位を同時に向上させます。商品画像が顧客の購買意欲を左右する主要なツールであるECサイトにとって、これはオプションのメンテナンスではなく、コンバージョン率の高いストアの基盤となるものです。.

総合評価： WooCommerceのデフォルト画像設定は出発点としては機能しますが、最新のRetinaディスプレイ、WebP配信、Core Web Vitalsには最適化されていません。2026年までに本格的なWooCommerceストアをするなら、画像の寸法調整、WebPへの切り替え、ShortPixelによる圧縮は最低限必要な設定です。

よくある質問