小豆色を重く見せない配色｜和風バナーの背景と差し色

小豆色を和風バナーに使うと、深みのある色合いを活かせます。しかし、背景全体を暗い赤茶で埋め、文字や装飾にも濃い色を重ねると、商品写真や開催情報まで重たく見えることがあります。大切なのは小豆色を避けることではなく、明るい背景と余白を確保し、小豆色を置く面積を決めることです。架空の「秋の和菓子フェア」の告知バナーを例に、2つの配色を比較します。

小豆色は面積を決めてから背景と差し色を選ぶ

小豆色は、赤みと茶色みを含む落ち着いた色です。この記事では一例として■#96514Dを使います。HEXコードは、Webの色を「#」と6桁などの英数字で表す方法です。色名だけでは人によって想定する色が異なるため、制作時にはコードも決めておきます。

暗めの小豆色をバナー全面に使うと、写真・文字・飾りを載せる余地が少なく感じられる場合があります。まず明るい色を面積の7～8割、小豆色を残りの見出しや帯に配分するところから試すと、色の役割を整理しやすくなります。この比率は決まりではなく、写真の色や文字量に合わせるための出発点です。

ここでいう差し色とは、視線を集めたい線や小さな飾りなどに使う色のことです。小豆色と似た暗い色を増やすより、少量の黄みを添えるか、明るい余白を広く残す方法を考えます。

和菓子フェアのバナーで比べる2つの配色

明るい背景に小豆色の見出しを置く

背景をクリーム色の■#F8F1E5にし、見出し「秋の和菓子フェア」に小豆色の■#96514Dを使います。開催日などの本文には濃い茶色の■#392E2Bを合わせます。背景とのコントラスト比は見出しが約5.22:1、本文が約11.69:1です。見出しを主役にしながら、細かな案内も文字色で区別できます。

差し色には黄土色寄りの■#C79B56を選び、見出し下の短い線や小さな飾りに限定します。この色はクリーム背景との比が約2.27:1なので、小さな文字や重要な情報を表すアイコンには使わないようにします。「詳しく見る」ボタンを置くなら、背景を深い赤茶の■#773C3B、文字を白の■#FFFFFFにすると、文字とボタン背景の比は約8.42:1です。

小豆色を一部の帯に使い、写真の周囲を明るくする

もう一つは、バナーの左側約3割を小豆色の■#96514Dの帯にし、そこに短い見出しを配置する方法です。帯の文字にはアイボリーの■#FFF8EAを使うと約5.55:1のコントラスト比になります。残る約7割を明るい■#FBF6EDにし、商品写真と説明を置きます。説明の文字色を■#392E2Bにすれば、この背景との比は約12.19:1です。

帯の縁に淡い黄みの■#E2B76Eを細く添えると、暗い色面に変化を作れます。飾りを大きく広げず、写真の周囲には余白を残します。写真自体が赤茶系なら帯をさらに細くするなど、画像の色も含めて面積を調整します。

文字と写真を確認し、装飾だけを増やさない

文字色を決めるときは、実際に重なる背景色とのコントラスト比を確認します。WCAG（Web Content Accessibility Guidelines、Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に4.5:1以上、規定の大きな文字に3:1以上が必要です。上の数値は指定した不透明な2色同士の計算結果であり、完成したバナー全体の適合を保証するものではありません。

特に写真の上に文字を重ねると、写真の明暗によって見え方が変わります。文字はできるだけ単色の背景部分に置き、スマートフォン用に縮小したときも日付や案内が読めるか確かめましょう。黄みの飾りが増えて主役が分かりにくいときは、色を増やす前に線の本数や面積を減らす方が効果的です。

HueRollではHEXコードから濃淡や配色候補を見比べ、選んだ色と白・黒のコントラストを確認できます。ただし、任意の2色間の比率やAAの自動判定は行えません。バナーでは小豆色をどこに見せたいかを決め、明るい背景・文字・差し色にそれぞれ役割を持たせて仕上げましょう。