Shopify商品画像のリサイズ
Shopifyの製品画像は、ズーム機能が役立つ十分な大きさである2048×2048ピクセルの正方形で最も効果的です。このツールはデフォルトでトリミングではなくパディングを行うため、製品全体がそのまま表示され、カタログ内のすべての写真が同じ形状になります。
PNG、JPG、WebP、GIFをドロップ
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式： PNG, JPG, JPEG, WebP, GIF, AVIF
Shopify商品画像のリサイズとは
Shopifyは製品写真に特定の形状を強制しませんが、それが問題なのです。カメラが撮影したものそのままで構築されたカタログでは、縦長、横長、正方形の写真が同じグリッド内に表示され、テーマによってそれぞれ異なる方法でパディングされるため、個々の写真が良質であっても全体がアマチュアっぽく見えてしまいます。
1つの形状を選択してすべての写真に適用することは、多くの小規模ストアができる最も大きな視覚的改善です。2048×2048の正方形が一般的な答えです。これはグリッドのサムネイルと製品ページの両方に適しており、2048ピクセルの解像度は、Shopifyのズームがソフトな拡大ではなく実際の詳細を表示するのに十分です。
このページはデフォルトで「画像全体を合わせる」を選択しており、他のページとは逆です。なぜなら、正方形にトリミングされた製品写真は製品の一部を失ってしまうからです。一方、パディングなら製品は失われません。
ご自身が選択したサイズで一括処理したい場合、画像リサイズツールは任意のピクセルサイズやパーセンテージに対応します。
ストアフロントの速度は重要です。エクスポートしたファイルが大きすぎる場合は、圧縮ツールが各ファイルを指定されたサイズに圧縮します。
製品画像ではなぜパディングがトリミングより良いのか
トリミングされた正方形はフレームの中央部分を切り取ります。瓶やランプ、ハンガーにかけたドレスなど、縦長の対象物のポートレート写真では、中央は対象物の中央になり、両端は失われてしまいます。
パディングは写真全体を縮小して収まりの良いサイズにし、残りの部分を背景色で埋めます。何も失われることはなく、対象物は一貫した正方形の中に完全に収まり、背景色をカタログ全体で統一することで、グリッドが一貫したセットのように見えます。
背景色の選択
純白がデフォルトであるには理由があります。ほとんどのテーマに合致し、白いページ上では目立たなくなり、Shopifyから連携されるマーケットプレイスもそれを期待しているからです。
製品自体が薄い色の場合は、純白では浮いたような感じになるため、淡いニュートラル色やブランドカラーが効果的です。どちらを選択するにせよ、すべての写真で同じ値を使用してください。わずかに異なる白が3つあるカタログよりも、大胆な色を使ったカタログの方が目立ちにくいです。
- ほとんどのカタログとマーケットプレイス連携には純白を使用
- 製品が白や非常に薄い色の場合は、ソフトなニュートラル色を使用
- カタログ全体で1つの値を選択し、再利用
- グラデーションは使用しない：異なるアスペクト比のグリッドでタイル化すると酷く見える
サイズと制限
Shopifyは大きな画像を受け入れ、テーマが必要とする小さなバージョンを生成します。重要なのは、製品ページのズームに十分な解像度がありつつ、必要以上にストレージ容量とアップロード時間を増やさないことです。
| 選択項目 | 値 | 理由 |
|---|---|---|
| 形状 | 1:1 正方形 | 一貫したグリッド；サムネイルと製品ページに適合 |
| サイズ | 2048 × 2048 | ズームで実際の詳細を表示するのに十分な解像度 |
| フォーマット | 写真にはJPEG | 同じ見た目の質量でPNGよりはるかに小さい |
| 背景 | 1つの値を再利用 | カタログをセットのように見せる要素 |
いつトリミングすべきか
フレームを埋める（Fill frame）にもまだ用途はあります。製品がシーンの一部であるライフスタイル写真では、トリミングしてタイトにした方がよく見えることが多く、詳細ショットは定義上トリミングです。
ルールは写真の目的に関するものです。カタログ画像は製品を表示し、ライフスタイル画像はアイデアを売ります。前者はパディングし、後者はトリミングし、両者を視覚的に区別してください。1つのギャラリーで両方の処理を混在させるべきではありません。
よくある質問
Shopifyの製品画像はどのサイズにすべきですか？
2048×2048ピクセルの正方形が、ほとんどのストアにとっての実用的な答えです。正方形にすることでカタログのグリッドを一貫させることができ、2048ピクセルの解像度は、Shopifyのズームが小さいファイルのソフトな拡大ではなく、実際の詳細を表示するのに十分です。
なぜこのページはトリミングではなくパディングを行うのですか？
正方形にトリミングされた製品写真は製品の一部を失ってしまうからです。縦長の対象物を中央からトリミングすると両端が失われます。パディングは写真全体を縮小し、残りの部分を背景色で埋めるため、対象物は完全なまま残り、すべての画像が同じ形状を持ちます。
製品写真の背景色は何を使うべきですか？
ほとんどのカタログでは純白を使用してください。これはテーマに合致し、白いページ上では目立たなくなり、マーケットプレイス連携にも適しています。製品自体が白や非常に薄い色の場合は、純白では薄い色の対象物に縁が見えなくなるため、ソフトなニュートラル色の方が適しています。1つの値をカタログ全体で使用してください。
すべての製品写真に同じ形状が必要ですか？
必須ではありませんが、そうすべきです。縦長、横長、正方形の写真が混在するグリッドは、小規模ストアが手作りに見えてしまう最も一般的な理由であり、再撮影することなく修正できます。すべてを1つの正方形にパディングすれば、カタログは一貫したセットのように見えます。
製品写真にはJPEGとPNGのどちらを使うべきですか？
ほとんどの場合はJPEGです。2048×2044ピクセルの正方形では、写真のPNGは目に見える利点がないにもかかわらず、写真のJPEGの数倍の大きさになります。ストアフロントの速度は重要です。PNGは、フラットな色のグラフィックまたは本当に透過が必要な場合にのみ意味を持ちます。
製品写真はアップロードされてリサイズされますか？
いいえ。デコード、スケーリング、パディング、エンコードはすべてこのブラウザのタブ内で実行され、画像を受信するサーバーはサイトにはありません。非公開の製品写真はあなたのデバイスに留まり、Networkパネルで確認してから信頼することができます。