シナモンとアイボリーの配色｜商品写真を囲む色の選び方

シナモンとアイボリーは、商品写真にあたたかみを添えたいときの配色候補です。ただし、どちらを写真の周囲に広く使うかで、商品の輪郭や文字の目立ち方が変わります。白い器などの明るい商品と、焼き菓子などの茶色い商品を例に、背景・写真の枠・文字色を使い分ける方法を考えます。

写真の明るさに合わせて、2色の役割を決める

シナモンは香辛料を思わせる黄みや赤みを含んだ茶色です。色名に対応する数値は資料によって異なるため、この記事ではやや暗めに調整したシナモン系ブラウンの■#9C5A38を使います。アイボリーは黄みを帯びた白系の色で、CSS（Webページの見た目を指定する仕組み）の色名「ivory」は■#FFFFF0です。HEX（ヘックス）は、赤・緑・青の成分を16進数で表すカラーコードです。

白っぽい商品写真をアイボリーの背景に直接置くと、写真の外周が周囲になじみすぎることがあります。この場合はシナモンの枠を添える方法があります。逆に、茶色い商品写真をシナモン色で囲むと色が続いて見える場合は、写真の周囲にアイボリーの余白を入れると区切りを作れます。

文字には濃いブラウンの■#33251Eも用意します。アイボリーの■#FFFFF0と■#33251Eのコントラスト比（2色の明暗差）は約14.62:1、アイボリーの■#FFFFF0とシナモンの■#9C5A38は約5.29:1です。装飾用の茶色をそのまま文字にも使う前に、背景との組み合わせを確かめましょう。

商品写真を囲む2つのWeb配色例

白い器や淡い雑貨：アイボリーの背景にシナモンの枠

白い器を並べる商品一覧では、ページと商品カードの背景を■#FFFFF0にします。白い撮影背景の写真は周囲となじみやすいため、写真の外側だけを■#9C5A38の細い枠で囲む方法が考えられます。枠とアイボリーの明暗差は約5.29:1です。枠を太くしすぎず、主役の器より目立たせないようにします。

商品名と価格の文字には■#33251Eを使い、短いカテゴリ表示には■#9C5A38を使えます。いずれも背景の■#FFFFF0との比率は、それぞれ約14.62:1、約5.29:1です。「詳細を見る」ボタンは■#9C5A38の背景に■#FFFFF0の文字を置けば、文字とボタンのコントラスト比も約5.29:1です。

焼き菓子や木製品：シナモンの背景にアイボリーの余白

茶色い焼き菓子や木製品を大きく紹介する画面では、写真の周りの背景に■#9C5A38を広く使い、その写真を■#FFFFF0の余白で囲む構成が候補になります。例えば写真の四辺に16～24px程度のアイボリーの余白を取れば、茶色の面が写真に直接接する部分を減らせます。幅はバナーの大きさに合わせて調整してください。

シナモン背景上の短い見出しは■#FFFFF0の文字にし、比率は約5.29:1です。商品説明と価格は■#FFFFF0の情報カードにまとめ、文字を■#33251Eにすると約14.62:1になります。カード内の購入ボタンも■#33251Eの背景に■#FFFFF0の文字を使えば、約14.62:1です。

枠の色だけでなく、写真と文字の見え方を確認する

濃い■#33251Eの文字を■#9C5A38の背景に直接載せると、コントラスト比は約2.76:1しかありません。通常の文章には使わず、明るい■#FFFFF0の文字へ変えるか、情報カードを敷きます。写真自体が白飛びして商品と撮影背景の境界が消えている場合は、外枠を付けるだけで解決するとは限りません。撮影時の光や影、切り抜き方も見直してください。

WCAG（Webコンテンツを見やすくするための指針）2.2のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が必要です。意味を伝えるアイコンや操作に必要な境界なども、隣接色との3:1以上が原則です。装飾だけの枠と、操作に欠かせない輪郭は分けて確認します。

HueRollではHEXを入力した色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。ここに載せた色の組み合わせの比率は、各HEX値から別途計算しています。