色とは？
色とは、光や視覚によって感じ取られる情報のことです。
物体そのものに色がついているように感じますが、実際には光が物体に当たり、その光が目に届くことで色を感じています。
つまり色は、光・目・周囲の環境によって見え方が変わります。
色が見える仕組み
- 光が物体に当たる
- 物体が光の一部を吸収し、一部を反射する
- 反射した光が目に届く
- 脳がその情報を処理して色として感じる
赤いものが赤く見えるのは、赤く感じる光を多く反射しているためです。
環境による見え方の違い
同じ色でも、環境によって見え方は変わります。
スマホでは鮮やかに見えた色が、印刷するとくすんで見えることがあります。これは、照明、画面の設定、紙の質、周囲の色などが影響するためです。
色を使うときは、画面上の見え方だけで判断せず、実際に使われる環境も意識しましょう。
色の分類と三属性
色の基本的な分類と三属性を知っておくと、「なぜこの色は明るく見えるのか」「なぜこの色は落ち着いて見えるのか」を言葉で考えられるようになります。
有彩色と無彩色
色は大きく、有彩色と無彩色に分けられます。
有彩色とは、赤・青・黄・緑のように色味を持つ色のことです。代表的な有彩色には、赤、黄赤、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の10基本色があります。
無彩色とは、白・黒・グレーのように色味を持たない色のことです。
デザインでは、無彩色を全体を整える土台とし、有彩色で印象を作ったり重要な部分を目立たせたりする組み合わせがよく使われます。
暖色・寒色・中間色
色は、印象によって暖色・寒色・中間色に分けることもあります。
暖色は赤やオレンジのようにあたたかさを感じさせやすい色、寒色は青のように涼しさを感じさせやすい色、中間色は緑や紫のようにその中間に位置する色です。
色相・明度・彩度
色の三属性とは、色相・明度・彩度の3つです。
色相は赤や青などの色味、明度は色の明るさ、彩度は色の鮮やかさを表します。
同じ赤でも、明るさや鮮やかさによって印象は変わります。色を選ぶときは、「何色か」だけでなく「どれくらい明るいか」「どれくらい鮮やかか」も見ることが大切です。
色を整理する考え方
色は数が多く、感覚だけで選ぶと迷いやすいです。
そこで役立つのが、色相環、トーン図、色立体といった考え方です。これらを知っておくと、色同士の関係や印象を整理しやすくなります。
色相環とは？
色相環とは、赤や青などの色相を円状に並べた図で、近い色や反対側の色の関係を把握しやすくなります。
色相環には、PCCS色相環やマンセル色相環など複数の種類がありますが、初心者のうちは「色同士の関係を整理するための図」と理解しておけば十分です。
配色を考えるとき、色相環はかなり参考になります。
トーン図とは？
トーンは明度と彩度を組み合わせた色の調子で、トーン図はそれを一覧にした図です。
明度が高いと明るく軽い印象に、彩度が高いと鮮やかで目立つ印象になりやすく、逆に彩度を抑えると落ち着いた印象になります。
配色を考えるとき、トーン図も参考になります。
色立体とは？
色立体は、色相・明度・彩度の3つを立体的に整理したカラーモデルです。
複雑な色の関係性を視覚的にわかりやすく整理し、共通のルールで色を扱えるようにする役割があります。
色の混合とカラーモデル
色は、光やインキを組み合わせて表現されます。
画面で見る色と印刷物の色が違って見えるのは、色の作り方が異なるためです。
加法混色と減法混色とは？
加法混色とは、光を混ぜる考え方です。
赤・緑・青の光を混ぜると明るくなり、すべてを重ねると白に近づきます。スマホやPCモニターなどの画面は、この考え方で色を表現しています。
一方、減法混色とは、インキや絵の具などの色材を混ぜる考え方です。
色を重ねるほど光を吸収して暗くなり、印刷物では主にこの考え方で色を表現します。
RGB・CMYKとは？
RGBは、Red・Green・Blueの略です。
赤・緑・青の光を組み合わせて色を表す方法で、Webサイトやアプリなど画面上のデザインに使われます。
CMYKは、Cyan・Magenta・Yellow・Blackの略です。
シアン・マゼンタ・イエロー・ブラックのインキを組み合わせて色を表す方法で、チラシやポスターなど印刷物で使われます。
デジタル画面ではRGB、印刷物ではCMYKと覚えておくとよいでしょう。
色が与える効果とデザインでの役割
色には、人の印象や見え方に影響を与える効果があります。
またデザインの中では、強調、ブランド表現、行動誘導などの役割も持っています。
色の心理効果
色の心理効果とは、色が人の印象や感情に与える影響のことです。
明るい色は軽やかで楽しい印象を与えやすく、暗い色は落ち着きや重厚感を感じさせやすい傾向があります。
代表的な色には、以下のような印象が連想されやすいです。
| 色 | 連想されやすい印象 |
|---|---|
| 赤 | 情熱、エネルギー、注意、力強さ |
| 青 | 信頼感、冷静さ、清潔感、知的な印象 |
| 緑 | 自然、安心感、やさしさ、健康的 |
| 黄 | 明るさ、楽しさ、親しみやすさ、注意 |
| 黒 | 高級感、重厚感、強さ、引き締まった印象 |
| 白 | 清潔感、シンプルさ、軽さ |
ただし、「青を使えば必ず信頼感が出る」「黒を使えば必ず高級感が出る」というわけではありません。
色の印象は、文化、文脈、ターゲット、組み合わせ、使う面積によって変わります。
色の視覚効果
色の視覚効果とは、色によって見え方が変わる効果のことです。
たとえば、暖色は近くに感じやすく、寒色は遠くに感じやすい傾向があります。明るい色は軽く見えやすく、暗い色は重く見えやすい傾向があります。
デザインでは、このような見え方の違いを使って、視線誘導や情報整理を行うことがあります。
色の視覚効果を知っておくと、どこを目立たせるか、どこを落ち着かせるかを考えやすくなります。
コントラストと読みやすさ
コントラストとは、色同士の差のことです。文字色と背景色のコントラストが弱いと、文字が読みにくくなります。
たとえば、白い背景に薄いグレーの文字を置くと、見た目はやわらかくても読みづらい場合があります。
デザインでは、おしゃれに見えることだけでなく、読めることが大切です。特にWebサイト、資料、バナーなどでは、文字と背景の差をしっかり確認しましょう。
デザインにおける色の役割
デザインにおける色の役割は、大きく3つあります。
1つ目は、情報を整理することです。カテゴリや状態ごとに色を分けると、情報の違いが分かりやすくなります。
2つ目は、印象や世界観を作ることです。色の選び方によって、落ち着いた、ポップなどの印象が変わります。
3つ目は、行動を促すことです。ボタンやリンクに目立つ色を使うことで、次に取ってほしい行動を示しやすくなります。
色は見た目を飾るだけでなく、情報と行動を支える要素です。
色をデザインで使うときのポイント
色の基本を理解したら、次は実際の制作や共有でどう活かすかを考えていきます。ここでは、配色、色名、アクセシビリティの3つを紹介します。
配色とは？
配色とは、複数の色を目的に合わせて組み合わせることです。
色相が近い色はまとまりやすく、反対色はコントラストを作りやすくなります。トーンをそろえると、全体に統一感を出しやすくなります。
色を使うときは、広い面積に使うベースカラー、印象の中心になるメインカラー、目立たせたい部分に使うアクセントカラーに分けて考えるのもおすすめです。
色名とは？
色名とは、色を言葉で表すための名前です。「明るい青」「淡いピンク」のように伝えることで、色の方向性を共有しやすくなります。
色名には、赤・青・黄のような基本色名、「明るい赤」のような系統色名、桜色や藍色のような慣用色名などがあります。
ただし色名だけでは正確な色指定にはならないため、実際の制作ではカラーコードや色見本で確認しましょう。
色覚多様性とアクセシビリティ
色を使うときは、誰にとっても情報が伝わりやすいかを考えることも大切です。
色の見え方には個人差があるため、色の違いだけで重要な情報を伝えると分かりにくくなる場合があります。
たとえば、「赤はエラー、緑は成功」のように色だけで状態を分けるのではなく、テキストやアイコン、形なども組み合わせると伝わりやすくなります。また、文字と背景の色が近すぎると読みにくくなるため、十分なコントラストをつけることも大切です。
デザイン初心者向け｜色の学習ロードマップ
色について学ぶ内容はとても広く、最初からすべてを覚える必要はありません。
ここでは、デザイン初心者が色を学ぶ順番を整理します。
STEP1：色の定義と見え方を理解する
色は、光と視覚によって感じ取られる情報です。
まずはこの前提を押さえておきましょう。光・物体・目・環境によって見え方が変わることを知っておくと、「なぜ画面と印刷で色が違って見えるのか」「なぜ背景によって色の印象が変わるのか」といった疑問を理解する土台になります。
STEP2：色の分類と三属性を理解する
有彩色・無彩色、暖色・寒色・中間色、色相・明度・彩度を理解しましょう。
「何色か」だけでなく、「どれくらい明るいか」「どれくらい鮮やかか」まで見られるようになると、色の印象を言葉で整理できるようになります。
STEP3：色相環・トーン・色立体で整理する
色相環を使うと、色同士の関係が見えやすくなります。トーンを理解すると、色の印象を調整しやすくなります。
「なぜこの配色はまとまって見えるのか」「なぜこの色は目立つのか」を考えるときの参考になります。
STEP4：RGB・CMYKなど、色の表し方を知る
画面ではRGB、印刷ではCMYKを使うことが多いです。
この違いを知っておくと、画面で見た色と印刷した色が異なる理由が分かり、制作環境に合わせた色の扱い方を意識できるようになります。
STEP5：色の効果とアクセシビリティを学ぶ
色には、心理効果や視覚効果があります。
「この色はなぜ目立つのか」「なぜこの配色は読みにくいのか」を考えるときに役立ちます。
あわせて、色だけに頼らない情報設計やコントラストへの配慮も意識しましょう。
STEP6：配色の基本を学ぶ
色の基本が整ってきたら、配色を学びましょう。
まずは、ベースカラー・メインカラー・アクセントカラーのように、色の役割を分けて考えると、実際のデザインで色を選びやすくなります。
色を増やすよりも、役割を決めることが先です。
まとめ｜色は、見え方・効果・使い方を合わせて理解する
色は、デザインの印象や伝わりやすさを支える基本要素です。
色を使うときは、感覚だけで選ぶのではなく、色相・明度・彩度、配色、心理効果、読みやすさなどを合わせて考えることが大切です。
最初からすべてを覚える必要はありません。まずは色の基本を理解し、色相環やトーン、配色の考え方へ少しずつ学びを広げていきましょう。
色を理解できるようになると、「なぜこの色を使うのか」を説明しやすくなり、目的に合った色を選びやすくなります。
