黒とゴールドのバナー配色｜高級感を出したいときの面積バランス

黒とゴールドを使ったバナーは、金色の面積を広げるほど高級に見えるのでしょうか。実際には、ゴールドの量が増えると告知の勢いが強く見え、落ち着いた雰囲気から離れる場合があります。大切なのは、黒にどれだけ余白を残し、ゴールドをどこへ集中させるかです。横長の商品告知と正方形のイベント案内を例に、面積の違いを比較します。

黒を広く使い、ゴールドには目立たせる役割を与える

今回は純粋な黒ではなく、わずかに明るい黒に近い色 ■#161616 を背景に、落ち着いたゴールド ■#C8A55A と、文字用のアイボリー ■#F4F0E8 を合わせます。HEX（ヘックス）は「#」に続く数字・英字でWebの色を表すカラーコードです。ここでいうゴールドは画面上の単色の見本であり、金属の光沢そのものを再現する色ではありません。

黒の背景は見出しや商品写真の周囲に余白を作る役割、ゴールドは短いラベル・区切り・主要な案内に視線を集める役割と決めます。金色を見出し、縁取り、ボタン、背景のすべてに広げると強調箇所が増えるため、まずは一番伝えたい要素だけに使うと整理しやすくなります。

以下の割合は背景・色帯・ボタンなど単色で塗る部分だけを合計100％とした構成案です。商品写真や文字の面積は含めず、効果を保証する決まりではありません。

黒90％と75％ではバナーの印象がどう変わる？

横長の商品告知：黒90％・ゴールド10％

横1200×縦400ピクセルほどの新作フレグランス告知を考えます。単色の塗り面は黒に近い色 ■#161616 を約90％、ゴールド ■#C8A55A を約10％とします。左側にアイボリー ■#F4F0E8 で「新作の香り、登場」と短い見出しを置き、右側に商品写真を配置します。写真と文字の間に黒い余白を取り、ゴールドは細い区切り線と「コレクションを見る」ボタンに集中させます。

ボタンの背景はゴールド ■#C8A55A、文字は黒に近い色 ■#161616 です。ゴールドを小さな面積にとどめることで、商品写真と見出しが主役になり、ボタンを別の役割として示せます。

正方形の招待案内：黒75％・ゴールド25％

会員向け内覧会の正方形バナーでは、黒に近い色 ■#161616 を約75％、ゴールド ■#C8A55A を約25％にします。上側の黒い領域にアイボリー ■#F4F0E8 で「特別内覧会」と書き、下側約4分の1をゴールドの帯にして開催日と「予約受付中」を黒に近い色 ■#161616 で載せます。

先ほどの10％よりもゴールドの帯が広いため、開催日や予約案内に注意を向けやすい構成です。一方、金色の面が強すぎると感じたら、帯を15％程度に縮めて黒の余白を増やします。高級感は面積の比率だけで決まらず、写真の質感、書体、余白の取り方にも左右されます。

明るい文字をゴールドに重ねないよう確認する

コントラスト比は隣り合う2色の明るさの差を示します。黒に近い色 ■#161616 とゴールド ■#C8A55A は約7.74:1、アイボリー ■#F4F0E8 と黒に近い色 ■#161616 は約15.92:1です。したがって、今回の不透明な単色同士なら、黒い文字を金色の帯に置く場合も、明るい文字を黒い背景に置く場合も、通常サイズの文字に求められる4.5:1以上です。

反対に、アイボリー ■#F4F0E8 とゴールド ■#C8A55A は約2.06:1しかありません。ゴールドの帯やボタンにアイボリー文字を載せるのは避け、黒に近い文字へ切り替えます。WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）では、通常の文字は4.5:1以上、大きな文字は3:1以上、意味のある操作部品の視覚情報は隣接色と原則3:1以上が基準です。

写真が黒い背景とつながって見えるときは、写真の周囲に余白や十分に見える枠を加えます。文字を写真や金色のグラデーションに重ねる場合は、単色の計算値ではなく、実際に文字が乗る場所で確認してください。スマートフォンでの縮小や文字の改行も見直しましょう。

HueRollでは選んだ色のHEXや配色候補、白・黒とのコントラストを確認できます。ただし任意の2色間のコントラストやWCAG適合の自動判定はできないため、今回の配色は組み合わせごとに別途計算して確認しています。