色の基本

色は、デザインの中で「最も早く、感情に届く」要素です。
人は文字を読むよりも前に、色を見て「なんとなく良さそう」「怪しい」「高そう」といった判断を0.1秒で行っています。

つまり、配色は「飾り」ではなく、
ユーザーの感情を操り、行動を促すための「機能」です。

センスに頼らず、ロジック(理論)で色を決めるための
「心理効果」と「配色のルール」について解説します。


目次

色の心理効果(イメージのコントロール)

色には、人間が本能的・経験的に感じる共通のイメージがあります。 「誰に、どう思われたいか」という目的から逆算して色を選びます。

【 暖色系(赤・橙・黄) 】

交感神経を刺激し、興奮やポジティブな感情を生みます。 時間が早く過ぎるように感じさせる効果もあります。

  • 赤(情熱、危険、活動的)  →「セール」「重要」「警告」など、注目させたい時に最強の色。
  • 橙(親しみ、食欲、家庭的)  → 飲食店や家族向けサービスなど、温かさを出したい時。
  • 黄(明るさ、幸福、注意、安さ)  → 子供向け、安売り(ディスカウント)、工事現場の注意喚起。

【 寒色系(青・水色・青紫) 】

副交感神経を刺激し、心を落ち着かせ、信頼感を与えます。 時間がゆっくり流れるように感じさせる効果があります。

  • 青(信頼、知性、誠実、冷たい)  → 企業のロゴ、銀行、IT、ビジネス全般で好まれる「失敗しない色」。
  • 水色(爽やか、清潔、自由)  → 飲料水、清掃サービス、夏のキャンペーン。

【 中性色・無彩色(緑・紫・白・黒) 】

温度を感じさせない、または特別な印象を与える色です。

  • 緑(自然、平和、健康、安心)  → 健康食品、リラックス、環境系。迷ったら緑は目に優しく外れがない。
  • 紫(高貴、神秘、怪しい、優雅)  → 占い、高級化粧品、または夜のイメージ。使い方が難しい色。
  • 白(清潔、純粋、始まり、無)  → 医療、ブライダル、ミニマルなデザイン。
  • 黒(高級、威厳、恐怖、モダン)  → 高級ブランド、男性向け商品。全体を引き締める効果。

1.色の三属性(トーンの調整)

「赤ならなんでもいい」わけではありません。 色の「トーン」を変えることで、ターゲットに合わせます。

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

・彩度  
→ 鮮やかか、くすんでいるか。

鮮やか=元気、派手、チープ(安っぽい)

くすんでいる=落ち着き、おしゃれ、ナチュラル

・明度
→ 明るいか、暗いか。

明るい=軽い、柔らかい、子供っぽい

暗い=重い、硬い、大人っぽい

※初心者が陥りやすい罠

「真っ赤」「真っ青」のような「原色(彩度MAX)」を多用すると、
目がチカチカして、安っぽく、素人っぽい印象になりがちです。

少しだけ明度や彩度を落とすのが、垢抜けるコツです。


配色の黄金比(70:25:5の法則)

色を選ぶ際、最も重要なのは「バランス」です。 画面の中に使う色は、基本的に「3色」に絞り、以下の比率で配分します。

ベースカラー(70%):背景色 デザインの面積の大部分を占める色。
白、薄いグレー、ベージュなどの「無彩色」や「淡い色」を使うと、邪魔になりません。
ここが濃すぎると、読みにくいデザインになります。

メインカラー(25%):主役の色 ブランドイメージや、伝えたい印象を決める色。
ロゴの色や、心理効果に基づいた色を使います。 見出し、アイコン、枠線などに使用します。

アクセントカラー(5%):強調色 全体を引き締め、ユーザーの目を引くための色。
「購入ボタン」「申し込み」など、一番目立たせたい部分にピンポイントで使います。
メインカラーの「補色(反対側の色)」を使うと、最も目立ちます。 (例:メインが青なら、アクセントは黄色〜オレンジ)


まとめ

配色は「好き嫌い」で決めるものではありません。

  1. 目的(ターゲット・印象)を決める
  2. 心理効果に合わせてメインカラーを選ぶ
  3. 70:25:5 の比率で組み立てる

この手順を踏むことで、「なんとなく綺麗」なだけでなく、「正しく機能する」デザインを作ることができます。

目次