色について学ぶ30日 ― 色を知ると世界がもっと楽しくなる
【Day25】色とデザインの失敗例 ― やってはいけない色使い
「色を使えばオシャレになる」「目立たせれば良い」
と思ってしまいがちですが…
実はデザインの世界では、
“やってはいけない色使い”がはっきり存在します。
これを知らないと、
- 読みにくい
- 信頼感が落ちる
- 安っぽく見える
- 情報が伝わらない
- クリックされない
という大きな損失につながります。
今日は、プロの現場で絶対に避ける「色の失敗例」と
分かりやすい改善ポイントを紹介します。
■ 1. 色を使いすぎる（多色使いの失敗）
初心者の最大の失敗がこれ。
何色も使ってしまう → 情報が散乱する。
例：
- チラシに赤・青・緑・黄色・紫が全部入っている
- バナーがカラフルで読みにくい
- パワポ資料が子ども向けのようになってしまう
● 改善
→ 3色＋無彩色（白・黒・グレー） に抑える
（Day16の黄金比：70 / 25 / 5）
■ 2. コントラストが弱すぎて読めない
ありがちな例：
- 薄い黄色 × 白文字
- 明るい緑 × 黄色文字
- 水色 × 明るいグレー文字
画面では特に“光の影響”で読みにくくなります。
● 改善
→ 文字：背景 = 明確な明暗差をつける
→ 特に白背景には黒か濃グレーが基本
■ 3. 補色を強い彩度でぶつけてしまう
代表例：
- 赤 × 緑
- 青 × オレンジ
- 紫 × 黄色
補色は目立つ分、
彩度が高いまま使うと“喧嘩する” ため目が疲れます。
● 改善
→ どちらかを くすませる（低彩度化）
→ 明度を変えて緩和する
→ アクセントに少量だけ使う
■ 4. ブランドイメージと色がズレている
例：
- 高級ブランドなのに黄色メイン
- 医療サイトなのに黒×赤で不安
- 子ども向けなのに青×黒で冷たい印象
色は「性格」。
ブランド性格と色が合わないと、信頼が落ちます。
● 改善
→ Day21の“ブランドカラー分析”を使う
→ ブランドの人格（キャラ）を色に落とし込む
■ 5. 背景画像と文字色が溶け込む
ありがち失敗：
- オシャレな背景写真に白文字で可読性ゼロ
- 彩度の高い布写真の上に小さな文字
写真 × 文字は特に注意。
● 改善
- 写真に 半透明の黒 or 白の幕 を乗せる
- 文字に影（シャドウ）を足す
- そもそも文字部分は写真を避けるレイアウトに
■ 6. 意味を持つ色を“無意識”に使っている
色には文化的・心理的意味があります（Day7〜Day14）。
失敗例：
- 注意喚起を黄色ではなく、優しい緑で書いてしまう
- ボタンを赤にした結果、「削除」と誤認される
- 医療系サイトのCTAが黒で不安感を与える
● 改善
→ 色の心理・文化的意味を必ずチェック
→ 「なぜこの色を使うのか」説明できる状態にする
■ 7. 色温度がバラバラ（暖色と寒色が不調和）
例：
- 暖色系の写真の中に突然寒色のボタン
- 全体が青いのに一部だけ朱色で浮く
- 和風デザインにネオンブルー
色温度のズレは、統一感を破壊します。
● 改善
→ 暖色なら全体を暖色よりに寄せ、寒色は控えめに
→ 写真の色味を整える（レタッチ）
■ 8. “安っぽく見えてしまう”典型パターン
- 彩度MAXの原色を大面積で使う
- 影・グラデーションを乱用
- 塗りつぶしの色が強すぎる
● 改善
→ 落ち着いたトーン（くすみ・淡色） を使う
→ カラーパレットを統一
■ 9. 楽しいデザインにしたいのに“うるさい”仕上がりになる
“元気さ”と“うるささ”は紙一重。
失敗例
- カラフルすぎる子ども向けチラシ
- 色の方向性が定まらない雑誌の企画バナー
● 改善
→ 彩度を揃える
→ トーン（Day5）を統一
→ カラフルにしたい場合でも 3〜4色に抑える
▼ まとめ
- 色数が多いと崩れる
- コントラスト不足は致命的
- 補色は強くぶつけない
- ブランド性格と色を合わせる
- 背景×文字は可読性最優先
- 意味を持つ色を無意識に使わない
- 色温度を揃える
- 彩度過多は“安っぽさ”に直結
「色の失敗」は、知っていれば簡単に避けられます。
今日から、迷ったらこのチェックリストを思い出してください。
▼ 出典・参考
- Web & Graphic Design Color Mistake analysis
- 日本色彩学会「色彩設計の基礎」
- UXデザインにおける色の最適化ガイド
- 配色理論実践書