青と黄色をバナーに使う方法｜主役の色を決めて面積を調整

青と黄色をバナーに使うときは、両方を同じ広さに塗るより、どちらを主役にするか先に決めると情報を整理しやすくなります。この記事では、青■#174A78と黄色■#F4D35Eを共通の色として、展示会の案内と期間限定キャンペーンの2案を比較します。HEXは、Web上の色を16進数で表すコードです。

青と黄色は「主役」と「注目させる部分」に分ける

まず、バナーで最初に伝えたい内容を決めます。会場や日時を落ち着いて案内したい場合は青を背景に広く使い、黄色を申込みボタンへ絞る方法があります。短期間の告知を前面に出す場合は、黄色の帯を大きくして、青を見出しやボタンの引き締め役にできます。どちらも色の印象を保証するものではなく、写真や文字量に合わせた配置例です。

面積の目安は、たとえば主役の色が約60％、白に近い余白が約30％、もう一方の強調色が約10％です。これは固定のルールではありません。明るい黄色は小さな部分でも目に入りやすいため、割合だけでなく「何を最初に読ませたいか」で調整しましょう。

同じ2色で作るバナーの配色例

どちらの案でも、青■#174A78、黄色■#F4D35E、余白のオフホワイト■#FBFAF6、文字用の濃い青灰■#152C43を使います。以下は色見本です。

例1：青を主役にした展示会の案内

青■#174A78を全体の約65％に使い、イベント名と日付を白■#FFFFFFで載せます。白文字と青背景のコントラスト比（文字と背景の相対的な明るさの差を示す数値）は約9.18:1です。会場・開催時間は下部のオフホワイト■#FBFAF6に濃い青灰■#152C43で記載し、約13.65:1を確保します。

「参加を申し込む」は黄色■#F4D35Eの塗りボタンに、濃い青灰■#152C43の文字を合わせます。比率は約9.72:1です。黄色はバナー全体の1割程度に抑え、申込み箇所をほかの情報と区別します。青背景と黄色ボタンの差も約6.26:1あります。

例2：黄色を主役にした期間限定キャンペーン

黄色■#F4D35Eをバナーの約55％に広げ、期間や特典を濃い青灰■#152C43の見出しで示します。この組み合わせは約9.72:1です。詳細な説明はオフホワイト■#FBFAF6の領域に移し、濃い青灰■#152C43で書きます。

「詳細を見る」は青■#174A78のボタンに白■#FFFFFFの文字を使い、約9.18:1を確保します。青はボタンと小さな見出しに限定すると、黄色の告知面と操作する場所を分けられます。黄色とオフホワイトの境目は約1.40:1と弱いため、余白や濃い青の区切り線も組み合わせます。

面積と文字の見え方を最後に調整する

青と黄色を半分ずつ並べて主役が曖昧なときは、背景の一方を減らし、もう一方をボタンや短いラベルだけに使います。スマートフォンではボタンが相対的に大きく見えることもあるため、縮小した画面で見出し・日付・操作の順に目が移るか確かめてください。

黄色■#F4D35Eに白■#FFFFFFの文字を載せるとコントラスト比は約1.47:1で、通常の文字には不足します。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAA（基本的な適合水準）では、通常の文字は4.5:1以上、規定の大きな文字は3:1以上が必要です。必要なボタンの境界など、文字以外の表示には隣接色との3:1以上が求められる場合もあります。

この数値は不透明な単色同士を計算したものです。写真やグラデーションの上に文字を重ねる場合は、その位置の背景も確認しましょう。HueRollではHEX入力で色を調整し、選択色と白・黒のコントラストを比較できます。任意の2色の比較やAA適合の自動判定はできないため、完成画面で実際の組み合わせを別途確認してください。