トープに合う色を探す｜商品写真を引き立てるWeb配色

トープは茶色とグレーの中間にある落ち着いた色合いで、商品写真の周囲にも使えます。ただし、白い商品と濃い茶色の商品では、輪郭を見せやすい背景の明るさが異なります。トープを一色だけ決めてすべての写真に使うより、写真の色に合わせて濃淡を選ぶ方が実用的です。生活雑貨のECサイトを例に、白い陶器と濃い革小物の写真に合う配色を考えます。

トープに合う色は、写真と文字の役割から選ぶ

トープは灰色がかった茶色を広く指し、決まった一つのカラーコードではありません。ここでは中くらいの濃さのトープ■#877870を基準にします。HEXコードとは、Webで色を指定する「#」と6桁などの英数字の組み合わせです。掲載する写真と並べながら、必要に応じてトープの濃さを調整します。

トープの周囲には、広いページ背景用のアイボリー■#F9F6F1、見出し用の深いブラウン■#413630、本文用の濃いグレー寄りの茶色■#302B29を合わせると、色の役割を整理できます。アイボリー背景と見出しの比は約10.85:1、本文との比は約12.96:1です。写真の色を主役にしながら、説明文を読む場所を確保できます。

アクセントには、茶色系とは色みが異なる深い青緑■#315C57を小さく使う方法があります。例えば購入ボタンの背景に使い、文字を白■#FFFFFFにすれば、文字とボタン背景は約7.50:1、ボタンとアイボリーのページ背景は約6.96:1です。アクセントを写真の周囲に散らさず、購入操作に集中させるのがポイントです。

白い陶器と濃い革小物で、写真の背景を変える

白い陶器には中くらいのトープを写真の後ろに置く

白い器を紹介する商品カードでは、ページ全体をアイボリー■#F9F6F1に保ち、写真を載せる部分だけ中くらいのトープ■#877870にします。この二色のコントラスト比は約3.93:1で、写真の置き場をページから区別できます。器の白さがトープに対してどう見えるかは、実際の写真の影や表面の明るさによって変わるため、完成画像で確かめます。

商品名と価格は写真の下のアイボリー部分に配置し、文字を濃いブラウン■#302B29に統一します。商品名を見せるために写真の上に白文字を重ねる必要はありません。写真の周囲に余白を取り、購入ボタンだけに青緑■#315C57を使えば、写真と操作の役割が分かれます。

濃い革小物には明るいトープと控えめな青緑を合わせる

濃い茶色の財布などを載せる場合は、写真の背面を明るいトープ■#E8DED7に変えてみます。ページ背景のアイボリー■#F9F6F1とは約1.23:1と差が小さいので、写真枠そのものも区別したければ、暗めのグレーブラウン■#75655Dの細い線を追加します。線は写真面との比が約4.20:1、ページ背景とは約5.16:1です。

「新作」などの小さなラベルには、淡い青緑■#D7E5E1の背景と濃い文字■#302B29を組み合わせる案もあります。文字のコントラスト比は約10.77:1です。ただし、色の違いだけで新作と判断させず、文字でも意味を伝えます。ボタンの色は陶器のカードと共通にし、商品ごとに操作の見え方が変わらないようにします。

写真に背景色が含まれている場合は、実物の見え方を優先する

背景が透明な切り抜き画像なら、写真の後ろに指定したトープが見えます。一方、白い背景を含んだ写真では、Web側の背景色を変えても写真内部の白は変わりません。その場合は、写真の周囲にトープの余白を設けるか、撮影・画像編集の段階で背景をそろえる必要があります。切り抜き画像でも、商品の影や細い輪郭が消えていないか確認しましょう。

文字と背景には十分な明るさの差も必要です。WCAG（Web Content Accessibility Guidelines、Webコンテンツの利用しやすさに関する指針）2.2のレベルAAでは、通常サイズの文字は4.5:1以上、規定の大きな文字は3:1以上が基準です。ここで示した比率は指定した不透明な色の組み合わせを別途計算したもので、写真そのものの視認性やページ全体の基準適合を保証するものではありません。

HueRollではHEXコードから濃淡や配色候補を確認でき、選択した色と白・黒のコントラストも調べられます。ただし、任意の二色間のコントラスト比やAA判定は自動では出ません。実際の商品写真を同じ大きさで並べ、明るいトープと濃いトープを切り替えながら、商品の輪郭、文字、購入ボタンを順番に確かめると選びやすくなります。