藍鼠とアイボリーを合わせる｜落ち着いたWeb配色の作り方

藍鼠（あいねず）は青みを帯びた灰色、アイボリーは少し黄みのある白です。この二つは、作品や商品写真を引き立てたいWebサイトの配色候補になります。ただし、落ち着いた色を並べるだけでは、見出しやボタンが埋もれることもあります。背景・文字・装飾に役割を分け、穏やかさと読みやすさを両立させる方法を紹介します。

アイボリーを広く、藍鼠を目印として使う

藍鼠にはさまざまな色見本があり、HEXコードは資料によって多少異なります。ここでは青みを含む灰色■#6C848Dを参考色とし、組み合わせるアイボリー系の色には■#FFF9F0を選びます。HEXは、Web上の色を「#」と6桁の英数字で表す書き方です。いずれも、この配色例で使うための具体的な数値です。

藍鼠の青みとアイボリーの黄みを少し対比させることで、鮮やかな差し色を足さなくても、画面の場所を分けやすくなります。まずアイボリーをページ全体に広げ、藍鼠は見出し横の短い帯やセクションの区切りなど、必要な箇所に置きます。藍鼠を大きな面積で使うと、写真より色の面が目立つ場合があるため、最初は控えめに試しましょう。

重要なのは色の数より役割です。「広い背景はアイボリー、目印は藍鼠、読む文字と操作ボタンには別の濃い色」という分担を先に決めると、各セクションで配色を迷いにくくなります。

作品紹介ページを想定した配色と配置例

陶器や雑貨など、色合いの異なる作品を並べる小さなギャラリーサイトを例にします。写真の周りに余白を取り、ページの色は作品の説明を助ける程度に抑えます。

• ページ背景：アイボリー系■#FFF9F0。ヘッダーから本文まで広く使い、画面をひと続きに見せる。
• 見出し・本文：濃い青灰■#263842。ページ背景と十分な明るさの差を取り、小さな説明文もこの色にする。
• 区切りのアクセント：藍鼠■#6C848D。作品紹介の見出し脇に短い縦線を置くなど、文字ではなく形の目印に使う。
• 作品カード：白■#FFFFFF。背景のアイボリーとの差は小さいため、カード同士の間隔と見出しの配置でも区切る。
• 「作品を見る」ボタン：濃く調整した青灰■#425965を背景に、アイボリー系■#FFF9F0を文字色として組み合わせる。

たとえば、最初に作品写真と短い紹介文を置き、その下に同じ余白幅の作品カードを並べます。カード内のタイトルと説明は濃い青灰で統一し、藍鼠の線はセクションの始まりだけに使います。ボタンは各カードに増やしすぎず、次のページへ進む操作が分かる文言を添えましょう。

白いカードとアイボリーの背景は近い明るさなので、色の差だけで枠を見せようとしないことも大切です。余白や見出しの位置をそろえれば、濃い境界線をあちこちに増やさずに情報を整理できます。

文字の濃さとボタンのコントラストを確認する

文字色と背景色の明るさの差を示す数値をコントラスト比といいます。WCAG 2.2のAA基準では、通常サイズの文字は4.5対1以上、大きな文字は3対1以上が必要です。

今回の藍鼠■#6C848Dをアイボリー系■#FFF9F0の上で通常サイズの文字に使うと、コントラスト比は約3.77対1で4.5対1に届きません。藍鼠は目印として残し、小さな文字は濃い青灰■#263842に替えると、同じ背景との比は約11.62対1になります。

ボタンも背景と文字を一組で確認します。濃い青灰■#425965のボタンにアイボリー系■#FFF9F0の文字を載せる場合は約7.04対1で、通常サイズの文字の基準を上回ります。ボタンと周囲のアイボリーの間にも同じ明るさの差があります。

写真の上に文字を重ねたり、背景を半透明にしたりすると、ここでの計算結果はそのまま使えません。実際に隣り合う色で確認し、リンクは下線、ボタンは形や文言も使って操作できることを伝えましょう。