WEBサイトの余白を色で見せる方法｜白以外の背景を自然に使うコツ

WEBサイトの余白は、文字や写真、ボタンの周囲に設ける空間のことです。「余白」という名前でも、白くする必要はありません。淡い背景色を使えば、情報の間隔を保ちながら、ページの雰囲気も整えられます。ただし、空いた場所を次々に別の色で塗ると、かえって散らかって見えることがあります。ここでは、講座一覧ページを例に、白以外の背景で余白を自然に見せる方法を紹介します。

余白を見せる色は、コンテンツの後ろの面に使う

大切なのは、余白を一つずつ着色するのではなく、ページ全体に薄い背景色を敷く考え方です。その上に白いコンテンツ領域を置けば、カードの左右やカード同士の間に見える背景色が、そのまま余白になります。例えば、背景を薄いグレージュにして、各講座の情報を白いカードに載せる構成です。

背景とカードを違う色にする目的は、情報を大量に色分けすることではありません。背景色はカードの周囲に連続して見えるようにし、講座名・日時・申込みボタンはカード内にまとめます。カードの中まで何色にも分けず、空間の広さと文字の並びで整理すると、色数を抑えられます。

CSS（WEBページの見た目を指定するスタイルのルール）で作るなら、ページの外側にbackground-colorを指定し、内側のカードに別の背景色を設定します。カード同士の間隔はgap、カード内部の余白はpaddingなどで調整できます。背景だけに頼らず、情報の配置も一緒に設計しましょう。

講座一覧ページで試す、淡い背景と白いカードの配色

背景・文字・ボタンの役割を分ける

次は、架空のオンライン講座サイトで使う一例です。HEX（「#」の後ろに0〜9とA〜Fを6桁並べる色コードの形式）で配色を示します。

• ページ全体の背景：淡いグレージュ ■#F2F1EA。カードの外周やカード間に見せ、余白の色として使います。
• 講座カードの背景：白 ■#FFFFFF。タイトル、開催日時、説明を一つの面にまとめます。
• カード本文：濃い青灰色 ■#27343D を白 ■#FFFFFF の上に配置します。コントラスト比は約12.77:1です。
• カード見出し：深い緑 ■#204D43 を白 ■#FFFFFF の上に使います。コントラスト比は約9.53:1です。
• 申込みボタン：深緑 ■#1D5B4F の背景に白文字 ■#FFFFFF を合わせます。コントラスト比は約7.89:1です。

淡いグレージュ ■#F2F1EA と白 ■#FFFFFF の背景同士のコントラスト比は約1.13:1です。この差は小さいため、色の違いだけでカードの境界が誰にでも明瞭になるとは限りません。カードのまとまりは配置・余白・見出しでも示し、申込み操作は独立したボタンで分かるようにします。

色の見える幅を調整する

例えばパソコンでは、ページの左右に32px（pxはピクセルで、画面上の長さを表す単位）、カードとカードの間に24pxの余白を取るところから試せます。この数字は固定の基準ではなく、文字量やカードの大きさに合わせて調整するための設計例です。カードの内側にも余裕を持たせ、外の色付き余白と、文字の周囲の余白を混同しないようにします。

講座カードを3列からスマートフォンの1列に変更する場合は、左右の余白を16px程度から見直します。上下のカード間にも同じ背景色が見えるようにすると、縦に並んだ情報も別々のまとまりとして追いやすくなります。

背景の色差が弱いときと、余白が狭いときの注意点

淡い色を選んでも、カードが密着していれば背景はほとんど見えません。最初にカード間隔とページ端の余白を確保し、それでも区切りが分かりにくい場合だけ、控えめな枠線や形の違いを検討します。逆に、背景を濃くしたり鮮やかにしすぎたりすると、余白より背景自体が目立つことがあります。

カードの外側に説明文を置く場合は、淡いグレージュ ■#F2F1EA の上に濃い青灰色 ■#27343D を使うと、計算上のコントラスト比は約11.28:1です。文字を載せる場所がカード内か背景上かによって、組み合わせをそれぞれ確認してください。

WCAG（WEBコンテンツのアクセシビリティに関する指針）のAA基準では、通常の文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が原則として求められます。操作に必要な境界やアイコンなどには、隣接する色との3:1以上の基準が関係する場合もあります。一方、装飾として使う余白の色同士に、一律で3:1の差が必要という意味ではありません。画面サイズを変えて余白が保たれているかを確認し、文字・ボタン・状態表示は実際の背景との組み合わせで検証しましょう。