黒い商品をECサイトで見やすくする背景色の選び方
黒いレザーバッグをECサイト（インターネット上で商品を販売するサイト）に載せると、背景との境目は見えても、持ち手や縫い目が暗くつぶれることがあります。黒い商品を見やすくするには、単に背景を白くするだけでは不十分です。商品一覧では輪郭を分かりやすくし、詳細写真では素材の凹凸が伝わるように、背景と光を合わせて選びましょう。
黒い商品は明るい背景を基準に、光で素材感を残す
黒い商品には白や明るいグレーの背景が候補になります。黒と背景の明るさが離れると外形を見せやすくなりますが、バッグの表面に光が届かないと、革の折り目・縫い目・金具などが一つの暗い塊に見えることがあります。撮影では横から柔らかい光を当て、白い板などで影側に光を返す方法も試しましょう。光沢のある革なら、強い反射が金具や表面の形を隠していないかも確認します。
白背景が商品の輪郭を最も分かりやすくするとは限りません。明るすぎる背景が目立つ場合には、色味の弱い薄いグレーを試せます。背景を変えるときも、商品そのものの黒を不自然に明るいグレーへ加工しないことが大切です。背景の候補は撮影写真で比較して決めます。
黒いレザーバッグの商品一覧と詳細写真の配色例
黒いショルダーバッグを販売するページを想定します。HEX（16進数でWEBの色を指定するカラーコード）で写真の背景と商品情報欄を整えます。以下のコントラスト比は、2色の相対的な明るさの差を計算した値です。写真内の革の色を計測した数値ではありません。
- 商品一覧の写真背景：明るい青みのグレー#EDF1F3を候補にし、サイト全体の背景はほぼ白の#FAFBFCにします。両色の比は約1.10:1で、写真枠の区切りとしては弱い差です。画像を並べるときは余白や商品名の配置をそろえ、バッグの縁と持ち手が小さな画像でも見えるか確認します。
- 革の質感を見せる詳細写真：縫い目やファスナーを拡大する写真では、少し濃いグレー#DDE4E8も候補です。白#FFFFFFとの比は約1.29:1ですが、これは背景色同士の参考比較です。黒い革の凹凸が写っているかは、照明の方向と写真そのものを見て判断します。
- 商品名と価格：情報欄は白#FFFFFFとし、商品名には濃い青灰#223447、価格には少し明るい青灰#4C5B69を使います。白との比はそれぞれ約12.73:1、約6.98:1です。写真より文字を大きく主張させず、金額と商品名を余白で整理します。
- 選択中の写真：写真切替用の小さな画像には、選択中だけ青灰#657784の枠と「表示中」の文字を付けます。枠線は写真背景の薄いグレー#EDF1F3と約4.08:1、周囲の白#FFFFFFと約4.64:1です。ラベル文字を濃い青灰#223447で写真背景に置けば約11.20:1となり、枠の色だけに頼らず状態を伝えられます。
- 購入ボタン：白#FFFFFFの情報欄に濃い青緑#18546Bの「カートに入れる」ボタンを置きます。ボタンと白い背景の比は約8.34:1で、ボタン上の白#FFFFFF文字も青緑#18546Bとの比が約8.34:1です。写真の上に大きなボタンを重ねず、商品を確認する場所と操作する場所を分けます。
商品一覧は輪郭の比較、詳細写真は素材と形の確認、商品情報欄は価格と操作を伝える場所です。背景をすべて同じ色にするより、役割ごとに背景の明るさを調整します。
暗い背景を使う場合は輪郭と編集後の写真を確認する
ブランドの雰囲気に合わせて濃いチャコール#29313Cを使う場合、黒いバッグの輪郭まで背景になじむことがあります。そのときは背景をさらに暗くする前に、横や背後から光を当て、縁に細い明るさを作れるか試します。写真を明るくしすぎて黒い革が灰色に見えないか、金具の反射が白く飛んでいないかも確認します。
写真の中に背景色が写り込んでいる画像は、WEBページの背景色を変更しても写真内部の色は変わりません。切り抜き画像なら縁に不自然な明るい線が出ていないか、スマホの小さな商品一覧でも持ち手や開口部が判別できるかを確かめましょう。外部モールにも掲載する場合は、メイン画像の背景に関する出品先の最新ルールを優先します。
WCAG 2.2（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字と背景には原則4.5:1以上、操作部品の認識に必要な枠やアイコンには隣接色と原則3:1以上のコントラスト比が求められます。一方、商品写真全体の輪郭に同じ数値を一律に当てはめるものではありません。写真は素材と形が見分けられるか、実際の表示で確認します。
HueRollではHEXでWEBページの配色候補を調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色間の比較やWCAGのAA・AAA自動判定はできません。薄い写真背景と枠線などの組み合わせは別途計算してください。