Picovert

Shopify画像サイズガイド — 商品、バナー、ロゴのサイズ

Picovert チーム著2026-03-295分で読了

Shopifyには各画像タイプに対する特定の要件があり、間違ったサイズを使用すると商品写真がぼやけたり、 レイアウトが崩れたり、コンバージョン率に影響するページの読み込みが遅くなります。このガイドでは、 商品画像、バナー、コレクション画像、ロゴなど、すべてのShopify画像タイプの正しい寸法を説明します。

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

  • 商品画像：2048×2048 px（正方形、1:1）
  • コレクション / カテゴリ画像：1800×1000 px（16:9）
  • ヒーロー / スライドショーバナー：1800×600 px〜2000×800 px
  • ロゴ：最大450×250 px
  • ブログ投稿のアイキャッチ画像：1200×675 px（16:9）
  • ファビコン：32×32 px（または16×16 px）
  • 最大ファイルサイズ：画像あたり20 MB
  • 対応フォーマット：JPG、PNG、GIF、WebP

Shopifyの商品画像サイズ

Shopifyは商品画像に2048×2048 pxの正方形を推奨しています。その理由は：

  • 正方形（1:1）比率：すべてのShopifyテーマは一貫した正方形グリッドに 商品画像を表示します。正方形でない画像はテーマによってレターボックス処理またはクロップされます — 予期しないクロップを避けるために正方形画像を使用してください。
  • 2048 px：Shopifyの組み込みズーム機能をサポートするのに十分な大きさです。 顧客が商品画像をズームすると、Shopifyはアップロード解像度までスケールアップします。 2048 pxでアップロードするとズームがシャープに見えます。
  • 一貫性：コレクション内のすべての商品画像は同じ比率である必要があります。 混合比率は商品グリッドを不均一に見せます。

商品画像が長方形の場合（例：バナー商品や衣類のフラットレイ）、2つのオプションがあります： 正方形にクロップするか、ストア内のすべての画像で一貫した比率を使用してください（Shopifyは ストア内のすべての画像が一致する限り、どの比率も許可します）。

ヒーローバナー / スライドショー画像サイズ

Shopifyのヒーローバナー（ホームページの全幅画像）は顧客の画面に応じて異なる幅で表示されます。 デバイス間でうまく機能する安全なサイズ：

  • 幅：1800〜2000 px（ほとんどのデスクトップモニターをカバー）
  • 高さ：600〜800 px（標準バナー）または1080 px（全高ヒーロー）
  • アスペクト比：標準バナーの場合、約3:1〜2.5:1
  • ファイルフォーマット：写真にはJPG（500 KB〜1 MB）、テキストの多い グラフィックにはPNG

スクロール前部分の高速ロードのためにヒーローバナーを1 MB以下に保ってください。遅いヒーロー 画像はLCP（最大コンテンツフルペイント）とコンバージョン率に直接影響します。

コレクション画像サイズ

コレクション画像はコレクション一覧ページ（例：「レディースシューズ」、「サマーコレクション」） に表示されます。推奨サイズ：

  • 横長コレクション画像には1800×1000 px（16:9）
  • 正方形コレクションサムネイルには800×800 px（1:1）

ShopifyのロゴサイズN

Shopifyテーマはロゴ表示を最大幅450 pxに制限しています。アップロード寸法：

  • 最大サイズ：450×250 px
  • フォーマット：透明背景のPNG（どのヘッダーカラーでも正しく表示）
  • Retinaディスプレイ用：2倍（900×500 px）でアップロード — Shopifyが 半分のサイズで表示

Shopifyの画像ファイルサイズ制限

Shopifyはファイルあたり最大20 MBの画像を受け付けますが、大きな画像はストアを遅くします。 実用的な目標値：

  • 商品画像：500 KB以下（ShopifyはCDNを通じて自動最適化して提供しますが、 小さなオリジナルはより少ない処理を意味します）
  • バナー画像：1 MB以下
  • ロゴ：100 KB以下

Shopifyは自動的に画像を圧縮し、グローバルCDNを通じて提供します。ただし、オリジナルのアップロードが すでに最適化されているときに最もよく機能します — オリジナルが大きすぎるとShopifyの圧縮はロッシーで JPEGアーティファクトが追加されます。

ShopifyでのWebPサポート

Shopifyはアップロードされた画像を自動的にWebPに変換し、サポートするブラウザ（すべての 最新ブラウザ）にWebPを提供します。これは次を意味します：

  • JPGまたはPNGをアップロードできます — ShopifyがWebP変換を処理
  • WebPを直接アップロードすることもサポートされています
  • Shopifyは各画面に適したサイズを提供するためにレスポンシブ画像（srcset）を使用

Shopify商品画像の準備方法

  1. 高解像度で商品写真を撮影またはソースしてください（短辺で最低2000 px）。
  2. 画像が正方形でない場合は、 クロップツールを使用して1:1の比率にクロップしてください。 周囲に白いスペースを残して商品を中央に配置してください。
  3. リサイズツールを使用して画像を正確に2048×2048 pxに設定してください。
  4. 圧縮ツールを使用してJPGファイルを80〜85%品質で500 KB以下に してください。
  5. 商品写真にはJPG、透明度のある画像（例：白い背景除去）にはPNGで保存してください。

よくあるShopifyの画像問題

  • 商品グリッドが不均一に見える：画像が混合アスペクト比を持っています。 すべての商品画像を1:1（正方形）に標準化して修正してください。
  • ズーム時に商品画像がぼやけて見える：画像が小さすぎてアップロードされました （1000 px以下）。最低2048 pxを使用してください。
  • ページの読み込みが遅い：バナーまたは商品画像が大きすぎます（2 MB超）。 アップロード前に圧縮してリサイズしてください。
  • Retinaスクリーンでロゴがぼやけて見える：ロゴが2倍ではなく表示サイズで アップロードされました。450×250 px表示ロゴには900×500 pxでアップロードしてください。
  • カラーヘッダーでロゴの背景が見える：ロゴがJPGでアップロードされました （白い背景）。透明背景のPNGとして再エクスポートしてください。