色は、デザインの中で「最も早く、感情に届く」要素です。
人は文字を読むよりも前に、色を見て「なんとなく良さそう」「怪しい」「高そう」といった判断を0.1秒で行っています。
つまり、配色は「飾り」ではなく、
ユーザーの感情を操り、行動を促すための「機能」です。
センスに頼らず、ロジック(理論)で色を決めるための
「心理効果」と「配色のルール」について解説します。
色の心理効果(イメージのコントロール)
色には、人間が本能的・経験的に感じる共通のイメージがあります。 「誰に、どう思われたいか」という目的から逆算して色を選びます。
【 暖色系(赤・橙・黄) 】
交感神経を刺激し、興奮やポジティブな感情を生みます。 時間が早く過ぎるように感じさせる効果もあります。
- 赤(情熱、危険、活動的) →「セール」「重要」「警告」など、注目させたい時に最強の色。
- 橙(親しみ、食欲、家庭的) → 飲食店や家族向けサービスなど、温かさを出したい時。
- 黄(明るさ、幸福、注意、安さ) → 子供向け、安売り(ディスカウント)、工事現場の注意喚起。
【 寒色系(青・水色・青紫) 】
副交感神経を刺激し、心を落ち着かせ、信頼感を与えます。 時間がゆっくり流れるように感じさせる効果があります。
- 青(信頼、知性、誠実、冷たい) → 企業のロゴ、銀行、IT、ビジネス全般で好まれる「失敗しない色」。
- 水色(爽やか、清潔、自由) → 飲料水、清掃サービス、夏のキャンペーン。
【 中性色・無彩色(緑・紫・白・黒) 】
温度を感じさせない、または特別な印象を与える色です。
- 緑(自然、平和、健康、安心) → 健康食品、リラックス、環境系。迷ったら緑は目に優しく外れがない。
- 紫(高貴、神秘、怪しい、優雅) → 占い、高級化粧品、または夜のイメージ。使い方が難しい色。
- 白(清潔、純粋、始まり、無) → 医療、ブライダル、ミニマルなデザイン。
- 黒(高級、威厳、恐怖、モダン) → 高級ブランド、男性向け商品。全体を引き締める効果。
1.色の三属性(トーンの調整)
「赤ならなんでもいい」わけではありません。 色の「トーン」を変えることで、ターゲットに合わせます。

・色相
→ 色味の違い(赤か、青か)。

・彩度
→ 鮮やかか、くすんでいるか。
鮮やか=元気、派手、チープ(安っぽい)
くすんでいる=落ち着き、おしゃれ、ナチュラル

・明度
→ 明るいか、暗いか。
明るい=軽い、柔らかい、子供っぽい
暗い=重い、硬い、大人っぽい
※初心者が陥りやすい罠
「真っ赤」「真っ青」のような「原色(彩度MAX)」を多用すると、
目がチカチカして、安っぽく、素人っぽい印象になりがちです。
少しだけ明度や彩度を落とすのが、垢抜けるコツです。
配色の黄金比(70:25:5の法則)

色を選ぶ際、最も重要なのは「バランス」です。 画面の中に使う色は、基本的に「3色」に絞り、以下の比率で配分します。
ベースカラー(70%):背景色 デザインの面積の大部分を占める色。
白、薄いグレー、ベージュなどの「無彩色」や「淡い色」を使うと、邪魔になりません。
ここが濃すぎると、読みにくいデザインになります。
メインカラー(25%):主役の色 ブランドイメージや、伝えたい印象を決める色。
ロゴの色や、心理効果に基づいた色を使います。 見出し、アイコン、枠線などに使用します。
アクセントカラー(5%):強調色 全体を引き締め、ユーザーの目を引くための色。
「購入ボタン」「申し込み」など、一番目立たせたい部分にピンポイントで使います。
メインカラーの「補色(反対側の色)」を使うと、最も目立ちます。 (例:メインが青なら、アクセントは黄色〜オレンジ)
まとめ
配色は「好き嫌い」で決めるものではありません。
- 目的(ターゲット・印象)を決める
- 心理効果に合わせてメインカラーを選ぶ
- 70:25:5 の比率で組み立てる
この手順を踏むことで、「なんとなく綺麗」なだけでなく、「正しく機能する」デザインを作ることができます。
