商品写真の背景色は白でいい？ECサイトで商品を引き立てる配色

ECサイト（インターネット上で商品を販売するサイト）の写真は、白背景にすればよいのでしょうか。白は商品以外の情報を抑え、複数の商品を並べるときにも統一しやすい色です。ただし、商品と背景の境目が分かりにくい場合や、素材の使われ方を見せたい場合まで白に統一する必要はありません。写真の役割と、WEBページ側の背景を分けて考えましょう。

白背景は商品一覧の基本にできるが、唯一の正解ではない

商品一覧に並べる小さな写真をサムネイルと呼びます。サムネイルは、商品ごとの大きさや輪郭を比べやすくすることが目的なので、余計な小物を置かない白背景が候補になります。同じ商品群では、背景だけでなく、撮影の明るさ・商品の向き・余白もなるべくそろえると、一覧を比較しやすくなります。

一方で、淡い色の商品では白との境目が弱くなり、光沢のある商品では反射で形がつかみにくくなる場合があります。このようなときは、背景を少し変える前に、撮影時の光の方向や自然な影で輪郭を出せるか確認します。商品そのものの色を加工で変えてしまわないことも大切です。

また、「商品写真の中に写っている背景」と「写真を置くWEBページの背景」は別です。写真の中が不透明な白なら、ページ側の色を変更しても写真内部の白は変わりません。まず、どちらを直すべきか見極めます。

青いマグカップを掲載するECページの配色例

青い陶器のマグカップを販売するページを想定します。HEX（16進数を使ってWEBの色を指定するカラーコード）で、一覧写真、詳細写真、文字、購入ボタンの役割を決めます。示した比率は、実際に隣り合う2色の相対的な明るさを比較したコントラスト比です。

• 一覧写真とページ：商品を撮影・切り抜きした写真の背景を白■#FFFFFFにそろえ、ページ背景をごく淡い青灰■#F5F7F8にします。この2色の比は約1.07:1と小さいため、写真領域の区切りが必要なら、画像の外側に青灰■#758591の線を使います。線と白の比は約3.80:1、線とページ背景は約3.54:1です。
• 商品の使い方を見せる写真：詳細ページの補助写真では、マグカップを置く布や棚を含め、温かみを抑えたベージュ■#F1ECE5に近い背景を候補にします。白■#FFFFFFとの差は約1.18:1です。商品一覧で輪郭を比べる写真と、使用場面を伝える写真は目的が違うので、背景を同じにする必要はありません。撮影した実物の色が変わって見えないかも確認します。
• 商品名と価格：白■#FFFFFFの情報欄に、商品名は濃い青灰■#243447、価格は少し明るい青灰■#425466を使います。白に対する比はそれぞれ約12.67:1、約7.80:1です。写真より先に文字が主張しすぎないよう、文字サイズと余白でも情報の強弱を作ります。
• 購入ボタン：白■#FFFFFFの情報欄に濃い青緑■#155E75の「カートに入れる」ボタンを置くと、周囲との比は約7.27:1です。ボタンの白■#FFFFFF文字と青緑■#155E75の面も約7.27:1です。商品の写真に大きな色付きボタンを重ねず、写真を見る場所と操作する場所を分けます。

この配色では、白い一覧写真を基準にしながら、使い方を伝える写真だけ背景を変えています。色で商品を飾るより、何を見せる写真なのかを先に決める方法です。

背景色を変更する前に写真そのものを確認する

白い商品の輪郭が消えるからといって、ページ全体を濃い色にする必要はありません。写真の光の向き、商品の影、切り抜きの余白を確認し、それでも境目が弱ければ写真背景を調整します。背景だけを不自然に着色すると商品の色まで違って見えることがあるため、実物の色味を優先してください。

一覧で背景色を統一しても、生活の中での大きさや質感が伝わりにくい商品では、別角度や使用場面の写真を補うと判断材料が増えます。外部モールにも掲載する場合は、メイン画像の背景に独自の指定がないか、出品先の最新ルールを確認しましょう。

写真の輪郭を見分けられるかどうかと、文字が読めるかどうかは別の確認です。WCAG 2.2（WEBコンテンツを利用しやすくするための指針）では、通常の文字と背景には原則4.5:1以上のコントラスト比が求められます。商品写真全体の輪郭に一律の数値を当てはめず、文字や必要な操作部品はそれぞれ確認します。

HueRollではHEXでページの配色候補を調整し、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色間の比較やWCAGのAA・AAA自動判定はできません。写真の背景とページ背景を組み合わせる場合は、実際の写真を見ながら必要な箇所を調整してください。