色は感情を動かす
人は色から無意識に感情や印象を受け取ります。ある調査では、ユーザーがサイトの第一印象を判断する時間はわずか0.05秒。そしてその判断の62〜90%が「色」に基づいています。配色はデザインの中で最もコストパフォーマンスの高い改善ポイントです。
色が持つ心理効果と文化的な違い
| 色 | 心理効果 | 向いている業種 | 日本での印象 | 海外での注意点 |
|---|---|---|---|---|
| 青 | 信頼、誠実、冷静 | 士業、金融、IT | 爽やか、誠実 | 中東では安全の象徴 |
| 緑 | 安心、自然、健康 | 医療、福祉、環境 | 安らぎ、若さ | イスラム圏で神聖な色 |
| 赤 | 情熱、緊急、食欲 | 飲食、セール | お祝い、活力 | 中国で幸運、南アで喪 |
| オレンジ | 親しみ、活力、温かさ | 教育、サービス | 元気、カジュアル | オランダの国民色 |
| 黒 | 高級、権威、洗練 | ファッション、高級品 | フォーマル | 多くの国で喪の色 |
| 白 | 清潔、シンプル、空間 | 医療、美容 | 清らかさ | 東アジアで喪の色 |
配色の基本ルール｜60-30-10の法則
プロのデザイナーが使う配色比率の基本は「60-30-10」です。
- 60%｜ベースカラー：背景や余白に使う色。白やライトグレーが定番
- 30%｜サブカラー：見出し、カード背景、セクション区切りに使用
- 10%｜アクセントカラー：CTAボタン、リンク、強調箇所に限定して使用
この比率を守るだけで、素人っぽさが消え、洗練された印象になります。
アクセシビリティ｜コントラスト比の基準
WCAG 2.1では、テキストと背景のコントラスト比に明確な基準があります。
| テキストサイズ | 最低コントラスト比（AA） | 推奨コントラスト比（AAA） |
|---|---|---|
| 通常テキスト（16px以下） | 4.5 : 1 | 7 : 1 |
| 大きいテキスト（18px以上） | 3 : 1 | 4.5 : 1 |
| UIコンポーネント | 3 : 1 | --- |
よくある失敗例：薄いグレー文字（#999999）に白背景（#ffffff）。コントラスト比は2.85:1で基準を満たしません。最低でも#767676（4.54:1）以上を使いましょう。
ダークモードでの配色設計
ダークモード対応サイトが増えていますが、単に白黒を反転するだけでは失敗します。
- 背景は真っ黒（#000）を避ける：#1a1a2eや#121212など、わずかに色味を加える
- 白文字も避ける：#e0e0e0程度に抑え、眩しさを軽減
- アクセントカラーの彩度を下げる：ライトモードの色をそのまま使うと浮いて見える
- 影ではなくボーダーで区切る：暗い背景にshadowは見えにくい
配色で失敗する3つのパターン
- 色を使いすぎる：3色（ベース・サブ・アクセント）以内が基本。4色以上はカオスの原因
- コントラスト不足：見た目のおしゃれさを優先して可読性を犠牲にしている
- 業種イメージとの不一致：葬儀社に赤、法律事務所にピンクなど
KANADE WEBの配色設計
KANADE WEBでは、業種・ターゲット・文化的背景を考慮した最適な配色をご提案。コントラスト比のチェック、ダークモード設計、アクセシビリティ対応まで含めた配色設計を行います。