「色を増やすほど、なぜかまとまらなくなる」「CTAまで全部同じくらい目立ってしまう」。そんなときに使われるのが、ベース・メイン・アクセントの色を面積で分ける考え方です。Webやインテリアでは「70:25:5」「60:30:10」などの比率が紹介されることがあります。
ただし最初に押さえたいのは、70:25:5が科学的に証明された”黄金比”ではないことです。便利な配色の目安ではありますが、厳密な正解として守るものではありません。
まず色の3属性を押さえる
配色では、画面の大部分を占めるベースカラー、印象を作るメインカラー、注意を引くアクセントカラーの役割を分けて考える方法があります。この記事では、その実務上の目安として配色比率を解説します。
- 同じ青でも、濃紺なら落ち着き、明るい水色なら軽さを感じやすい
- 画面の大部分を白、見出しをブランド色、CTAだけ別色にすると優先順位が見えやすい
- アクセント色を使いすぎると、どこが重要なのか分からなくなる
- ダークUIでは黒や濃紺がベースになり、白が強いアクセントになることもある
- ブランド色が強くても、本文とのコントラストが弱ければ読みづらくなる
色には「色相(Hue)」「明度(Value)」「彩度(Chroma)」という3つの属性があります。色相は赤・青といった色合いそのもの、明度は明るさ・暗さ、彩度は色の鮮やかさを指します。同じ「赤」でも、明度と彩度の組み合わせ次第で、鮮やかな赤にも、くすんだ落ち着いた赤にもなります。配色を考える時は、色相だけでなくこの3つを合わせて意識することが大切です。
70:25:5は何のためのルール?
この比率で本当に役立つのは、数字そのものではありません。画面内の色を、ベースカラー(広い面積を占め、文章やUIの土台になる)・メインカラー(ブランドや主要な構造を表す)・アクセントカラー(ごく一部を強調する)という3つの役割へ分けることです。
| 役割 | おおよその考え方 | Webでの例 |
|---|---|---|
| ベース | 最も広い | 背景、カード背景、余白に近い面 |
| メイン | 中程度 | ブランド要素、見出し、主要UI |
| アクセント | 少ない | CTA、重要な状態、強調 |
「70・25・5」という数字をピクセル単位で測る必要はありません。アクセントカラーのポイントは「5%だから人間の脳が引きつけられる」ことではなく、周囲との差があるから強調として機能することです。そのためアクセントを5%ぴったりにするより、「強調したい要素以外に同じ強さを配っていないか」を確認する方が実用的です。
「70:25:5」と「60:30:10」、どちらもデザイン上の経験則として紹介される比率で、どちらが科学的に正しいというものではありません。Webサイトでは余白や写真、カード、グラデーション、ダークモードなどが入るため、単純に3色の面積だけでは整理できない場合もあります。ベースが圧倒的に多い→メインは必要な場所に絞る→アクセントはさらに少なくするという大小関係だけ覚えておけば十分です。
なお、ベースカラーは白・オフホワイトである必要もありません。ダークUI、ブランドサイト、ゲーム、映像系サービスなどでは、黒や濃色がベースになることもあります。重要なのは、本文が読める・コンポーネントの境界が分かる・強調の階層が作れることです。
Webサイトへの応用: 「決める」だけでなく「文字が読めるか」も確認する
信頼感を醸成したい企業サイトなら青をメインに、といったように、まずサイトの目的からメインカラーを決め、そこにベースカラー・アクセントカラーを配色していきます。この時に見落としがちなのが「コントラスト(明暗の差)」です。おしゃれな色の組み合わせでも、文字色と背景色のコントラストが不十分だと、肝心の情報が読み取りづらくなってしまいます。
デザイン系の書籍などで「明度差125以上・色差500以上あれば読みやすい」という基準を見かけることがありますが、これはW3Cが2000年に示した試験的な旧基準です。2008年に勧告されたWCAG 2.0以降は、この方式は使われておらず、「コントラスト比」という別の計算方法が現在の世界標準になっています。
目安としては、通常サイズの文字でコントラスト比4.5:1以上(より厳しい基準では7:1以上)が推奨されています。コントラスト比はWebAIMのコントラストチェッカーなどの無料ツールで手軽に確認できるので、配色を決めたら一度チェックしておくと安心です。
アクセントに補色を使えば正解でもない
色相環の反対側にある補色は、強いコントラストを作りやすい組み合わせです。ただしCTAには必ず補色、と決める必要はありません。ブランドの世界観と衝突する、警告色と混同する、テキストとのコントラストが足りない、という場合もあります。目的は「補色を使うこと」ではなく、重要な要素を明確に区別することです。
実務で配色を作る手順
- 背景と本文色を決める: まず読むための土台を作り、ここでコントラストを確認する
- ブランドの中心色を決める: ロゴや既存ガイドラインがあるなら、それをメインとして扱う
- セマンティックカラーを整理する: Success、Warning、ErrorなどUI上の意味に必要な色を別枠で整理する
- 最重要の強調色を決める: CTAなど「この画面で最も見てほしいもの」が埋もれない色を選ぶ
- 面積バランスを見直す: 画面を引いて見て、メインカラーが広がりすぎていないか、アクセントが乱立していないかを確認する。ここで70:25:5の考え方が役立つ
まとめ
- 色には色相・明度・彩度の3属性があり、色相だけでなく組み合わせて考える
- 70:25:5は科学的な黄金比率ではなく、配色の役割と強弱を整理するための実務的な目安
- 文字色と背景色のコントラストも必ず確認する。「明度差125・色差500」は廃止済みの古い基準なので注意
- 現在はWCAG 2.0以降の「コントラスト比」(通常文字は4.5:1以上)が世界標準
色そのものが人にどう作用するのかを、前回の記事(色彩心理)とあわせて押さえておくと、配色の判断にも一段と自信が持てるようになります。
