白い商品をECサイトで見やすくする背景色の選び方
白いスニーカーをECサイト（インターネット上で商品を販売するサイト）に載せるとき、写真の背景まで白いと、靴ひもや靴底の輪郭が分かりにくくなることがあります。背景を濃くすれば必ず解決するわけではありません。商品本来の白さを保ちながら形や素材感を伝えるには、背景の明るさ、撮影時の光、WEBページに置く写真の見せ方を分けて考えます。
白い商品には薄いグレーを候補にし、影で形を見せる
白い商品と真っ白な背景は明るさが近いため、境目が消えやすくなります。まず背景を無彩色に近い薄いグレーにすると、色味を強く足さずに輪郭を見せる余地ができます。ただし、白い布・革・ゴムでも反射や陰影が異なり、商品全体が一様な純白になるわけではありません。背景色だけでなく、斜めから当てた柔らかい光や靴底に落ちる自然な影を残しましょう。
明るさを上げすぎると、白い素材の縫い目や凹凸まで飛んでしまう場合があります。反対に濃い背景だけを頼りにすると、商品の白さや写真全体の印象が変わって見えることもあります。同じ商品を白背景と薄いグレー背景で試し、商品の輪郭と素材の両方が確認できる方を選びます。
白いスニーカーの商品一覧と詳細ページの配色例
写真の背景色と、その写真を置くWEBページの背景色は別のものです。ここでは、靴の色を変えずに撮影または編集できることを前提に、HEX（16進数でWEBの色を指定するカラーコード）で例を示します。コントラスト比は2色の相対的な明るさの差です。
- 商品一覧の写真背景：白い靴の写真には、ごく薄い青みのグレー#E1E7EBを候補にします。純白#FFFFFFとの計算上の比は約1.25:1です。これは色見本同士の参考比較で、実際の靴の画素との比率ではありません。自然な接地影を残し、靴底の輪郭や白い靴ひもが見えるか確かめます。
- 細部を見せる補助写真：縫い目やソールの形を拡大する写真では、やや濃いニュートラルグレー#CED6DCも候補です。純白#FFFFFFとの参考比は約1.47:1。背景が強すぎると靴より目を引くため、同じ商品の写真を並べて、明るさが不自然に違って見えないか確認します。
- 写真を置くページ：商品情報の背景を白#FFFFFFにすると、一覧写真内の薄いグレー#E1E7EBとは約1.25:1の差になります。この程度の差だけでカードの区切りを表すのではなく、余白や商品名の位置もそろえます。商品名には濃い青灰#273845を使い、白との比は約12.08:1です。価格の青灰#465868も白と約7.35:1を確保できます。
- 表示中の写真を示す枠：小さな写真を切り替える場所では、選択中のサムネイルに青灰#607483の枠線と「表示中」の文字を添えます。枠線は写真の薄いグレー#E1E7EBと約3.89:1、周囲の白#FFFFFFと約4.86:1です。枠の色だけに頼らず、現在の写真が分かるようにします。
- 購入ボタン：白#FFFFFFの情報欄に、濃い青緑#165B75の「カートに入れる」ボタンを置きます。ボタンと周囲の白、ボタン上の白#FFFFFF文字と青緑#165B75の比は、どちらも約7.53:1です。商品の写真にボタンを重ねず、写真と購入操作を分けます。
実際の写真と掲載先の条件で最終調整する
背景を変更するときは、白い商品を切り抜いた画像の周囲だけでなく、靴ひもの隙間や靴底の影も確認します。背景の色が反射して商品に色かぶりが生じたり、編集で輪郭の周りに不自然な縁ができたりしていないかが重要です。不透明な背景を含む写真では、WEBページ側の背景色を変えても写真の内部は変わりません。
ECサイト独自の一覧写真と、外部の販売サービスへ提出するメイン画像では条件が異なる場合があります。外部サービスへ出品する場合は、背景色や画像加工について掲載先の最新ルールを確認してください。スマホの商品一覧では画像が小さくなるので、靴ひもやソールが見えるか縮小して確かめます。
WCAG 2.2（WEBコンテンツの利用しやすさに関する指針）では、通常の文字は背景とのコントラスト比が原則4.5:1以上、操作の識別に必要な枠やアイコンは隣接色と原則3:1以上が基準です。ただし、これらの数値を商品写真全体の輪郭へ一律に当てはめるものではありません。写真は実際の形や質感を見て判断します。
HueRollではHEXで配色候補を調整し、選択した色と白・黒とのコントラストを確認できます。任意の2色間の比較やWCAGのAA・AAA自動判定はできないため、今回のような薄いグレーと枠線の組み合わせは別に計算して確認しましょう。