配色の決め方｜70:25:5の法則と3色の選び方、失敗しないコツ

結論：配色は「3色・70:25:5・明度差」で決まる

配色で迷ったときに最初に押さえるべきことは、たった3つです。色の数を役割ごとに3つに絞ること、その3色を使う面積に大きな差をつけること、そして文字と背景のあいだに十分な明るさの差（明度差）をとることです。この3つを守るだけで、配色の失敗の大半は防げます。

色そのものの好き嫌いや「センス」が問題になるのは、実はこの3つを満たしたあとです。逆に言えば、色選びに自信がなくても、数と面積と明度差を決まりどおりに整えれば、配色は「プロっぽく」まとまります。以下では、それぞれを具体的にどう決めるかを順番に見ていきます。

ベースカラー・メインカラー・アクセントカラーの役割

配色の基本は、色に「役割」を割り当てることです。好きな色を並べるのではなく、背景になる色・主役になる色・目を引くための色をそれぞれ1つずつ決めます。役割がはっきりしていれば、新しい要素を足すときも「これはどの役割か」で迷わずに色が決まります。

文字色を3色に数えないのは、文字は「読ませるための色」で、配色の印象をつくる色とは役割が違うからです。本文はほぼ黒に近い濃い色にしておけば、配色の印象を壊さずに読みやすさだけを確保できます。#333333 や #1F2937 のような濃いグレーは、白い背景に対して12:1以上のコントラスト比があり、真っ黒より目が疲れにくいと感じる人も多い色です。

70:25:5の法則とは｜面積の差が配色をまとめる

70:25:5の法則は、ベースカラー・メインカラー・アクセントカラーを使う面積の比率の目安です。インテリアやファッションでも同じ考え方が使われていて、デザインの世界では広く知られています。ポイントは数字そのものではなく、「主役と脇役の面積に、はっきりした差をつける」ことにあります。

人の目は、面積が近い色どうしを「同じくらい大事なもの」として受け取ります。メインとアクセントが50:50になっていると、どちらを見ればいいかが分からず、全体が騒がしく見えます。反対に、アクセントがごく狭い面積にだけ使われていると、そこに視線が自然と集まります。目立たせたいものほど、使う面積を小さくするのが配色のコツです。

• 比率は厳密に測るものではなく、「ベースが圧倒的に広く、アクセントはほんの少し」という感覚で十分です。60:30:10と紹介されることもありますが、考え方は同じです。
• 写真やイラストが多いページでは、写真の色もメインやアクセントとして数えます。写真が鮮やかなら、ベースとメインは控えめにすると全体が落ち着きます。
• アクセントカラーを使う場所が増えてきたら、比率が崩れているサインです。本当に目立たせたいもの1〜2か所に絞り直してください。

配色を決める5つのステップ

ここからは、実際に配色をゼロから決める手順です。順番が大切で、最初にメインカラーを決め、次にベース、最後にアクセントを決めます。いきなり色を並べ始めるより、ずっと早く迷わずに決まります。

1. 1

   伝えたい印象を言葉で決める

   「信頼感」「親しみやすさ」「高級感」「元気」「落ち着き」など、見た人に感じてほしい印象を2〜3語で書き出します。言葉にしておくと、色を選ぶ基準がぶれず、ほかの人に配色を説明するときにも役立ちます。

2. 2

   メインカラーを1色選ぶ

   印象に合う色相を1つ選び、明るさと鮮やかさを調整します。誠実さなら紺や青、自然さなら緑、温かさならオレンジや茶色が出発点になります。原色（#FF0000 や #0000FF）はそのまま使うと強すぎるので、少し暗くするか彩度を落とすと上品になります。

3. 3

   ベースカラーを決める

   迷ったら白（#FFFFFF）か、ごく薄いオフホワイト・グレーを選びます。メインカラーと同じ色相をごく薄くした色（たとえば紺がメインなら #F1F5F9 のような青みのグレー）をベースにすると、全体に統一感が出ます。

