05. 色の使い方って？
デザインって色をうまく使えたらオシャレになるよね！でも、色ってどう選んでいいか分かんない…
色は感情や情報を伝える“すごい道具”なんだよ！コツをつかめば、誰でも上手に使えるようになるよ。
✴️ 色の役割とは？
| 役割 | 内容 |
|---|---|
| 情報を伝える | 赤＝注意、青＝安心などの「意味」を持つ |
| 視線を誘導する | 強い色ほど目を引くので、見せたい場所に使う |
| 雰囲気を作る | 優しい・元気・落ち着いた印象など |
| ブランドの印象を強める | 特定の色で「企業らしさ」を印象づける |
✴️ 色の三要素（色相・明度・彩度）を知ろう
| 要素 | 説明 |
|---|---|
| 色相 | 赤・青・黄など色みの種類 |
| 明度 | 明るさの度合い（白〜黒） |
| 彩度 | 鮮やかさの度合い |
✴️ 配色の基本ルール
| 配色パターン | 説明 |
|---|---|
| 類似色配色 | 同じような色でまとめると落ち着く印象に |
| 補色配色 | 対極の色でコントラストが強く目立つ |
| トーン配色 | 明度・彩度を合わせると統一感が出る |
🧪 おすすめツール：Adobe Color、Coolors
✴️ 色が与える心理効果
| 色 | イメージ | よく使われる場面 |
|---|---|---|
| 赤 | 情熱・警告 | セール、ボタン |
| 青 | 信頼・冷静 | 企業サイト、金融 |
| 緑 | 安心・自然 | 健康、エコ系 |
| 黄色 | 明るさ・注意 | 子ども向け、誘導 |
| 黒 | 高級感・重厚 | ファッション、モノトーン系 |
✴️ Webデザインでの色の注意点
- コントラスト不足はNG（文字が読みにくくなる）
- 色だけで情報を伝えない（色覚バリアフリー）
- スマホ・PCで色の見え方が変わる
✴️ 色を扱うときのコツ・練習方法
- 自分の好きなサイトの配色を真似して再現してみる
- 配色パターンを収集してストックしておく
- モノクロでデザインを作って、あとから色をつけてみる
✴️ よくある失敗とその回避法
| 失敗例 | 原因 | 対処法 |
|---|---|---|
| 全部が目立ってごちゃごちゃ | コントラスト不足、色の使いすぎ | 主役と脇役を決めて色数を絞る |
| 色がチグハグな印象 | トーンがバラバラ | 色相や明度を揃えて統一感を出す |
| ボタンが押されない | 色が弱い、意味が伝わらない | 強めの色で目立たせる、文字や形も工夫する |
🌟 まとめ
- 色は“感覚”じゃなくて“意味とルール”で選ぶ
- 見やすく伝わるための「基本原則」を守るのが第一歩
- 練習・観察・模写で色の感覚はどんどん磨かれる！
なるほど！なんとなくじゃなくて、ちゃんとルールがあるんだね！
うん！今日から色選びもプロっぽくなれるよ♪