ネットショッピングで顧客が触れられるのは画像だけです。だから商品画像は売上に直結します。ただし画質が良ければいいわけではなく、プラットフォームの規格に合い、速く表示され、モバイルでもくっきり見える必要があります。この記事では、楽天やメルカリShopsのようなショップを想定し、商品画像を整える実践的な順番をまとめます。
まずプラットフォームの画像規定を確認
最初に出店先の画像要件を確認しましょう。メイン画像はほとんどが正方形を求め、最小解像度と最大容量が決まっています。規格を外れるとアップロードが拒否されたり、強制的に切り取られたりします。
- 楽天のメイン画像:正方形推奨、700×700px以上
- Amazonのメイン画像:白背景必須、長辺1000px以上(1600px以上でズーム可)
- 商品詳細ページ:横幅は表示枠に合わせ、縦は長くつなげる
- 共通:容量は1枚あたり数百KB〜数MB以下に管理すると安全
切り抜きはPNG、演出カットはJPG
商品画像は大きく2種類あります。背景を消した「切り抜き」と、実際の使用シーンを写した「演出カット」です。この2つはフォーマットを分けるのがおすすめです。
切り抜きは背景を透明にする必要があるため、PNGが必須です。透明背景のおかげで、どんな背景色の上にも自然に載せられます。一方、背景が一面にある演出カットやライフスタイルカットは透明が不要なので、JPGのほうがはるかに軽くなります。もし白背景で撮った切り抜きがすでに白背景で確定しているなら、PNGをJPGに変換して容量を大きく減らせます。
サイズを揃えると陳列がきれいになる
複数の商品を並べたとき、画像のサイズや比率がバラバラだと陳列が雑に見え、信頼感が下がります。すべてのメイン画像を同じピクセル(例:1000×1000)と同じ余白比率に揃えれば、一覧が整って見え、ブランドの印象が引き締まります。撮影角度が違っても、リサイズでキャンバスサイズを合わせれば統一感が生まれます。
速い読み込みとモバイル対応
ショッピングのトラフィックの大半はモバイルで発生し、画像の表示が遅いと顧客はそのまま離脱します。詳細ページに原本写真をそのまま何枚も入れると、ページが数十MBに膨れ上がり、読み込みに時間がかかります。
- 表示幅(例:1000px)に合わせて先にリサイズする
- そのあと圧縮で1枚あたりの容量を目標値以下に下げる
- 文字の多い詳細カットは圧縮しすぎると文字が潰れるので注意する
- 切り抜きが白背景で確定なら、PNG→JPG変換で容量を減らす
Switchingのリサイズツールでサイズを揃え、PNGをJPGに変換して容量を減らし、画像圧縮ツールで目標容量に合わせればOKです。すべての変換がブラウザ内だけで行われ、ファイルがサーバーにアップロードされないため、発売前の新商品画像でも流出の心配なく扱えます。