4. 4

   アクセントカラーを決める

   メインカラーから色相環で離れた色を選びます。補色（反対側の色）を使えば最も目立ち、補色の両隣（分裂補色）なら少し穏やかになります。アクセントはボタンや強調にだけ使うので、多少派手な色でもかまいません。

5. 5

   見やすさと見え方を数値で確かめる

   文字色と背景色、ボタンの文字とボタンの色のコントラスト比を確認し、本文は4.5:1以上あるかを見ます。あわせて色覚の違いによる見え方や、白黒にしたときに区別できるかも確認します。足りなければ色相はそのままに、明るさだけを調整します。

この5ステップのうち、最後の「数値で確かめる」は、目で見て判断するのが難しい部分です。配色チェッカーなら、文字色と背景色を入れるだけでコントラスト比とWCAGの合否が分かり、基準に届かないときは色相と彩度を保ったまま明度だけを動かした「最も近い合格の色」まで提案されます。

色相環から選ぶ配色パターン｜補色・類似色・トライアド

メインカラーが決まったら、アクセントやサブの色は「色相環」の上の位置関係から選ぶと、まとまりのある組み合わせになります。色相環は、赤・黄・緑・青・紫と色合い（色相）を円形に並べたもので、円の上での角度の差によって配色の性格が変わります。

初めて配色を組むなら、「同系色＋補色のアクセント1色」がいちばん失敗しにくい組み合わせです。メインカラーを明るくしたり暗くしたりした色でベースやサブを作り、アクセントにだけ反対側の色を使うと、統一感と目立つポイントの両方が手に入ります。補色の性質や、赤の補色がシアンとも緑とも言われる理由は補色とはで解説しています。

トーン（明度・彩度）をそろえると色が増えてもまとまる

色は「色相（赤・青などの色合い）」「明度（明るさ）」「彩度（鮮やかさ）」の3つの性質で決まります。このうち明度と彩度の組み合わせを「トーン」と呼びます。配色がちぐはぐに見える原因の多くは、色相ではなくトーンがばらばらなことにあります。

• パステル調（明るく、彩度が低い）でそろえる：やさしい・かわいい・ベビー用品や春のイベント向き
• ビビッド調（彩度が高い）でそろえる：元気・ポップ・セールや子ども向けのイベント向き
• ダーク調（暗い）でそろえる：重厚・高級・大人っぽい印象。文字は白や明るい色にする
• グレイッシュ調（くすんだ色）でそろえる：落ち着き・おしゃれ・ナチュラル系のブランドやカフェ向き

トーンがそろっていれば、色相の違う色を4つ5つと使っても、まとまって見えます。グラフの色分けや、カテゴリごとに色を変える必要があるときは、この「トーンをそろえて色相だけを変える」方法が便利です。反対に、パステルのピンクの隣に原色の青を置くと、色数が少なくても浮いて見えます。

メインカラーの明度だけを何段階かに変えた色を用意しておくと、ベースの薄い背景、罫線、ボタンにマウスを乗せたときの色などがすべて同じ色から作れて便利です。配色チェッカーの「明度違いのトーン」には、基準色と同じ色相・彩度で明るさだけを変えた5段階が表示されます。

色が与える印象｜メインカラー選びの目安

色には、多くの人が共通して感じやすい印象があります。もちろん文化や個人の経験で変わるものですが、メインカラーを選ぶときの出発点としては十分に役立ちます。同じ色相でも、明るくすれば軽く、暗くすれば重く、彩度を落とせば落ち着いた印象に変わります。

メインカラーを1色選んだら、それを「明るくした色」と「暗くした色」も一緒に試してみてください。たとえば同じ青でも、明るい水色はさわやかさ、紺は信頼感、くすんだブルーグレーは落ち着きを感じさせます。印象の言葉に合う明るさを探すほうが、色相を何度も変えるより早く答えにたどり着けます。

見やすさはコントラスト比で確かめる

配色でいちばん見落とされやすいのが「読めるかどうか」です。自分のモニターでははっきり見えていても、スマホの画面を屋外で見たり、プロジェクターで映したり、視力が低い人が見たりすると、明度差の少ない文字は一気に読めなくなります。これを数値で確かめるのがコントラスト比です。

