はじめてのデザイン[3]色と配色の基本

1.カラーホイール

①カラーホイールとは

カラーホイール（The Color Wheel）は、「赤」「黄」「青」を基準とした
12色をサークル上に配置したもの。
相性のいい色の組み合わせや、反対に相性の悪い組み合わせなど、
色の組み合わせにどんな効果があるのか判断する手助けをする。

②カラーホイールの12色

三原色：「赤」「黄」「青」
等和色：「緑」「紫」「オレンジ」
第三色：「赤オレンジ」「黄オレンジ」「黄緑」「青緑」「青紫」「赤紫」

③カラーホイールの使用方法

カラーホイールは色の組み合わせを考えるときに役に立つ。

類似色
カラーホイールで隣り合った色は類似色と呼ばれ、類似色を組み合わせると
まとまりがある印象になる。

補色
カラーホイールで反対側に位置する色は補色と呼ばれ、色の差が大きく、
お互いの色を引き立てる組み合わせになる。

④まとめ

・カラーホイールをベースに色の組み合わせ（配色）を考えると、
　より効果的な色を選ぶことができるようになる。
・色についての知識を学び、今後の制作に活用する。

2.色の三属性

①色の三属性とは

・赤や青といった色味（色相）
・明るさ/暗さ（明度）
・あざやかさ/鈍さ/くすみ（彩度）
以上３つの属性を組み合わせて構成されている。

色相
赤/黄/緑/青/紫といった色味のことを表す。

明度
色の明るさの度合いを表す。
高くなると色は白っぽく（明るく）、低くなると黒っぽく（暗く）なる。

彩度
色の鮮やかさの度合いを表す。
高いほど色の純度が高く鮮やかな色、低いと色味が減りくすんだ色になる。

②トーン（色調）とは

色の三属性の組み合わせで、明度と彩度が似ている色を集めグループ化
したもの。
明度が高め、彩度が低めの色だと「ペールトーン」や「パステルトーン」と
呼ばれるグループになる。

明るいトーンは優しいイメージ、暗いトーンは重厚なイメージになる。
トーンを基準に配色を考えると表現したいイメージを伝えやすくなり、
まとまりのある色使いができるようになる。

③まとめ

「薄い色」「明るい色」「暗い色」「鮮やかな色」「濁った色」など、
その色が持つ印象で色を表現することがあるが、色の三属性をもとに
説明すると以下のようになる。
・薄い色：明度が高く、彩度が低い色
・明るい色：明度が高い色
・暗い色：明度が低い色
・鮮やかな色：彩度が高い色
・濁った色：明度が低く、彩度も低い色

色の三属性についてしっかり理解出来れば、様々な場面で応用できる。

3.色の分類

①無彩色と有彩色

色は、彩度の有無で大きく2種類に分けることが出来る。

無彩色（色味のない色）
白と黒とその中間色のグレーなど、色味のない色のことを表す。
色の三属性の「色相」「彩度」がない色のこと。

有彩色（色味のある色）
有彩色は、少しでも色味のある色のことを表す。

②純色/清色/濁色

有彩色は３つに分類できる。
・純色（じゅんしょく）
・清色（せいしょく）
・濁色（だくしょく）

純色
赤/黄/青などの各色相で最も彩度が高い色を表す。

清色
純色に「白or黒」だけを加えた色を表す。
白を混ぜ合わせた明るい色を「明清色（めいせいしょく）」
黒を混ぜ合わせた暗い色を「暗清色（あんせいしょく）」

濁色
純色に「灰色」を加えた色を表す。
灰色を混ぜるとだいたい濁ったような色になるため、
「濁色（中間色）」と呼ばれる。

色の分類によるイメージ
・純色：ビタミンカラーで健康的
・明清色：パステルカラーで明るく軽いイメージ
・暗清色：ダークカラーで格式のある落ち着いたイメージ
・濁色：トーナルカラーで穏やかさや控えめなイメージ

③暖色/寒色/中性色

色彩心理学による色の感じ方で以下に分類される。
・暖かさを感じる暖色（だんしょく）
・冷たさを感じる寒色（かんしょく）
・どちらにも属さない中性色（ちゅうせいしょく）

暖色
赤/オレンジなどの暖かさを感じる色
食欲や購買意欲を高める効果があると言われている

寒色
水色/青/青紫などの冷たさを感じる色
血圧や心拍数を下げ興奮を鎮めたり、食欲を抑制させる効果があるとされる

中性色
暖色/寒色のどちらにも属さない黄緑/緑/紫などの色

④まとめ

・色は大きく分けると無彩色と有彩色の２つに分けることが出来る。
・さらに有彩色は「純色/清色/濁色」に分類できる。
・色彩心理学による色の感じ方で暖色と寒色がある。

4.色の持つイメージ

①白色（ホワイト）の性質/イメージ

