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