カラフルな商品写真に合うECサイトの背景色は？

赤・青・黄色など複数の色が入った商品写真をECサイト（インターネット上で商品を販売するサイト）に並べると、背景まで鮮やかな色にした場合、商品同士の違いが見えにくくなることがあります。カラフルな写真を主役にするなら、ページ全体の背景は白や彩度の低いグレーを出発点にし、写真の中の背景とは分けて選ぶのが基本です。

色数の多い商品写真には控えめな背景を合わせる

商品写真の色が多いときは、写真を囲むWEBページの色まで増やすより、まず明るい無彩色に近い背景を試します。無彩色とは、白・黒・グレーのように赤や青などの色みをほとんど持たない色のことです。写真ごとに目立つ色が違っても、周囲の色をそろえれば商品同士を比較しやすくなります。

ただし、白だけが正解ではありません。白い柄が背景に溶け込む場合は少し灰色を足し、暗い柄の輪郭が消える場合は光の当て方や影も確認します。商品に使われている色を背景へそのまま広げると、柄と背景が同化することがあるため、商品写真を実際に並べて判断してください。

写真の中に写る撮影背景と、写真を載せるページの背景は別です。写真に不透明な背景が含まれる場合、ページの背景色だけ変更しても画像内の背景は変わりません。どちらを調整するか先に決めると、無駄な変更を避けられます。

3色の柄入りポーチを販売するページの配色例

赤・青・黄の柄を使った布製ポーチを複数掲載する場面を考えます。HEX（16進数でWEBの色を指定するカラーコード）で役割ごとに色を決めます。ここで示すコントラスト比は、指定した2色の明るさの差を計算した値であり、柄そのものの見やすさを測った値ではありません。

• ページと商品カード：一覧ページをほぼ白の■#F7F8FA、商品カードを白■#FFFFFFにします。両色の比は約1.06:1と小さいため、カードのまとまりは余白と商品名の配置でも示します。背景の色数を抑え、写真の柄が主役になるようにします。
• 一覧写真の撮影背景：写真の中には薄い青みのグレー■#ECEFF1を候補にします。白■#FFFFFFとの参考比は約1.15:1です。商品ごとに同じ背景と光で撮影し、赤・青・黄の柄やポーチの縁が見えるか確認します。これは背景色同士の数値で、布の色との実測比ではありません。
• 使用場面を見せる写真：ポーチを机に置く詳細写真では、落ち着いたベージュ■#EEE6DAも候補です。白■#FFFFFFとの比は約1.24:1。黄色い柄が背景になじんで見える場合はこの色に固執せず、背景や光を再調整します。商品自体の色は加工で変えないようにします。
• 商品名と価格：白■#FFFFFFの情報欄で商品名を濃い青灰■#233548、価格を青灰■#46586Bにします。白に対する比は約12.54:1、約7.32:1です。写真と区別して価格を読めるようにし、文字の大きさと余白でも整理します。
• 写真切替と購入操作：選択中の小さな写真に青灰■#617588の枠と「表示中」の文字を付ける場合、枠は写真背景の薄いグレー■#ECEFF1と約4.12:1、白■#FFFFFFと約4.76:1です。購入ボタンは白■#FFFFFFの面に濃い青緑■#175A73を置き、白■#FFFFFFの「カートに入れる」の文字と合わせます。青緑と白の比は約7.65:1です。

写真の色を邪魔しないか、一覧とスマホ表示で確認する

写真に色の付いた撮影小物や柄のある布が多い場合、ページ側まで鮮やかな色で囲む必要はありません。まず商品の輪郭を確かめ、背景や小物の色が商品に近すぎる部分を見直します。商品一覧では写真の明るさと余白をそろえ、詳細ページでは素材感を説明する写真を追加するという使い分けもできます。

スマホでは画像が小さくなるので、柄の細部と商品の外形を縮小表示で確認してください。また、外部の販売サービスに出品する場合は、メイン画像の背景について掲載先の最新ルールを優先します。

WCAG 2.2（WEBコンテンツの利用しやすさに関する指針）では、通常サイズの文字は背景と原則4.5:1以上、操作部品の識別に必要な図形や枠は隣接色と原則3:1以上のコントラスト比が基準です。ただし、この基準を商品写真内のすべての色の組み合わせへ一律に当てはめるものではありません。写真は実際の商品の色・形・質感が伝わるかを確認します。

HueRollではHEXでページ用の色を調整し、選択色と白・黒のコントラストを確認できます。ただし、任意の2色同士の比較やWCAGのAA・AAA自動判定はできません。写真を囲む背景や操作部品の組み合わせは、必要に応じて別途計算しましょう。