白色の性質
膨張色、進出色、軽量色のイメージ効果を持っている。
潔白なイメージから、清潔感や純粋なイメージを与える色。
病院や飲食店など清潔感をイメージさせたい場所では、
白い壁や白い制服が使用されることも多い。
デザインでは他の色を邪魔しないため、使用頻度も高めの色。

白色から連想するイメージ
清潔/無垢/潔さ/美しさ/純粋/神聖/
結婚式/病院/羽根/雪/雲/綿/牛乳/紙/ウサギ

②黒色（ブラック）の性質/イメージ

黒色の性質
収縮色、後退色、重量色といった色のイメージ効果を持っている。
有彩色をもっとも引き立たせる色。
クレジットカードのランクとしてゴールドカードの上にブラックカードが
あるように、ゴールドよりも高いステータスで扱われることも多い。
ものを重く見せる効果もあります。

黒色から連想するイメージ
高級/クール/暗闇/死/恐怖/悪/威厳/
スーツ/葬式/髪の毛/カラス/墨/夜/タイヤ/ピアノ

③灰色（グレー）の性質/イメージ

灰色の性質
柔軟色、沈静色といった効果がある。
白に近ければ白のイメージ効果、黒に近ければ黒のイメージ効果が加わる。
自己主張せず、周囲の色を引き立てる調和の色。
ビジネスマンが着用するスーツの色はグレーが一般的。
目立たず地味な印象を感じさせる一方で、落ち着いた雰囲気、洗練された
印象をもたらす色。
デザインの中ではメインカラーを引き立てたり、補色になる色同士の間に
挟むことによって調和させることが出来る。クッションの役割として、
使い勝手がいい色。

灰色から連想するイメージ
陰気/穏やか/寂しさ/地味/調和/不安/無機質/落ち着き/クール/上品/不透明
雲/コンクリート/ねずみ/ビル/煙/灰/石/

④赤色（レッド）の性質/イメージ

赤色の性質
膨張色、進出色、温暖色、興奮色のイメージ効果を持っている。
国や地域、時代に関係なくエネルギーを感じさせる色。
販売色/購買色とも言われ、広告や商品パッケージにも多用される。
視界に飛び込んでくる色の中でも赤色は特別目を引く。
注目させたい箇所にポイント使いすると印象に残すことが出来る。

赤色から連想するイメージ
愛/危険/興奮/生命/活動/情熱/衝動/破壊
炎/血/太陽/火/リンゴ/トマト/女性/イチゴ/スポーツカー

⑤青色（ブルー）の性質/イメージ

青色の性質
収縮色、後退色、寒冷色、鎮静色のイメージ効果を持っている。
涼しさや爽やかさ、知性や冷静を感じさせる色。
海や空をイメージさせる色であることから、航空会社の
イメージカラーにもよく使われる。
大きく広がる空、生命の源である海、体に不可欠な水を
イメージさせるため好感度が高く、世界的に見ても人気が高い色の系統。

青色から連想するイメージ
爽やか/安全/冷静/誠実/清潔/若い/開放感/夏
空/海/川/水/魚/ジーンズ/氷/プール/宇宙/地球

⑥緑色（グリーン）の性質/イメージ

緑色の性質
沈静色のイメージ効果があるが、中性色なので組み合わせる色によって
イメージ効果が変わる。
自然の中でよく見られる色で、興奮を沈めたり、集中力を増す効果がある。
安心感を与える色のため、紙幣に緑色が使われている国も多い。
くつろぎ、癒し、調和、安らぎをイメージさせるようなサービスやモノを
デザインする場合は緑色をどこかに入れておくと良い。

緑色から連想するイメージ
穏やかさ/エコロジー/調和/自然/平和/バランス/安全/健康
植物/山/木/アウトドア/野菜/亀/クリスマス/ゴルフ/ピーマン/公園

⑦黄色（イエロー）の性質/イメージ

黄色の性質
膨張色、進出色、温暖色、興奮色、軽量色のイメージ効果を持っている。
暖色系の中でも特に明るく感じられる色。
集中力を高めたり、気分を明るくする効果がある。
注意を促す警戒色の効果もあるため、交通標識、工事現場や踏切などでも
よく目にする色になる。

黄色から連想するイメージ
明るい/楽しい/好奇心/向上心/幸福/軽快/危険/注意/幼さ/陽気
イチョウ/雷/レモン/ヒマワリ/パイナップル/ひよこ/ビタミン/太陽

⑧橙色（オレンジ）の性質/イメージ

橙色の性質
膨張色、進出色、温暖色、興奮色のイメージ効果を持っている。
赤色と黄色のイメージの良い所だけを取ってきた色で、解放感を与えて
楽しい気分にさせる、ネガティブな印象があまりない色。
食欲を促進させる色として、飲食店や商品のパッケージには
橙などの暖色系がよく使われる。

