テラコッタとクリーム色を合わせる｜あたたかなバナーの配色

テラコッタの赤みとクリーム色の淡い黄みは、あたたかさを感じさせるバナーを作りたいときの候補です。ただし、2色を同じ強さで広く使うと、何を伝えたいのか分かりにくくなることもあります。焼き菓子フェアの告知バナーを例に、背景と見出しの色を入れ替えた2案を比べ、文字とボタンの色まで具体的に考えます。

クリーム色で広さを作り、テラコッタに役割を持たせる

テラコッタは焼いた土を思わせる赤みのある茶系の色です。クリーム色は黄みを含む明るい色として使います。どちらも幅のある色名なので、ここではテラコッタ ■#9C4933、クリーム色 ■#FFF1D7 を配色例として選びます。HEXは「#」と6桁の英数字でWebの色を指定する形式です。

クリーム色を背景の大部分に使うと、見出しや写真のための余白を取りやすくなります。テラコッタは見出し、短い帯、重要なボタンなどに限定すると、赤みを残しながら視線を集める場所を決められます。

長い説明文には、さらに暗いブラウン ■#3B302A を加えます。テラコッタとクリーム色だけですべてを塗り分けるより、文字色を独立させたほうが情報の役割を整理しやすくなります。

焼き菓子フェアのバナーを2通りに組み立てる

案1：クリーム色の背景に、テラコッタの見出しとボタン

• バナー全体の背景：クリーム色 ■#FFF1D7
• 「週末の焼き菓子フェア」の見出し：テラコッタ ■#9C4933
• 開催日時・説明文：ダークブラウン ■#3B302A
• 「詳しく見る」ボタン：背景をテラコッタ ■#9C4933、文字をクリーム色 ■#FFF1D7
• 日付を囲む補助エリア：淡いサンドベージュ ■#DDB99F、文字をダークブラウン ■#3B302A

左側に見出しと日時、右側に商品の写真を置く構成です。写真の上に文字を重ねず、クリーム色の余白に情報を集めます。テラコッタを見出しと一つのボタンに使い、他の文まで同じ色にしないことで、申し込みや詳細確認につながる場所を見つけやすくします。

案2：上部だけテラコッタにして、見出しを反転する

• 上部の見出し帯：テラコッタ ■#9C4933
• 帯の中のタイトル：クリーム色 ■#FFF1D7
• 下部の案内背景：クリーム色 ■#FFF1D7
• 下部の本文・日時：ダークブラウン ■#3B302A
• 「詳しく見る」ボタン：背景をダークブラウン ■#3B302A、文字をクリーム色 ■#FFF1D7

上部の帯で企画名を示し、下部に写真と日時、ボタンをまとめる案です。テラコッタの面積は案1より増えますが、長い文章を載せる部分は明るく保ちます。ボタンまでテラコッタにせず濃いブラウンに変えると、見出し帯との役割の違いを付けられます。

近い明るさの境界と文字のコントラストに注意する

コントラスト比は、文字と背景などの明るさの差を表す数値です。テラコッタ ■#9C4933 とクリーム色 ■#FFF1D7 は約5.51:1、ダークブラウン ■#3B302A とクリーム色 ■#FFF1D7 は約11.46:1、ダークブラウン ■#3B302A とサンドベージュ ■#DDB99F は約7.01:1です。いずれもWCAG（Webコンテンツを利用しやすくするための指針）のレベルAAで、通常サイズの文字に求められる4.5:1以上です。

一方、サンドベージュ ■#DDB99F とクリーム色 ■#FFF1D7 は約1.63:1で、色の差だけでは境界が弱めです。情報を区切る必要がある場合は濃い枠線や十分な間隔を加えましょう。ダークブラウン ■#3B302A をテラコッタ ■#9C4933 の上に直接置く組み合わせも約2.08:1なので、帯の文字色としては避けます。

スマートフォンではバナーが縦長になることもあるため、写真の位置とボタン周囲の余白を見直します。HueRollではHEXで色を調整し、選んだ色と白・黒のコントラストを確認できますが、任意の2色同士の比較やAA・AAAの自動判定はできません。実際に隣り合う色の組み合わせは別途確認して仕上げましょう。