WEBデザインで60-30-10の配色ルールを使う方法
WEBデザインの60-30-10ルールは、3色を同じ強さで並べず、広い背景・補助的な面・注目させる色に役割を分ける考え方です。ただし、数字どおりに塗るだけでは、読みやすいページになるとは限りません。街の書店の新刊特集ページを例に、色を置く場所から配分を考え、文字や操作部分まで整える方法を紹介します。
60・30・10は色の「面積と役割」を決める目安
60%はページ背景などの広い面、30%は特集帯や情報をまとめる補助面、10%は主要ボタンや重要な表示に使うアクセントの目安です。3色を混ぜる比率ではなく、見た目の広がりと注目度を調整するための考え方です。WEBの規格ではなく、すべての画面でピクセル数を測って厳密に合わせる必要もありません。
決める順序は、最初に本文を置く60%の面、次に情報を区切る30%の面、最後に行動を促す10%の色です。先にアクセントを大きく塗ってしまうと、重要でない装飾まで目立ちやすくなります。文字の濃い色や写真の色は、3色の面積を機械的に数えるより、読むために必要な役割として別に整理しましょう。
書店の新刊特集ページで60-30-10を配置する例
以下のHEXは、WEBの色を16進数で表すカラーコードです。特集の紹介文・おすすめ本の欄・取置き操作があるページを想定します。数値はこの構成を考えるための目安で、完成した画面の実測面積ではありません。
60%：紹介文のまわりに落ち着いた背景を広く使う
ページの大部分には温かいオフホワイト ■#F7F4ECを使い、書影や紹介文の周りにも同じ色を残します。見出しと本文の文字は濃いグリーングレー ■#293B35で、背景 ■#F7F4ECとのコントラスト比は約10.79:1です。撮影情報や入荷予定などの補足文は少し落ち着いた色 ■#42584Eとし、同じ背景 ■#F7F4ECに対して約6.98:1を確保します。
30%：おすすめ本のまとまりを淡い緑で支える
「今月のおすすめ」をまとめる特集帯と紹介カードの一部には、淡いセージグリーン ■#D9E7E0を使います。大きな面のオフホワイト ■#F7F4ECとは約1.16:1の差なので、淡い色の切替だけで操作範囲を示す用途には向きません。一方、文章を載せる補助面として使う場合は、濃い文字 ■#293B35との比率が約9.29:1、補足文字 ■#42584Eとも約6.01:1です。
補助色は主役色と同じくらい鮮やかにする必要はありません。特集帯の上下に余白を取り、関連情報のまとまりだと分かる見出しを付けることで、やわらかな色の差を補えます。
10%：取置きボタンと重要なリンクだけに赤茶色を使う
「この本を取り置く」ボタンには深い赤茶色 ■#9C3F36を使い、文字は白 ■#FFFFFFにします。文字とボタンのコントラスト比は約6.61:1です。赤茶色の面とオフホワイト背景 ■#F7F4ECは約6.01:1、セージグリーンの補助面 ■#D9E7E0とも約5.18:1です。
「在庫状況を確認する」は同じ赤茶色 ■#9C3F36の下線付きリンクとし、セージ背景 ■#D9E7E0に対して約5.18:1の文字コントラストを確保します。10%はアクセント色を使う面積の上限のように考えてもよく、ボタンを無理にページの1割まで大きくする意味ではありません。
比率より先に、カード境界・文字・スマホ表示を見直す
白い本のカード ■#FFFFFFをセージ背景 ■#D9E7E0に並べると、面同士の比率は約1.28:1です。カード全体が選べる操作部品なら、グレーグリーン ■#5C7168の枠線を付ける方法があります。枠線は白いカード ■#FFFFFFと約5.23:1、セージ背景 ■#D9E7E0と約4.10:1です。純粋な装飾カードまで同じ枠線が必須という意味ではありません。
補足文字の色も背景ごとに確認します。グレーグリーン ■#596E63はオフホワイト ■#F7F4ECなら約4.98:1ですが、セージ背景 ■#D9E7E0では約4.29:1となり、通常サイズの文字に必要な4.5:1を下回ります。補助面では濃い色 ■#42584Eに変更する方が確実です。
ホバー（マウスを重ねた状態）ではボタンを濃い赤茶色 ■#873A2Eに変えても、白文字 ■#FFFFFFと約7.85:1を確保できます。フォーカス（キーボードなどで操作対象になった状態）には、少し離した濃い青 ■#244A61の輪郭を付けると、オフホワイト ■#F7F4ECに対して約8.58:1、セージ背景 ■#D9E7E0に対して約7.39:1です。
WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツのアクセシビリティ指針）のAA水準では、通常の文字と背景に原則4.5:1以上、操作を識別するのに必要な非テキストの表示には隣接色との3:1以上が求められます。60-30-10はこの基準を満たすことを保証しません。HueRollでは60–30–10パレットの候補を確認できますが、任意の2色のコントラスト比や実際の面積配分は別に確認してください。
スマートフォンで補助面が縦長になり、画面内の30%を超えても、情報の順序が保たれていれば厳密な比率へ戻す必要はありません。背景を広く、補助色を中程度に、アクセントを小さく使う関係を見直し、写真や文章が増えた画面でも主要操作が分かるか確かめましょう。