橙色から連想するイメージ
賑やか/家庭/楽しい/自由/暖かい/好奇心/親しみ
夕焼け/みかん/柿/秋/オレンジ/ハロウィン/人参

⑨桃色（ピンク）の性質/イメージ

桃色の性質
進出色、温暖色、柔軟色、軽量色のイメージ効果を持っている。
柔らかく優しい印象をもち、女性的なイメージが強くあるため、
女性を対象としたものに多く使われている色。
感謝や愛を伝える意味を持っているため、包装紙やリボンによく使われる。

桃色から連想するイメージ
エレガント/艶やか/幸福/女性的/ハート/美容/愛情/可愛らしさ
桜/コスモス/ハム/フラミンゴ/リボン/ロゼワイン/桃/豚

⑩紫色（パープル）の性質/イメージ

紫色の性質
沈静色、重量色のイメージ効果を持っているが、中性色なので組み合わせる
色によってイメージ効果が変わる。
興奮色の赤と沈静色の青、相反する色が混ざり合っているため、
「高貴と下品」「神秘と不安」など二面性を持っている複雑な色。
地位の高さを象徴する色で、昔から高貴な色とされてきた。この色を
作るための染料が高価であった頃は富と王家の象徴で、飛鳥時代に
聖徳太子だ定めた冠位十二階では最高位の色だった。
全般的に高級感や上品さを表すものが多いため、ほかの色とのバランスに
気を付ければ、視覚で印象に残りやすく出来る。

紫色から連想するイメージ
エキゾチック/魔法/高貴/優雅/魅力的/非現実的/霊的/神秘/不安定/二面性
カシス/ナス/ブドウ/スミレ/あやめ/紫キャベツ/京都/占い師

⑪茶色（ブラウン）の性質/イメージ

茶色の性質
温暖色、重量色のイメージ効果を持っている。
木や土、大地といった自然を感じさせ、アースカラーとも呼ばれる色。
大地のどっしりとした印象や、木々の豊かさなどから安定を求める
気持ちになる色。コツコツと地味な繰り返し作業を行う場合は、
この色のものが近くにあると作業が捗る。

茶色から連想するイメージ
温和/安定/伝統/堅実/安心感/穏やか/自然/秋/渋い/大地
コーヒー/お茶/カバン/チョコレート/枯れ葉/樹木/泥/馬/家具/段ボール/パン

⑫まとめ

色が持つそれぞれのイメージは、様々な場面で活用される。
見る側の経験や文化など様々な要因で左右されるが、一般的なイメージを
知ることは配色を考える上でも役に立つ。
なんとなくで色を選んでしまわないよう、色が持つそれぞれの
意味やイメージを確認しておく。

5.色の見え方

①色の大きさ「膨張色と収縮色」

膨張色
同じ面積でも他の色より広く大きく感じる色を膨張色という。
白やパステルカラーのような明るい色・暖色系の色は、膨張して本来の
大きさよりも大きく見える特徴を持っているため、狭いスペースでも
大きく見せたいときに活用出来る。

収縮色
同じ面積でも他の色より狭く小さく感じる色を収縮色という。
黒や明度の低い暗い色・寒色系の色は、収縮して本来の大きさよりも
小さく見える特徴を持っているので、少しでも小さく見せたいときに
活用できる。

膨張色と収縮色の例
囲碁の碁石は「白石直径21.9mm」「黒石直径22.2mm」で作られている。
これは、白石と黒石を同じ大きさにすると白石の方が大きく見えてしまい、
盤上で白が有利に見えてしまうため。

②色の距離「進出色と後退色」

色には距離が近く手前に見える色と、反対に遠く奥まって見える色がある。

進出色
前に出て見える色を進出色という。
赤や黄色、橙などの暖色かつ明度の高い色は前に出て見える。

後退色
奥に引っ込んで見える色を後退色という。
青や紫などの寒色かつ明度の低い色は、実際より後ろにあるように見える。

進出色と後退色の例
交通事故率の高い自動車の色は、青色という統計がある。
青は後退色で実際の距離よりも遠く感じてしまうため、
他の色の車よりも事故が多くなる可能性が高くなる。

③まとめ
・色によって膨張/収縮、進出/後退して見えるものがある。
・進出色と後退色を組み合わせると空間に奥行きを出すことが可能。
・デザインで配色に困ったときは、この知識を使って色を選ぶことも大切。

6.配色のルール

①配色の考え方

色を選ぶ時はカラーホイール（色相環）を使い色の組み合わせを考える。

色数が増えるほどバランスを取るのが難しくなるため、色数は３色程度に
制限したほうがいい。
相性の良い色を組み合わせても、色の配分がおかしかったり、無計画に
たくさんの色を使用すると、デザイン自体がまとまりのない印象を
与えることになる。

