はじめに
ECサイトを運営していると、避けて通れないのが商品画像の比率問題です。
商品写真は、商品の魅力を伝えるために
- 素材感を見せたい
- 質感を伝えたい
- ディテールを魅力的に見せたい
といった目的で、どうしてもアップ（寄り）の写真が多くなります。
しかしその結果、商品一覧ページで正方形サムネイルに揃えようとすると、
- 正方形にするための背景が足りない
- 引きの画像が少ない
- トリミングすると商品が切れてしまう
といった問題が起こります。
特に、照明や花器、器など「余白の美しさ」が重要な商材では、この問題はかなり深刻です。
本記事では、商品を切らずに正方形に整える方法として、次の2つを紹介します。
- Figmaで画像を拡張する方法
- Photoshopの「コンテンツに応じた塗りつぶし」を使う方法
どちらも、EC運用でそのまま使える現実的な手段です。
「なぜ正方形にする必要があるのか？」
商品画像を正方形に統一する理由は、見た目だけではありません。
正方形統一が必要になる主な理由
- 商品一覧ページでレイアウトが崩れない
- スマホ表示でサムネイルが見やすい
- 画像の高さが揃い、スクロールが快適になる
- サイト全体の印象が整い、ブランド感が出る
特にShopifyなどでは、テーマ側が正方形表示を前提としているケースも多く、画像の比率が揃っていないと運用コストが増えがちです。
「CSSでなんとかできないの？」
CSSで正方形にするだけでは解決しない理由
実装側で aspect-ratio: 1 / 1; や object-fit: cover; を使えば、表示上は正方形に揃えることができます。
しかしこの方法は、画像を中央で強制トリミングするため、
- 商品の一部が切れる
- 影や台座がなくなる
- 商品ごとに切れ方が変わる
といった問題が発生します。
ECでは「一覧での見え方」そのものが売上に直結するため、表示だけ整えるのではなく、画像自体を整える方が安全です。
解決方法①：Figmaで拡張する
Figmaには、画像の足りない部分を補完して拡張できる機能があります。
白背景やシンプルな背景の画像であれば、短時間で自然な仕上がりにできるため、実務でも使いやすい方法です。
Figma操作方法
STEP 1：画像を選択後、トリミングを選択
STEP 2：正方形になるまで範囲を広げる
枠線を引っ張って正方形になるようにのばします
STEP 3：右下の生成アイコンをクリック
STEP 4：正方形に拡張完了
30秒ほどで補完された画像が出来上がりました！
解決方法②：Photoshop「コンテンツに応じた塗りつぶし」
Photoshopの「コンテンツに応じた塗りつぶし」は、選択した範囲を周囲の背景から解析し、自然に補完してくれる機能です。
Figmaよりも精度が安定しやすく、影やグラデーションがある商品写真でも破綻しにくいのが特徴です。
Photoshop操作方法
STEP 1：カンバスサイズを正方形に変更
画像を開きます
イメージからカンバスサイズをクリック
カンバスサイズを正方形になるように数値を入力
STEP 2：余白部分を選択
自動選択ツールをクリック
自動選択ツールを使って、新しく追加された空白部分を選択する
STEP 3：コンテンツに応じた塗りつぶし
編集メニューからコンテンツに応じた塗りつぶしをクリックすると自動でプレビュー画面に切り替わり、背景画像を自動で補完します。
STEP 4：適用 → 完成
OKボタンをクリックすると適応になります。
「どっちを使うべき？」のまとめ
FigmaとPhotoshopの使い分け
| 状況 | おすすめ |
| 背景が白・シンプル | Figma |
| 影・床・壁がある | Photoshop |
| 仕上がりの安定性を優先したい | Photoshop |
| まずは手軽にやりたい | Figma |
失敗しやすいポイント
よくある失敗例（実務メモ）
- 余白を広げすぎて生成が破綻する
- 商品の輪郭に生成がかかり違和感が出る
- 影の方向が変わって不自然になる
おすすめは「一気に正方形にする」のではなく、少しずつ拡張して調整することです。
まとめ
EC運用では、商品画像の比率統一は避けられません。
特に寄りの写真が多い場合、正方形にするための背景が足りず、トリミングでは対応できないケースが多くあります。
そのようなときは、
- Figmaで拡張する
- Photoshopのコンテンツに応じた塗りつぶしを使う
という方法で、商品を切らずに自然な正方形画像を作ることができます。
商品一覧の印象は、サイト全体の品質や売上にも直結します。
画像比率を整えることは、地味ですが効果の大きい改善です。