コントラスト比は、2つの色の明るさ（相対輝度）の比で、同じ色どうしなら1:1、白と黒なら最大の21:1になります。Webアクセシビリティの国際的なガイドラインであるWCAG 2.1では、次の値が基準として示されています。

実際の色で比べてみると、見た目の印象と数値がずれることがよく分かります。特に、黄色やオレンジ、水色のように明るい色は、鮮やかで目立って見えても、白い背景や白い文字との明度差はほとんどありません。

基準に届かないときに色を丸ごと変える必要はありません。色相と彩度はそのままに、明度だけを下げる（または上げる）と、印象をほとんど変えずに読みやすくできます。配色チェッカーで試すと、白い背景に #999999 の文字なら #757575（4.60:1）、白い文字を乗せるオレンジのボタン #FF7A00 なら背景を #BD5A00（4.53:1）に暗くする案が表示されます。

色覚の違いにも配慮する｜色だけで情報を伝えない

色の見え方には個人差があり、日本では男性の約20人に1人、女性の約500人に1人が、赤と緑などの区別がつきにくい色覚の特性を持つと言われています。配色を決めるときは、自分に見えている色の差が、すべての人に同じように見えているわけではないことを前提にします。

• 赤と緑、オレンジと黄緑、青と紫のように、明るさが近い組み合わせは区別しにくくなります。
• 「赤字はエラー」「緑は完了」のように色だけで意味を伝えず、アイコン・文字・線の形でも区別できるようにします。
• グラフの系列は、色相だけでなく明度にも差をつけます。白黒で印刷しても区別できれば、多くの見え方で区別できます。
• 凡例を離れた場所に置くより、グラフの線や棒のすぐ横にラベルを書くほうが確実に伝わります。

配色チェッカーの「色覚シミュレーション」タブでは、最大8色を入れて、1型（P型）・2型（D型）・3型（T型）とグレースケールでの見え方を並べて比べられ、取り違えやすい組み合わせが色差の数値つきで表示されます。資料やグラフの色分けの具体的な直し方は色覚多様性に配慮した配色にまとめています。

用途別の配色例｜カラーコードとコントラスト比つき

ここでは、そのまま使える配色の例を用途別に紹介します。どれもベース・メイン・アクセント・文字色の4つで構成し、文字が読めるかをコントラスト比で確かめてあります。メインカラーのボタンには白い文字を乗せる前提で、その比も載せています。

ベースを真っ白ではなく、メインカラーやアクセントの色みをほんの少し含んだオフホワイトにすると、全体の印象がやわらかくなります。カフェの例の #FFF8F0 や美容の例の #FFF5F7 がこれにあたり、白い紙や白い画面よりも温かみが出ます。

子ども向けの例のように、アクセントを白い文字のボタンに使うと3:1台にとどまる色もあります。その場合はボタンの文字を大きく太くして「大きい文字」の基準（3:1）に収めるか、アクセントは文字を乗せない飾りやアイコンにだけ使うと、元気な印象を残したまま読みやすさを保てます。

よくある配色の失敗と直し方

迷ったときは、いったん全体を白黒（グレースケール）にしてみるのがおすすめです。白黒にしても見出しと本文、ボタンと背景がはっきり区別できれば、明度差の設計はうまくいっています。反対に、白黒にすると要素が溶け込んでしまう部分は、色を足すのではなく明るさを離すことで解決します。

配色チェッカーで配色を決める手順

ここまでの内容は、配色チェッカーを使うとブラウザ上でまとめて確認できます。色はすべてブラウザの中で計算され、入力した色がサーバーに送られることはありません。

1. 1

   メインカラーを「文字色・基準色」に入れる

   #1E40AF のようなカラーコードのほか、rgb() や hsl() の書き方でも読み取れます。カラーピッカーで選ぶこともできます。

2. 2

   「配色パターン」タブでアクセントの候補を見る

   補色・類似色・分裂補色・トライアド・テトラードの色と、明度違いのトーン5段階が表示されます。色をクリックするとカラーコードをコピーできます。