配色のコツは、色数を絞り使う色の割合をきちんと決めること。

②色の配色比率「70：25：5」の法則

一般的に、基本カラー3色を「70：25：５」の比率にして配色すると、
バランスの取れた美しい配色になるとされている。

・ベースカラー（70％）最も大きな面積を占める色
・メインカラー（25％）イメージカラーなどデザインの中心になる色
・アクセントカラー（5％）画面にアクセントを持たせるための色

③ベースカラー/メインカラー/アクセントカラーの役割

ベースカラーの役割
デザインの中で最も大きな面積を占める色になる。
「背景」や「余白」に用いることが多く、メインカラーや
アクセントカラーを邪魔しないような色を選ぶ。
ベースカラーはデザイン全体の印象にもなる。
無彩色、またはメインカラーやアクセントカラーの明度をあげた色を
ベースカラーにするとデザインしやすくなる。

メインカラーの役割
主役となりデザインの中心になる色。
ロゴなどに使用されることが多いため、「明度の低い色」が扱いやすい。
ベースカラーと似た色を使えばまとまった印象、補色となる色を使うと
デザインに動きを作ることが出来る。

アクセントカラーの役割
ワンポイントで画面にアクセンを持たせるときに使用する色。
メインカラーとベースカラーだけでは単調になりがちなため、
メリハリをつけるときに使用する。
ベースカラーやメインカラーと比べ、使用する色の面積が少ないため、
色合いが強かったとしても問題ない。
色の面積は小さいが最も目を引く色になるので、注目させたい
コンテンツ（Webデザイン」ならボタンなど）に利用する。

④まとめ

配色にもある程度のルールがあり、それに基づいて色を決めていけば
バランスの取れた配色が可能になる。
配色は色の組み合わせ以外にも、それぞれの色の割合も重要。
メイン→ベース→アクセントの順で色を決めていくといい。

7.色の対比

①対比の種類

【5.色の見え方】では、「膨張色と収縮色」・「進出色と後退色」といった
単体の色が持つ資格効果について紹介した。
今回は色と色の組み合わせ（隣り合う色）によって見え方の変わる視覚効果
について紹介する。

色の対比には大きく４種類ある。
・明度対比：周りの色の明度差によって明るさが違って見える現象
・彩度対比：彩度差によって鮮やかさが違って見える現象
・色相対比：色の組み合わせによって色相がずれて見える現象
・補色対比：補色同士が隣り合ってお互いの色を鮮やかに見せる現象

②明度対比

周りにある色の明度によって同じ色が違って見える現象

高明度に囲まれると実際の色よりも暗く、低明度に囲まれると
実際の色よりも明るく感じる。
明度差のある２色の配色は、明るい色をより明るく、暗い色を
より暗く見せる視覚効果がある。

明度の高い色を目立たせたいときは、明度の低い色と組み合わせることで
色を引き立てることが出来る。

縁辺対比（えんぺんたいひ）
隣接した２色の境界付近が強調されて見える現象のこと。
縁辺対比により色の境界付近は、実際よりも差異が強調される。
明るい色と暗い色が接する部分は、明るい色はより明るく、
暗い色はより暗く見える。
境界付近が強調されて見えるため、波打ったように見える。
無彩色などを間に挟めば、縁辺対比を回避できる。
明度だけに限らず、色相/彩度の対比によっても起こる。

③彩度対比

周りにある色の彩度によって同じ色が違って見える現象。
周りの色が高彩度だと対象の色がくすんで見え、低彩度だと
対象の色が鮮やかに見える。

配色をして色がくすんで見える場合は、彩度の組み合わせをチェックする。

④色相対比

周りの色の影響を受けて色相がずれて見える現象。
色相の異なる色を同時に見ると、周りの色の補色に近づいて見える。

背景となる周りの色の面積が大きかったり、周りの色が鮮やかな色に
なるほど強い色相対比効果を生む。

⑤補色対比

色相環で反対側に位置する色（補色）同士を組み合わせると、
互いの色が鮮やかに見える現象。

ハレーション
彩度の高い補色を組み合わせた場合、色と色との境界がちらついて
見える現象。
回避するには、色と色の間に無彩色などを入れるorどちらかの色の
彩度を下げる方法がある。
補色の組み合わせは色の差が大きいため強く引き立てあうことが出来るが、
彩度が高い色同士の場合ハレーションを起こしてしまうため注意する。

⑥まとめ

色は組み合わせる色によっても見え方が変化する。
実際の色よりも明るく見えたり、色味が違って見えたりと効果は様々。
無彩色や同系色を使った配色は簡単に実践できるが、インパクトが
欠けてしまうという欠点もある。
色の効果をより引き出すためにも、色と色の組み合わせ（隣り合う色）に
よって見え方の変わる視覚効果についてしっかりと確認をしておく。