配色とは？Webデザインで色を決める基本ルールと迷ったときの判断軸

見本を真似すれば作れるのに、自分で色を決める段になると手が止まる…
なんとなく好きな色を置いているので、理由を聞かれると答えられない…

見本どおりに作れるようになった方が、次につまずくのが配色です。

色が決まらない理由は、センスの有無ではありません。決めるための判断基準を知らないのが原因の大半です。基準が分かれば、おしゃれな組み合わせを思いつかなくても自分で色を決められるようになりますね。

この記事では、配色という言葉の意味と基本ルールを先に押さえたうえで、

• 同じ色でも効き方が変わる理由
• 手が止まったときの判断軸

を順に説明します。

配色とは？色を「選ぶ」ことではなく「配る」こと

配色とは
どの色を・どれだけの面積で・どこに置くかを決めることです。「配」の字が示すとおり、色を思いつく作業ではありません。画面のどこへどれだけ配るかを決める作業です。

ここを押さえると、迷ったときに手を動かす場所が変わります。

• 色を探し直すのか？
• 配り方を直すのか？

といった原因の切り分けができるんですね。

1、「色選び」と「配色」はどこが違うのか

• 色選び … 単体の色を決めること（この青がきれい、この緑が好き）
• 配色 … 色と色の関係と、それぞれの分量を決めること

気に入った色を3つ並べたのに画面が崩れてしまうのは、関係と分量が決まっていないからです。きれいな色を探すほど迷いが増えるのは、決める対象がずれているからですね。

2、配色の基本ルールは3つだけ

• 色数を絞る（増やすほど優先順位がつきづらくなります）
• 色に役割を決める（広い面・印象をつくる面・一番見せたい1か所です）
• 読める明暗差をつける（基準はWebの場合だけ数値で決まっています）

色数を絞るのは、見せたい場所を1か所に残すためです。5色も6色も使うと、どこが主役なのか伝わりません。

役割の決め方は、広い面を占める色・サイト全体の印象をつくる色・一番押してほしい1か所に使う色、という3つに割り当てるだけです。

ここまでが「配色とは何か」の答えです。比率の運用と具体的なパターンは別の記事にまとめているので、手順まで知りたい方はそちらへ進んでください。

Webデザインで配色が担う3つの仕事

配色を学ぶ理由は、画面をきれいにするためではありません。Webの画面では、色が次の3つの仕事を引き受けています。

1、情報の優先順位をつける

読者はページを上から順に読みません。ざっと眺めて、目に入った場所から読み始めます。だからこそ一番読ませたい場所にだけ強い色を置くという判断が効いてきます。

どこに強い色を置くかは、視線の流れの設計と合わせると決めやすくなります。Z型・F型の型を知っておくと、目が通る順番が読めるようになりますよ。

また、優先順位は色だけで作るものでもありません。色で差がつかないときは、文字サイズの比率を見直すほうが早い場面もあります。

2、伝えたい印象をつくる

同じ文章・同じ写真でも、色が変われば受け取られ方が変わります。落ち着いた印象、元気な印象、価格の高さを感じる印象。読者は本文を読む前に、色から雰囲気を受け取っています。

「赤は情熱、青は誠実」のようなイメージの一覧を覚えても、実務では使えません。同じ青でも、濃さと分量が変われば受け取る印象が変わるためです。

私が勧めているのは、ターゲットが普段見ている画面の色に寄せる、という決め方です。40代の女性向けのサービスなら、その層がよく使っているサイトやSNSの画面を10枚ほど並べてみる。色の濃さや明るさの傾向が見えてきます。

3、押せる場所を分からせる

ボタン・リンク・入力欄のように、Webにはクリックやタップなど、「押せる」ということを色で示す必要があります。

押せる色は、押せない装飾に使い回さない。見出しの背景やアイコンに同じ色を散らすと、読者はどれが押せるのか判断できなくなります。

機能のための色は1色空けておく、と決めてしまうのが楽なんです。

同じ色でも効果が変わる3つの理由

同じ色を指定したのに、作例のような見え方にならない。原因はたいてい色の指定より、配り方にあります。条件は3つです。

1、どれだけ使うか（面積）

同じ赤でも、ボタン1個分と背景全面では強さがまるで違います。全面に敷いた赤は、本文が読みにくくなるほど目に残りませんか？

「この色が強すぎる」と感じたら、色を変える前に使う面積を減らす。この順番だけで、作り直しの回数が減りますよ。

減らし方にも段階があります。背景全面に使っていた色なら、まずセクションの帯だけに狭める。それでも強いと感じたら、見出しの下線とボタンだけに残します。色の指定はそのままで、置く範囲を1段階ずつ削っていくわけです。

2、何と重ねるか（明暗差）

目立たせたい箇所が目立たない原因の一つが、明暗差の不足です。

添削でもこの勘違いはよく出てきます。例えばサイズは大きいのに「見出しが目立たない」のは、たいてい文字と背景の明るさが近い。文字を暗くする、または背景を明るくするだけで、彩度を触らずに収まった例が何度もあります。

明るさの差で区別をつくるという考え方は、デザインの4原則でいう「対比」と同じです。色相を変えるより先に、明るさの差を疑ってみてください。

3、どこに置くか（位置）

強い色を画面の3か所に置くと、3か所とも目立たなくなります。同じ色・同じ面積でも、置く数と場所で効き方が変わるということですね。

画面の上のほうに置いた強い色は読者の目に最初に入りますが、下のほうに置いた同じ色は「見つけてもらえるか」の勝負になります。