3. 3

   「コントラスト」タブで文字色と背景色を確かめる

   文字色と背景色を入れると、通常の文字・大きい文字・UI部品のAA／AAAの合否が一覧になります。届かない場合は、明度だけを動かした最も近い合格の色が提案されます。

4. 4

   「色覚シミュレーション」タブで見分けやすさを確かめる

   「基準色の配色を読み込む」を押すと、配色パターンの色がまとめて入ります。取り違えやすい組み合わせが残っていないかを確認してください。

5. 5

   共有URLやコピーで結果を残す

   入力した色は共有URLに残るので、チームに配色案を送るときに便利です。判定結果や配色をテキストでまとめてコピーすることもできます。

補色の残像を体で感じてみたい場合は、色の残像錯視ツールも参考になります。補色どうしを並べたときに目がちかちかする理由が、体感として分かります。

よくある質問

配色の70:25:5の法則とは何ですか？

ベースカラーを約70%、メインカラーを約25%、アクセントカラーを約5%の面積で使うと、配色がまとまりやすいという目安です。数字を厳密に守る必要はなく、ベースが圧倒的に広く、目立たせたい色ほど面積を小さくするという考え方が大切です。

配色は何色までにするのがいいですか？

ベース・メイン・アクセントの3色に、本文の文字色を加えた4色が基本です。グラフの色分けなどで色数が必要なときは、明度と彩度（トーン）をそろえて色相だけを変えると、色が増えてもまとまって見えます。

メインカラーとアクセントカラーの違いは何ですか？

メインカラーは配色全体の印象を決める主役の色で、見出しやヘッダーなど広めの面積に使います。アクセントカラーは視線を集めるための色で、ボタンや強調したい数字などごく狭い場所にだけ使います。アクセントはメインカラーと色相が離れた色を選ぶと効果的です。

配色のセンスがなくても、きれいな配色は作れますか？

作れます。色の数を3色に絞る、70:25:5の面積比を守る、トーンをそろえる、文字と背景のコントラスト比を4.5:1以上にする、という決まりを守るだけで、配色の失敗の大半は防げます。メインカラーを1色選べば、残りは色相環の位置関係から機械的に選べます。

見やすい文字色と背景色の組み合わせは？

白い背景なら、#333333 や #1F2937 のような濃いグレーの文字が読みやすく、どちらもコントラスト比は12:1以上あります。WCAG 2.1 の基準では、本文の文字は背景との比が4.5:1以上、24px以上の大きい文字は3:1以上が目安です。薄いグレー（#999999）は白い背景だと2.84:1で基準に届きません。

オレンジや黄色のボタンに白い文字を乗せても大丈夫ですか？

多くの場合、読みにくくなります。白い文字とオレンジ（#FF7A00）は2.61:1、黄色（#FFFF00）は1.07:1しかありません。ボタンの色を少し暗くするか、白ではなく濃い色の文字を乗せてください。#F59E0B のボタンに #1F2937 の文字なら6.83:1になります。

補色を使うと配色が派手になりすぎます。どうすればいいですか？

補色の片方の面積を小さくしてアクセントにとどめるか、どちらかの彩度を落とします。補色の両隣を使う分裂補色にすると、目立ちながらもぶつかりにくくなります。補色どうしの文字と背景はちらつきやすいので、文字には使わないのが無難です。

Webと印刷で同じ配色を使えますか？

基本的には使えますが、画面の色（RGB）には印刷（CMYK）で再現できない鮮やかな色があり、特に明るい青緑や蛍光色はくすんで見えます。印刷物では印刷所の指定に合わせてCMYKで色を指定し、試し刷りで確認してください。配色チェッカーのCMYKは参考値で、そのまま入稿には使えません。

色覚の違いに配慮した配色にするにはどうすればいいですか？

赤と緑のように明るさが近い組み合わせを避け、色だけでなく明度の差・アイコン・文字・線の形でも区別できるようにします。白黒にしても区別できるかを確かめると、多くの見え方で区別できるかの簡単な目安になります。