商品画像を正方形にするPhotoshopの手順｜服を切るか余白を足すかを4枚で検証
セントラルオフィス編集部公開日 約16分で読めます
スマートトリミングAIを開発している株式会社セントラルオフィスです。
服は縦長に撮ることが多いので、楽天やInstagram用に正方形へ直すたびに、裾を切るか、左右に白を足すかで手が止まる方も多いのではないでしょうか。
Adobeのコミュニティでも、2024年6月にサングラス約150点を白背景の1024×1024pxにそろえたいという相談があり、大きさも位置もばらばらな写真を1枚ずつ合わせるのは無理だと書かれていました（Adobe Community の投稿）。
ただ、服で同じことをするなら、どこまで切ってよくて、白を足すとどれだけ小さく見えるのでしょうか。
そこで、縦長の服の写真を4枚用意し、3通りのやり方で正方形にして、服が何%切れて、何%の大きさで残るかを測りました。
Photoshopで正方形の商品画像をまとめて作りたい方は参考にしてください。
結論：服を切らずに余白をそろえて正方形にする
結論から言うと、1枚目の商品画像は服を切らず、服の範囲を基準に上下左右の余白をそろえて正方形にするのがいちばん外れません。
中央で正方形に切ると、ワンピース・コート・パンツは服の面積の27.0〜30.6%が枠外に出て、首元と裾が両方とも消えました。
なので、Photoshopでは「トリミング」で服の範囲だけを残してから、決まった大きさのカンバスに白を足す流れをアクションにしておくのがおすすめです。
画像は生成したものです。
手順
- 背景の白を255にそろえる。 レベル補正などで、背景の明るい灰色を真っ白にします
- イメージ → トリミングで服の範囲だけを残す。 基準は「左上のピクセルの色」です
- ファイル → 自動処理 → 画像を一定サイズに収めるで長辺を1080pxにする。 幅と高さに同じ値を入れます
- イメージ → カンバスサイズで1200×1200pxにする。 基準位置は中央、カンバス拡張カラーはホワイトです
- 1〜4をアクションに記録し、ファイル → 自動処理 → バッチで全商品に流す。
1080÷1200で、服の長辺は正方形の90%になり、上下左右に5%ずつ余白が残ります。
コツ
- トリミングの前に背景を255にする。 生成した4枚は白く見えるのに、そのままトリミングの計算をかけると4枚とも0pxしか切れませんでした
- 白を足すだけで済ませない。 元の写真の余白がそのまま残るので、4枚の服の高さは正方形の86.3〜99.2%とばらつきます
- 背景が白でない写真には白を足さない。 灰色の背景に白を足すと、境目の明るさの差は84.3になりました
ここからは、試した条件と4枚の結果を見てから、Photoshopでの操作とモールの決まりに進みます。
試した条件
写真は、白背景のトルソーに着せたワンピースとロングコート、平置きのワイドパンツとニットの4枚です。
どれも Codex の画像生成で作ったもので、3枚が2:3の1024×1536px、ニットだけ3:4の1086×1448pxでした。
Photoshop 本体は動かせないため、Photoshopの操作と同じ計算をPythonでしています。
服の範囲は、背景の色との差が30以上の画素を囲んだ長方形で、トルソーの首も服の範囲に入れました。
比べたやり方は、次の3通りにしました。
| やり方 | 中身 | Photoshopでの操作 |
|---|---|---|
| 中央で切る | 写真の幅を1辺にして、縦の中央から正方形に切る | 切り抜きツールの「1:1（正方形）」 |
| 白を足す | 写真の高さを1辺にして、左右に白を足す | カンバスサイズで幅を高さに合わせる |
| 服に合わせて余白 | 服の範囲の長辺が1辺の90%になる正方形を、服の中心で取る | トリミング＋画像を一定サイズに収める＋カンバスサイズ |
服に合わせるやり方の余白を5%にしたのは、白を足すやり方で長い服が上下の端に接していたためです。
4枚×3通りの結果
画像は生成したものです。
| 服 | 中央で切る：枠外の面積 | 中央で切る：枠外の高さ | 白を足す：服の高さ | 白を足す：服の幅 | 服に合わせて余白：服の高さ | 服に合わせて余白：足した白 |
|---|---|---|---|---|---|---|
| ワンピース | 30.6% | 32.3% | 98.4% | 35.4% | 90.0% | 39.0% |
| ロングコート | 27.0% | 32.8% | 99.2% | 44.1% | 90.0% | 39.5% |
| ワイドパンツ | 29.5% | 31.4% | 97.1% | 56.2% | 90.0% | 38.2% |
| ニット | 6.5% | 13.1% | 86.3% | 72.9% | 90.0% | 21.8% |
高さと幅は正方形の1辺に対する割合で、足した白は左右に足した幅の合計を1辺で割って出しました。
中央で切ると首元と裾が落ちる
中央で切ったときに落ちたのは、長い3枚で上が232〜246px、下が236〜254pxでした。
画像は生成したものです。
服の高さで見ると31.4〜32.8%が枠の外に出て、コートは襟、パンツはウエストのボタン、ワンピースは裾の広がりが見えなくなりました。
着丈やシルエットが分からない1枚目は、検索結果で丈の長さを比べる人にとって情報が足りません。
切れる量が少ないのはニットで、面積で6.5%でしたが、それでも首の縁と裾のリブは上下合わせて163px落ちました。
中央で切ってよいのは、服全体を見せる役ではない2枚目以降の寄りの写真、というのが今回の判断です。
白を足すだけだと元の余白が残る
白を足すやり方なら服は1pxも切れず、長い3枚の高さは97.1〜99.2%と大きく残りました。
その代わり、元の写真で上下の余白がほとんどなかったため、コートは裾が正方形の下端まで2px、ワンピースは上端まで10pxしか空いていません。
ニットだけは元の写真に上下96px・103pxの余白があったので、高さは86.3%にとどまっています。
同じ一覧に並べたとき、服の大きさがこの86.3〜99.2%の幅でばらつくことになります。
白を足すだけでは、撮ったときの余白の差がそのまま正方形に持ち込まれるわけです。
服に合わせて余白をそろえると90%で並ぶ
その差をなくすため、服の範囲から正方形の1辺を決めるやり方を3つ目に足しました。
画像は生成したものです。
4枚とも服の長辺が1辺の90%になり、上下左右に5%ずつ余白が入りました。
長い3枚は白を足すやり方より7.1〜9.2ポイント小さく写りますが、裾が端に接する写真は1枚もありません。
ニットは逆に86.3%から90.0%へ大きくなり、上下にあった余分な白は26pxと34px削られました。
足す白は長い3枚で1辺の38.2〜39.5%、ニットで21.8%と、縦に長い服ほど多く要ります。
Photoshopでの操作
ここからは、3通りをPhotoshopで行う操作です。
服の範囲や比率の考え方は、服の商品画像をPhotoshopで整える手順でも扱いました。
カンバスサイズで白を足す
イメージ → カンバスサイズを開き、単位をpixelにして、幅に高さと同じ値を入れます。
基準位置を中央にし、カンバス拡張カラーをホワイトにすれば、左右に同じ幅の白が足されます。
上の表の「白を足す」はこの操作と同じ計算で、元の余白が残る点も同じです。
切り抜きツールの1:1で切る
切り抜きツールを選び、オプションバーの比率で「1:1（正方形）」を選ぶと、枠が正方形に固定されます。
枠は上下に動かせるので、中央ではなく襟を残す位置に寄せることもできます。
ただし長い服は、どこに寄せても1辺が写真の幅で決まるため、高さの3割前後が枠に入りません。
トリミングで服の範囲だけ残す
服に合わせるやり方の最初の操作が、イメージ → トリミングです。
基準を「左上のピクセルの色」にすると、左上と同じ色の行と列が上下左右から削られます。
ところが、生成した4枚にこの計算をそのままかけると、4枚とも0pxしか切れませんでした。
背景は白く見えても254前後でわずかにゆらいでいて、左上と完全に同じ色の行が1本もなかったためです。
そこで、3色とも250以上の画素を255にしてから同じ計算をかけると、コートは左165px・右180px・上9pxが切れました。
ワンピースは裾の下に明るさ231〜249の薄い影が下端まで残っていて、下だけは0pxのままです。
影まで服の範囲に入れたくないなら、影の明るさまで白に上げるか、影を残す前提で余白の割合を決めるかを先に決めておくと迷いません。
影の残し方は、靴・バッグの商品画像を整える手順で測っています。
背景が白でないときは塗りつぶしか生成拡張
白を足す操作が使えるのは、背景が白い写真だけです。
画像は生成したものです。
灰色の背景のコートを別に1枚作り、左右に白を足すと、元の端の色はR173 G171 B172で、白との差は84.3ありました。
白背景の4枚では端の色が253.7〜254.2だったので、白を足しても差は1.3以下にとどまり、境目は見えません。
背景が灰色やグラデーションの写真なら、白ではなく周りの背景で埋める操作が要ります。
Photoshopなら、カンバスを広げた後で足した所を選択して編集 → コンテンツに応じた塗りつぶしをかけるか、切り抜きツールで枠を写真の外まで広げて生成拡張を使います。
右の正方形はPythonで端の列の色を横に伸ばしただけのもので、Photoshopの塗りつぶしの結果ではありません。
端の色をそのまま伸ばしたので段差は0.0で、左の正方形にあった縦の線は出ていません。
背景を先に白へ抜いてから余白を足すほうが、商品ごとの仕上がりはそろいます。
アクションとバッチで一括
トリミングと画像を一定サイズに収めるとカンバスサイズは、どれも数値で記録できるので、アクションに入れれば写真ごとの手作業は残りません。
ウィンドウ → アクションで新しいアクションを作り、手順の1〜4を1枚で行ってから記録を止めます。
あとはファイル → 自動処理 → バッチで、そのアクションと読み込むフォルダ・書き出すフォルダを選べば、フォルダの全商品が同じ90%で書き出される流れです。
バッチの細かい設定と、書き出しで止まりやすい所は、Photoshopで商品画像を一括トリミングする手順にまとめました。
生成拡張は実行するたびに埋まる中身が変わるので、記録して同じ結果を何百枚に当てるのには向いていません。
Photoshopを使わずに数枚だけ正方形にしたいなら、無料の画像を正方形・余白追加でも余白の量と背景色を指定して書き出せます。
モールの正方形の決まり
楽天市場は、RMSのコラムで商品画像を「正方形で、700×700ピクセル 以上」と推奨していて、背景は単色の白か写真背景、テキストは20%以下、枠線なしとしています（2025年12月26日更新、2026年11月5日確認）。
手順どおり1200×1200pxで書き出せば、推奨の700×700pxを各辺500px上回る大きさです。
ZOZOTOWNとInstagramは、今回は公式ページの原文で比率を確かめられなかったので、ここには書いていません。
モールごとの大きさの違いはECモールの商品画像サイズ、楽天の細かい数字は楽天市場の画像サイズで比べています。
まとめ
- 中央で正方形に切ると、ワンピース・コート・パンツは服の面積の27.0〜30.6%が枠外に出て、首元と裾が両方とも消えた
- 白を足すだけだと服は切れないものの、元の写真の余白が残り、服の高さは86.3〜99.2%とばらついた
- 服の範囲から1辺を決めると、4枚とも高さ90%・余白5%で並び、足す白は1辺の21.8〜39.5%だった
- Photoshopのトリミングは、背景を255にそろえる前は4枚とも0pxしか切れなかった
- 背景が白でない写真に白を足すと境目の差は84.3になり、塗りつぶしか生成拡張が要る
1枚目は切らずに余白をそろえ、切るのは寄りの写真だけにすると、一覧で服の大きさがそろいます。
よくある質問
参考リンク
- 楽天市場 RMS Service Square「商品検索・SNS対策に！『商品画像登録ガイドライン』徹底対応」（正方形・700×700px以上の推奨、背景・テキスト・枠線、2025-12-26 更新、2026-11-05 確認）
- Adobe Community「resize align multiple different product images」（サングラス約150点を1024×1024pxにそろえる相談、2024-06-14 投稿、2026-11-05 確認）
- 服の範囲・枠外の割合・足した白・トリミングの幅・境目の差：自社環境での計測値（条件：Codex で生成した1024×1536px 3枚と1086×1448px 1枚、境目の図だけ灰色背景の1024×1536px 1枚。背景色との差30以上を服とした外接矩形。Python で Photoshop の操作と同じ計算をしたもの。2026-11-05）
