デザインをする、部屋を、ファッションをコーディネートする…
何かを作るうえで配色が大事なのは百も承知だと思いますが、人類が快適さを覚えていることで生まれた「配色のルール」をしっておくことで適切で円滑な目標達成につなげることができます。
ここでは配色において基礎的なルールを綴っていきます。
新年度ということで、新しく勤めだした新卒の方や新米webデザイナーさんもさらっと見てみてくださいね。偉そうなことを綴っていますが、我慢して下さい。
配色の目的
まず、「配色をすること」の目的です。
色を選ぶことで効果をあげたり、美的な面だけでなくメッセージの伝達や行動の示唆など言葉を使わずにユーザーに訴えかけるのに「配色」はかかせません。
秩序のない配色や、理由のない選び方をするよりも、すこし意識するだけで「配色」は変わります！と思います！頑張ります！
色の表現方法
混色系（RGB,CMYK）
色や光の三原色。 光の混合理論に基づいて、その混合割合によって色を区別する方法。
混色系は、機械が扱いやすい数値であるために、PhotoshopやIllustratorで行う配色もこれである場合が多い。つまり人間的でない色であるとも言える。
加法混色
RGB。テレビが色を出す仕組みで、人間の、色を認識する細胞の中にもRGBに反応するセンサーのようなものがあるらしい。
減法混色
CMYK。カラー印刷や絵の具で用いられている原理。
C（シアン）・M（マゼンタ）・Y（イエロー）を100%ずつまぜると黒（K）になるということだが、理論値であり完全な黒ではない。
顕色系
人間の知覚に近く、色を直感的に理解しやすい。
色相・彩度・明度を体系的に配列したもの。
代表的なものに、「マンセル色票」「日本色研体系的配色（PCCS）」「JIS標準色票」がある。
マンセル色票
赤、黄赤、黃、黄緑、緑、青緑、青、青紫、紫、赤紫と10色相（Hue）を円環状に配した「色相環」を用いる。
さらに各色を4分割し、2.5R、5R、7.5R、10Rと分けられる。
そのうち「5R」が、その色相の代表色であることを表します。
彩度（Chroma）と明度（Value）は10段階に分けて評価する。
明度に関しては「10」が白、「0」を黒としているが、実際に色相化されているのは1～9.5。
彩度に関しては「0」が無彩色で、上がっていくにつれ彩度が高くなる。
最高点は色相により異なる。
日本色研体系的配色（PCCS）
赤・黃・緑・青(赤…2:R、黄…8:Y、緑…12:G、青…18:B)を中心に24色相の最高彩度を等間隔に配列した色相環に、トーンという考え方を加えた表現方法。
- 色相環で隣接する色相
- 補色同士の色相
を「調和」の定義として挙げている。
財団法人日本色彩研究所が1964人に発表したカラーシステムで、色の三原則をベースとしている。
JIS標準色票
http://www.geocities.jp/net_t3/color/index.html
日本工業規格（JIS）が定める、色の規格。
「物体色の色名」として、慣用色名と系統色名を「黄みの赤」などと示して規格化したもの。
物体の表面色であり、光源色ではないため、コンピューターのディスプレイで再現しようとすると難しいらしい。
また、明度や彩度も同様に修飾語を組み合わせて表現している。
http://www.geocities.jp/net_t3/color/index.html
配色の比率
では、そうして体系的に選ばれた色を抽出してどのように使えばいいのでしょうか？
デザイン系の書籍でも紹介されていますが、主に3つの役割を抽出して考えます。
ベースカラー （70％）
明度が高く彩度が低い色。
メインカラーを基準にすると考えやすいと言われている
アクセントカラー （5％）
少ない面積に置かれる強い色。
メインカラー （25％）
伝えたいテーマ、意図する行動目標に基づいて考えた色
色の属性
基礎的な色相の大きな分類です。よく聞くしよく書いてあるし、そういう記事には解説も無いので（たぶん）頭に入れておきたいですね。
色の三原色
どんな色を混ぜ合わせても決して作ることの出来ない、「基本の色」
「色光の三原色（RGB）」「色料の三原色（CMYK）」にわかれる。
色の三属性
色相（Hue）、彩度（Saturate）、明度（Brightness）の3つの属性で決める。
有彩色・無彩色
無彩色：白、黒、灰色。色相や彩度を持たない、明度のみを持った色。
有彩色：無彩色以外のすべての色。
色相
赤、あお、黄色などの「色み」。
これらを光のスペクトル順に表したものを「色相環」という。色相環は、12色/24色で構成されており、色の位置関係は配色の際の大きな手がかりとなる。
明度
色の明るさの度合い。
最も「明度が高い」のが白、「明度が低い」のが黒。
彩度
色の鮮やかさの度合い。
「彩度が高い」ほど鮮やかで強い印象の色、「彩度が低い」ほど、濁って地味な印象の色となる。
色相環での色の扱い
暖色・寒色・中性色
暖色（進出色）
赤・橙、黄など
寒色（後退色）
青、水色、青紫など
中性色
緑、紫
類似色
色相環上で、あまり遠くない位置関係にある色どうしのこと。
類似色で統一された配色は、自然に調和する傾向にある。
補色・反対色
補色：色相環上で正反対にある色を補色
反対色：補色と隣り合わせる、もしくはそれにに近い色。
カラースキームを利用する
モノクロマティックカラースキーム
単一の色相を選び、明度、彩度を変えて作成されたカラーテーマ。
アナログカラースキーム
色相環上の連続した関係の色相を選び作成されたカラーテーマ。
コンプリメンタリーカラースキーム
補色関係にある色相を選び、明度、彩度差を与えて作成されたカラーテーマ。
スプリットコンプリメンタリーカラースキーム
反対色など、捕食関係に近い色相を選び、明度、彩度差を与えて作成されたカラーテーマ。
テトラディックカラースキーム
捕食関係の組み合わせ。
異なる色相を豊富に含むためににぎやかで子供に好まれやすいカラーリング。
配色のルール・パターン
ドミナント・カラー配色（同一色相、類似色相で統一した配色）
ある色相で統一された、多色配色。
ドミナントとは「支配する」の意味で、その色相が全体のイメージを支配することに由来する。
多くの色があるほど、統一された印象が増す。
落ち着いた雰囲気を生む一方で、メリハリがなくなりがち。
ドミナント・トーン配色（同一トーンの配色）
あるトーン（明度・彩度を合わせた考え方）で統一された多色配色。
色相は多くてもトーンが一定なため統一感がある。
ペールカラー（淡い色）が多いため、ぴゅあで優しいイメージに。
トーン・オン・トーン配色
色相が同一もしくは類似していて揃っているがトーンに大きく差をつけた配色。
主に明度差をつけるのが主流で、ドミナント・カラー配色の一種でもある。
統一感とメリハリのバランスが良い配色。
トーン・イン・トーン配色
トーン（彩度、明度）が揃っていて、色相に差がある組み合わせ。
主にトーンが揃っているものはこれにあたり、ドミナント・トーンの一種ともいえる。
トーナル配色
ダルトーン（グレーを含んだ色）を中心とした間色同士の配色。
派手さはなく、淡くピュアな印象でもない、和の落ち着いた配色に用いられる。
ドミナント・トーン・/トーン・イン・トーン配色の一種。
カマイユ配色
フランス語で「単色画法」のことを言う。
色相・彩度・明度の差がほぼなく、遠目に見ると単色に見える。
ファッション業界ではよくこのルールが使われるらしい。
女性らしい、エレガントでやわらかな印象。
ダイアード配色
「ダイアード」とは「2つの」という意味。
補色同士の組み合わせ。
高彩度のダイアード配色はコントラストが強すぎて不快な印象になりがちなので注意が必要。
スプリット・コンプリメンタリー配色
色相環上で「補色」「反対色」を採用した組み合わせ。
ダイアード配色に反対色の選択を加えたもので、色相の大きな変化と類似性の両方をもたせている。
トライアド配色
色相環上で三角形を描くような色相を採用した組み合わせ。
バランスがとれて安定しつつ、アクティブな配色になる。
色の選び方、決め方
色の選び方、決め方1：基本的には
基本的には、この
- 色相環上で向かい合う2色か
- 色相環上で等間隔に三角形を形成する3色
- 長方形を形成する4色（≒色相環上で向かい合う2色×2組）
を選ぶことで調和がとれた色になると考えてよいでしょう。
その際に1色を選んでメインの色として使うか、暗めの色を使うのがおすすめ。
純色を均等に使うのは、ほぼ失敗と考えてよいです。（もちろん、例外有り）
色の選び方、決め方2：色を使い過ぎないことを前提に
「配色」は、目的達成のひとつの手段ですが、たくさんの色に頼りすぎることで、成果地点までに注意散漫しすぎてしまいます。
「近接・対比・反復・整列」の、デザインの基礎を応用しましょう！
色の選び方、決め方3：彩度の高い色を使い過ぎないことを前提に
「あれを目立たせたから、もっと違う色で目立たせよう」と負のスパイラルに陥った末路。
こちらも、「近接・対比・反復・整列」の、デザインの基礎を応用することで充分避けられます。
色の選び方、決め方4：上品な無彩色を使ってみる
ホワイトのベタでもいいのですが、#fefefeのライトグレーを使ったり、少しの工夫をこらすことで、エレメントに階層をつけ、優先度を操ることができます。
面積を大きく占めることになるであろう無彩色は、軽く済ませてしまわないこと！
目的を明確に描き、決める
配色で達成したい目標から、色を連想します。
たとえば、ファッションサイトで購入ボタンまで誘導したい時に背景をベタ塗りのイエローにするのはNGです。（場合によりますが）
商品をよく見てもらい、商品の素材や生地の色味がわかるように背景は無彩色、極力「白」にするべきと言えます。
極端な例ですが、迷った時はすでにある色に惑わされがちなので気をつけたいですね。
「色の持つ効果」を知る
ある程度決め込む前に目的達成の手段として有力か。
「色の持つ効果」を知っておきましょう。
コチラにまとめてあります！
デザイナー長期保存版！Webデザイン、グラフィック、DTP…製作に役立つ「色彩心理学」
配色の練習方
自分の好きな色について考えてみる
その色について、どう思うか。その色のTシャツ、スニーカー、テーブルでも…
それを見たとき、どんな印象を受けるか。書き出したり考察したりします。
そうすることで、デザインの提案をする時もしっかりとした「理由付け」ができます！
自分の好きな色を、別のトーン（明度・彩度）にしてみる
明度、彩度が違うだけで、大きく様相が変わります。
もしこの色でなく、もう少し暗い色だったら。
それを使うときはどういう理由になるのか。考えてみましょう！
街の広告に目を凝らす
なぜ赤のベタ塗りなのか？なぜ文字は白抜きの文字なのか？
近接、堆肥だけで整理せずに、なぜ色を分けて使っているのか？
中吊り広告や雑誌の表紙、あたらしく見つけたWebサイトを見て考えてみましょう。きっと参考になるはずです。
いかがですか？
後半は、若輩者ながら経験則みたいなのが入りましたが…
カラーコーディネートは上手にやってこそ、成果物や、それこそ私生活にも良い影響があると思いますよ！
でわ！！
