マゼンタと黒を使うバナー｜鮮やかさを活かす色の配分

マゼンタと黒は、鮮やかさと暗さの差が大きい組み合わせです。バナーに使うとき、2色を半分ずつ並べると、どちらも強く主張して情報が散らばることがあります。大切なのは、目立たせたい内容を決めてから色の面積を割り振ることです。イベント告知とセール告知の2例で、背景・文字・ボタンの役割を具体的に考えます。

マゼンタと黒は面積で主役を決める

マゼンタは赤と青の成分が強い鮮やかな赤紫系の色です。WebのCSS（画面上の色やレイアウトを指定する仕組み）では、色名「magenta」は■#FF00FFに対応します。黒は真っ黒に近い■#111111、明るい補助色には■#F7F4F8を使う例を考えます。HEX（ヘックス）は、赤・緑・青の成分を16進数で指定するカラーコードです。

黒を広く使えばマゼンタを小さな強調色にできます。反対にマゼンタを大きく敷く場合は、黒を文字や情報帯に使って内容を整理します。配分の数字はデザインの目安であり、決まった正解ではありません。文字量、写真、掲載場所に応じて変えてかまいません。

バナーの配色例：黒が主役とマゼンタが主役

イベント告知：黒70％・明るい色20％・マゼンタ10％

背景の約70％に■#111111を使い、イベント名と短いキャッチコピーを■#F7F4F8の文字で載せます。日時・会場をまとめたカード部分には■#F7F4F8を約20％使い、文字は■#111111にします。残り約10％の■#FF00FFを「申込受付中」の帯や申込ボタンに集中させ、ボタンの文字を■#111111にします。

黒が大部分を占めるため、マゼンタは小面積でも区別しやすい位置を持てます。告知の主役をイベント名にするなら、マゼンタを見出し全体に広げず、申込導線に割り当てるのが一案です。

セール告知：マゼンタ55％・黒35％・明るい色10％

期間限定セールのバナーなら、約55％を■#FF00FFの背景にし、メインの割引情報を■#111111の大きな文字で表示します。下部の約35％を■#111111の情報帯として、期間や条件を■#F7F4F8の文字でまとめます。残り約10％の■#F7F4F8は商品名を載せる小さな情報カードに使い、その文字は■#111111にします。

マゼンタの面積を増やすと画面全体の色の存在感が強まるため、黒い情報帯をまとめて配置し、細かい文字をマゼンタの上にばらまかないようにします。実際の販売バナーでは、割引条件が読めることを優先してください。

文字のコントラストと鮮やかさを調整する

上の例で、■#FF00FFと■#111111のコントラスト比は約6.02:1、■#111111と■#F7F4F8は約17.31:1です。一方、■#FF00FFの背景に■#F7F4F8の文字を置くと約2.87:1で、通常サイズの文字に必要な4.5:1を下回ります。これはWCAG（Webコンテンツを見やすくするための指針）2.2のレベルAAで示された基準です。マゼンタの面には、この例なら黒い文字を選びます。

配色が派手すぎると感じたら、まずマゼンタの面積を減らすか、商品写真の周囲に黒や明るい余白をまとめて確保します。色を足す前に、見出し、補足情報、ボタンのどこに注目してほしいかを確かめましょう。

HueRollでは選択した色と白・黒とのコントラストを確認できますが、任意の2色同士の比較やAAの自動判定には対応していません。この記事で示した■#111111などとの比率は、掲載したHEX値から別途計算したものです。