ピーコックブルーを主役にするWeb配色｜写真と文字を合わせるポイント
ピーコックブルーは、クジャクの羽を思わせる深い青緑です。写真と合わせると印象的ですが、写真にも青や緑が多いと色の境目が曖昧になり、文字を写真に直接重ねると読みづらくなることがあります。この記事では、Webサイトのファーストビュー（ページを開いて最初に見える部分）を例に、写真を引き立てながらピーコックブルーを主役にする配色を考えます。
ピーコックブルーは「広さ」より「役割」を決めて使う
ピーコックブルーには一つに定まったカラーコードがあるわけではありません。ここでは青と緑の両方を感じる、やや暗い #006875 を作例の基準にします。HEX（ヘックス）は、Webの色を「#」と16進数の数字・英字で表すカラーコードです。
この色を見出し・ヘッダー・ボタンのすべてに広く使うと、写真より画面の色が目立つ場合があります。まず「サイトらしさを伝える見出しと主要ボタン」に役割を絞り、写真の周囲には明るい余白を確保します。写真自体が青緑なら使用面積を小さく、木や布のような暖色系の写真なら見出し帯にも広げる、と考えると整理しやすくなります。
写真と文字を合わせる2つの配色例
次の5色を基本にすると、写真によって主役色の置き方を変えられます。
- ピーコックブルー #006875：見出し、ヘッダー、主要ボタン
- アイボリー寄りの背景 #F7F4EE：ページ全体と文章側の余白
- 濃いグレー #25353A：説明文と細かな情報
- 白 #FFFFFF：青緑の帯やボタンに載せる文字
- 淡い青緑グレー #E5EEEB：写真の下の説明パネル
海や植物など、青緑が多い写真の場合
写真を右、テキストを左のアイボリー #F7F4EE の面に分け、見出しだけをピーコックブルー #006875 にします。本文は濃いグレー #25353A、ボタンはピーコックブルー #006875 の背景に白 #FFFFFF の文字を使います。写真と文字を別の面に置くため、水面や葉の明るさに左右されません。青緑の大きな帯を足すより、写真の青緑を引き立てやすい構成です。
木製品や室内など、茶系が多い写真の場合
温かい色が多い写真では、上部の見出し帯をピーコックブルー #006875 にし、見出しを白 #FFFFFF にする方法もあります。写真はその下に独立して配置し、説明文は淡い青緑グレー #E5EEEB のパネルに濃いグレー #25353A で載せます。青緑の帯と茶系の写真が違う色みを持つため、写真の色を変えずに画面の区切りを作れます。
写真に文字を重ねる前に確認したいこと
色のコントラスト比は、文字と背景の明るさの差を表す数値です。今回の組み合わせでは、ピーコックブルー #006875 とアイボリー #F7F4EE は約5.91:1、濃いグレー #25353A とアイボリー #F7F4EE は約11.60:1、白 #FFFFFF とピーコックブルー #006875 は約6.49:1です。いずれも通常の文字に求められるWCAG 2.2の4.5:1以上です。
ただし写真は場所ごとに明るさが変わるため、写真の上の白文字が常に読めるとは限りません。文字を写真に重ねる必要がある場合は、文字の後ろに不透明なピーコックブルー #006875 のパネルを敷くか、写真と文字を別々の領域に配置します。スマートフォンで写真が切り取られるときも、文字の背景が変わらないか確認しましょう。
HueRollでは選んだ色と白・黒のコントラスト比を確認できます。アイボリーなど任意の背景との組み合わせは別途計算し、文字サイズや実際の配置と合わせて確かめることが大切です。