色の面積で印象はどう変わる？WEBデザインの配色バランス
WEBサイトで使う色を変えていないのに、背景を広げただけで印象が違って見えることがあります。色は種類だけでなく、画面のどれくらいを占めるかによっても存在感が変わるためです。しかし、濃い色を広くすれば必ず印象が強くなる、という単純な話ではありません。文章量や写真、余白との関係も大切です。ここでは同じ色を使った2つの画面を比べ、配色の面積を考える方法を紹介します。
同じ色でも面積を変えると、目に入る場所が変わる
例えば、濃い青をヘッダー（ページ上部の案内部分）だけに使う場合と、ページ冒頭の大きな紹介部分まで広げる場合を考えます。前者では明るい背景が広く見え、文章や情報の区切りを追いやすい構成にできます。後者では濃い色の領域が先に目に入り、写真や大きな見出しを中心にした構成を作りやすくなります。
この違いは色の数ではなく、色が覆う範囲と配置によるものです。濃い色を使った面が大きければ、周囲の小さな明るいカードも相対的に目立つ場合があります。反対に、明るい背景が続くページでは、濃い見出しや案内部分が目印になります。
どちらが良いかは、何を先に読んでほしいかで判断します。決まった面積の割合をすべてのサイトに当てはめるのではなく、閲覧する画面の大きさも含めて考えることが大切です。
同じ3色で比較する、星空観察イベントのWEBページ
架空の星空観察イベントを案内するページを例にします。使う色は、温かみのあるオフホワイト#F6F2E8、深い青灰色#243B53、白#FFFFFFの3色です。HEXとは、色を「#」と6桁の16進数で表す指定方法です。色の種類はそのままで、背景として見せる面積を変えます。
案A：明るい背景を広くして、開催情報を先に見せる
- ページ全体の背景にはオフホワイト#F6F2E8を広く使い、開催日時や持ち物を見せるカードは白#FFFFFFにします。
- 見出しと本文には深い青灰色#243B53を使います。オフホワイト#F6F2E8上でのコントラスト比（文字色と背景色の相対的な明るさの差を示す数値）は約10.29:1、白#FFFFFF上では約11.50:1です。
- 「申し込む」ボタンは深い青灰色#243B53の背景に白#FFFFFFの文字を置きます。文字とボタンのコントラスト比は約11.50:1です。
濃い色は案内の目印とボタンにとどめ、開催条件などの説明を明るい領域で読み進められるようにする案です。情報の比較や確認を優先したいページに向いています。
案B：濃い背景を広げて、イベントの雰囲気を先に見せる
- ページ冒頭の大きな紹介部分と、その下の短い案内部分に深い青灰色#243B53を続けて使います。見出しと説明は白#FFFFFFにし、コントラスト比は約11.50:1です。
- 開催日時や料金の詳細はオフホワイト#F6F2E8の背景に切り替え、文字には深い青灰色#243B53を使います。コントラスト比は約10.29:1です。
- 濃い背景の上に置く「申し込む」ボタンは、オフホワイト#F6F2E8の背景と深い青灰色#243B53の文字にします。文字とボタン、およびボタンと周囲の背景のコントラスト比は、どちらも約10.29:1です。
暗い空を連想させる写真や短いコピーを見せたい場合には、濃い領域を広げる選択肢があります。ただし、料金や注意事項まで濃い背景に詰め込まず、詳細を読む部分では明るい領域に戻すことで、ページ内の役割を分けられます。
面積を調整するときは、視線の流れと文字の背景を確認する
まず、同じ内容のまま「濃い背景が少ない案」と「多い案」を並べて比較します。どこが最初に目に入り、見出しから日時、申込みへ無理なく進めるかを確かめます。濃い色の面積を増やしたことで主役の情報が隠れるなら、色を足すのではなく背景の範囲を戻す方が適切な場合があります。
スマートフォンでは、大きな濃色の領域だけで最初の画面が埋まることもあります。パソコンでまとまって見えても、縦に長い画面で開催情報やボタンにたどり着きにくくないか確認しましょう。また、写真やグラデーションを背景に重ねると、単色の計算どおりのコントラストにはなりません。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字は3:1以上が基準です。コントラスト比は、隣り合う色の相対的な明るさの差を表す数値です。今回の数値は不透明な単色同士で計算しています。色の面積に共通の正解を求めるより、情報の優先順位と実際の文字・背景の組み合わせが保たれているかを確認することが重要です。