比べるポイント	広い面積に使う色	1か所に絞る色
担う役割	画面全体の雰囲気をつくる	見てほしい場所を示す
向いている色	白・グレー・彩度を落とした色	彩度の高い色
置く場所	背景・セクションの帯	申し込みボタン・バッジ
強すぎると感じたとき	明るさを上げて薄くする	彩度を少し落とす

Webならではの配色の条件（画面で読まれる前提）

配色は画面の外でも語られる言葉ですが、Webには固有の条件があります。読者の端末で、その文字が読めるかを問われる点です。

1、文字が読める明暗差の基準がある

W3CのWCAG 2.1では、文字と背景の明暗差（コントラスト比）について次の水準が示されています。

• 通常の文字と背景 … 4.5:1以上
• 大きい文字と背景 … 3:1以上
• ボタンの枠やアイコンなど文字以外の部品 … 隣接する色に対して3:1以上

ここでいう「大きい文字」は、18ポイント以上または14ポイント太字以上と定義されています。日本語・中国語・韓国語の書体では、これと同等のサイズが該当するとW3Cでは説明されています。

この3:1は、達成基準1.4.11（非テキストのコントラスト）で求められている水準です。枠線が薄いボタンは、読者が「押せる場所」と気づけません。

薄いグレーの文字がおしゃれに見えているのは、作っている本人だけかもしれません。好みの前に、読めるかを確認してください。

2、色だけで情報を区別しない

色は「情報を伝える・操作を示す・反応を促す・要素を区別する」唯一の視覚的手段にしないよう求められています。

• 本文中のリンクを、色の違いだけで示す
• 入力エラーを、枠線を赤くするだけで伝える

• リンクに下線を併用する
• エラーにアイコンと文言（「メールアドレスの形式が違います」）を添える

色相に加えて明るさにも差があり、相対輝度の比が3:1以上あれば区別の手段として認められます。ただし特定の色を正確に見分ける力に頼る場合は、比率に関わらず色以外の手がかりが必要だとされています。緑の枠を「正常」、赤の枠を「エラー」として使い分ける場面ですね。

3、端末によって見え方が変わる前提で確認する

自分のモニターで整っていた色が、スマホでは沈んで見えることがあります。画面の明るさ設定、ダークモード、屋外の日差し。読者の環境は作り手と違いますね。

1. スマホの実機で開いて、文字が読めるか確認する
2. 明るい場所と暗い場所の両方で見る
3. グレースケール（白黒）にして、見せたい場所が残っているか確認する（色の鮮やかさでごまかしていた箇所が出ます）

配色で迷ったときの判断軸

手が止まったとき、新しい色を探しに行くと時間だけが過ぎます。私が塾生に渡している打ち手は3つです。

1、色を増やさず、同じ色の明るさを変える

要素が増えたときに色を足すと、優先順位が崩れます。足すのは色ではなく明るさの段階。

段階は3つあれば足ります。決めた色の濃い・中間・薄いを用意して、濃いほうを見出しや文字、中間を枠線やアイコン、薄いほうを背景の帯に割り当てる。色数は1つのまま、区別できる場所が3つに増えます。

4段階目が欲しくなったときは、たいてい要素の整理が足りていません。色を足す前に、同じ役割の要素をまとめられないか見直してください。

2、強調したい場所が2つ以上あるときは順位をつける

一番押してほしいボタンと、一番読ませたい見出し。両方に強い色を置いた時点で、読者が最初に見る場所は決まらなくなります。

決め方は、このページで成果になる行動を1つだけ選ぶことです。申し込みなのか、資料の請求なのか、次に進んでもらうことなのか。選んだ1つにだけ強い色を渡します。

落選したほうは色をあきらめて、文字サイズと余白の差で見せます。

3、決まらないときは「誰に何を伝えるか」に戻る

好みで迷っているときは、判断の基準が目的から離れています。この画面は誰に何をしてほしいのか。そこへ戻ると、候補は自然に減ります。

順番はこうです。まず「40代の女性に、無料体験へ申し込んでもらう」のように、誰に何をしてほしいかを1行で書き出す。次に候補の色をその1行の横に並べ、合わない色を落とす。最後に残った色から、一番見せたい場所に使う色を決めます。

最終チェックは、クライアントに「なぜこの色なのか」を1行で説明できるかどうか。説明できる色なら、修正を求められても根拠をもって戻せます。

判断軸を手に入れたら、小さい制作物で試すのが一番早いです。1枚で完結するバナーなら、面積と明暗差の効き方を一度の制作で確かめられます。バナーの作り方を初心者向けに解説｜手順・サイズ・上達のコツ

まとめ

配色とは、どの色を・どれだけの面積で・どこに置くかを決めること。才能よりも、決める順番を持っているかで差がつきます。

• 基本ルールは3つ（色数を絞る／色に役割を決める／読める明暗差をつける）
• 同じ色でも、面積・隣の色・位置で効き方が変わる
• Webは画面で読まれるので、通常の文字4.5:1・大きい文字3:1という明暗差の基準がある
• 色だけで情報を区別せず、下線やアイコン、文言を添える
• 迷ったら色を足さず、明るさの段階を足す。強い色を渡す場所は1つに絞る

色が決まらない日は、この画面で一番見せたい場所を1行書き出すところから始めてください。

参考にした情報源

• W3C「Understanding SC 1.4.3: Contrast (Minimum)」https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
• W3C「Understanding SC 1.4.1: Use of Color」https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
• W3C「Web Content Accessibility Guidelines (WCAG) 2.1」https://www.w3.org/TR/WCAG21/
• MDN Web Docs「Color contrast」https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast

※2026年10月時点の記載にもとづいています。仕様は改訂されることがあります。