ラズベリーピンクを差し色にする方法｜バナーで使う面積と配置

ラズベリーピンクは、赤みと紫みを含んだ印象的なピンクです。バナーに使うなら、背景全体を塗るより、購入ボタンや限定ラベルなど一か所を決めて差し色にすると、伝えたい内容を整理しやすくなります。ただし、色の強さだけで目立つとは限りません。使う面積、配置場所、周囲の色を組み合わせて考えましょう。

ラズベリーピンクは小さな面積から試す

ラズベリーピンクには一つに決まったカラーコードがあるわけではありません。この記事では深みのあるピンクの一例として■#B72E61を使います。HEX（ヘックス）は、Webで使う色を「#」と6桁の英数字で指定する方法です。背景を暖かいオフホワイト■#FAF7F4、見出しを濃い青灰■#263443、補足文字を青灰■#50606Bにすると、ピンク以外を落ち着かせられます。

例えば横1,200×縦400pxのバナーで、200×56pxのピンクのボタンを一つ置いた場合、ピンクの塗り面は全体の約2.3％です。幅120×高さ36pxの小さな限定ラベルなら約0.9％になります。px（ピクセル）は画面上の寸法を表す単位です。これらは配置を考えるための例で、差し色の面積に固定の正解があるわけではありません。

オフホワイト■#FAF7F4上のラズベリーピンク■#B72E61のコントラスト比は約5.50:1です。コントラスト比は、2色の相対的な明るさの差を表す数値です。明るい背景を広く残せば、ピンクの面を大きくしなくても視線を集める場所を作れます。

新作ハーブティーのバナーで差し色の位置を変える

新作ハーブティーの販売告知を想定します。横長のバナーの左約6割に商品名・販売期間・操作ボタン、右約4割に商品写真を置き、文字は写真の上に重ねません。同じ配色でも、どこにピンクを置くかで伝える優先順位が変わります。

• 購入ボタンを主役にする案：背景はオフホワイト■#FAF7F4、商品名は濃い青灰■#263443、販売期間は青灰■#50606Bにします。「商品を見る」のボタンだけをラズベリーピンク■#B72E61にし、文字は白■#FFFFFFにします。文字とボタンの比は約5.87:1、ボタンと背景の比は約5.50:1です。『新発売』の表示は濃い青灰の文字にとどめ、ピンクの塗り面を増やしません。
• 限定ラベルを主役にする案：同じオフホワイト■#FAF7F4の背景で、見出し・説明の配置は変えず、左上の「期間限定」ラベルだけをラズベリーピンク■#B72E61と白■#FFFFFFの組み合わせにします。購入ボタンは濃い青灰■#263443の面に白■#FFFFFFの文字を置き、その比は約12.69:1です。ピンクで期間の情報を示し、操作は暗色で区別します。

両方の案でピンクのボタンとピンクのラベルを同じ強さで並べると、どちらを先に見せたいかが曖昧になりがちです。どちらか一方を目印にし、商品名の文字の大きさと余白で全体の順序を整えます。限定の意味は色だけに頼らず、必ず「期間限定」と文字でも伝えます。

濃い背景に移すときは文字と面の差を確認する

ラズベリーピンク■#B72E61のボタンを濃い青灰■#263443の背景にそのまま移すと、色の面同士の比は約2.16:1まで下がります。ボタン内の白文字■#FFFFFFとの比が約5.87:1あっても、塗り面の境界が十分に目立つとは限りません。重要なボタンは明るい背景側に移すか、識別に必要な輪郭を別に設計します。

本文の青灰■#50606Bとオフホワイト■#FAF7F4は約6.10:1、見出しの濃い青灰■#263443と同じ背景は約11.89:1です。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。ボタンなどを識別するために必要な視覚的手がかりにも、隣接色との原則3:1以上が求められます。

写真にピンク色のパッケージや花が映っている場合は、差し色と競合しないよう写真の置き方も調整しましょう。スマートフォンでは文字と写真を縦に並べ、ボタンが見つけやすいか確認します。HueRollではHEXや配色候補を確認し、選択色と白・黒のコントラストを比べられますが、任意の2色比較やWCAGの自動判定はできません。ここで示した各色の比率は別途計算しています。