美術大学講師による「配色・色彩・彩度明度」の基本

2014年11月14日 20:00

Webデザインを仕事にするために必要なスキルを、先生と一緒に「実際のWebデザインの全ての制作プロセス」を体験しながら身に付けられます。Webデザインやサイト制作について何度も本を買って学習しようとした方、未経験から始めた方でも、HTMLやCSS、Adobe PhotoshopやIllustratorなどの技術を習得出来ます。小規模レベルのWebサイト制作を一人で請け負い、仕事として取り組めるようになることを目指しましょう。

本記事ではデザイン・アートの基本中の基本、「配色・色彩・彩度明度」という色にまつわる基礎知識をスクーの授業を元にご紹介。中学校の美術の時間に少し取り組んだくらいで、美術系の大学や専門学校に通っていないと触れる機会がない色についての知識。情報を正しく伝達するデザインをするために、誰もが知っておきたい理論ありきの配色選びを東洋美術学校の授業、『明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】』から学んでいきます！

■目次

1.配色ってなに？

2.色相、色相環ってなに？

3.明度ってなに？

4.彩度ってなに？

1. 配色ってなに？

”種々の色を取り合わせること。色のとり合わせ。”(wikipediea「配色」より引用）

色相・明度・彩度という色の三属性、モノサシを調整し、然るべきところに置くこと。

デザインや、イラストレーションに取り組むときに専門知識があると拠り所になりそうです。WEBデザイナー学部でWEBデザインをしていくと、バナーやロゴのデザイン、また、サイトのビジュアルデザインをするときに、配色の知識があると効果的なデザインを作ったり、デザインについてクライアントへ説明ができるなどで学習の成果が得られそうですね。

2. 色相、色相環ってなに？

「色相」について

デザイン理論の基礎

（引用：明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】）

赤、黄、青、緑などといった色み(色あい)を表します。「虹色」をわっか状に並べたものを中学校や高校での美術の時間に見た記憶がある人も多いのでは？　色相は英語では「hue」と言います。我々が、「空＝青」「森＝緑」というように思い浮かべるるそれぞれの色を区別できるのは色相（色合い）があるからです。これからご紹介する、「色相／明度／彩度」は「色合い／明るさ／鮮やかさ」と言い換えると覚えやすいですね。

色相環（=虹色をわっか状にならべたもの）について

虹と同じ順番に色相をわっか状に並べたもの。12色や24色のものがあったりします。この円環に近いと、似ている色で、一方離れていると補色の関係（反対色と呼ぶこともあります）と言います。補色の関係の配色をすると目立たせる効果を発揮します。赤と緑などは補色の関係にあるので、セブン-イレブンのロゴは補色関係にあると言えますね。

ちなみに、デザイナー御用達の（HUE/ 360）というツールは、色相環で配色を自動で選んでくれます。色相環を頭に入れながらも迷ったら「HUE/ 360」を使ってみてもいいかもしれませんね。

色相環｜デザイン理論の基礎

（引用：明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】）

※ここに白や黒がないのは、有彩色のみの構成になっているせいだそうです。

3. 明度ってなに？

明度について

色の明るさを表す言葉。明度は英語では「value, brightness」と言いいます。明るい色ほど白に近づき、暗い色ほど黒に近づいていきます。明度は次にご紹介する「彩度」とセットで使われたりします。デザインの現場だと、クライアントから「明度下げて、彩度上げてくださ〜い」などと指示されることがあります。即座に応えられるように、下の図を参考にしながらPhotoshopを触ったりしながらチェックしてみてくださいね。

↓の図だと、縦のラインが明度を示していますね。

色相環｜デザイン理論の基礎

（引用：明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】）

4. 彩度ってなに？

彩度について

色の鮮やかさを表す度合を表す言葉です。彩度「chroma, saturation」は色みが強く鮮やかな色ほど高く、純色なビビッドな色に近づいていき、色みが弱くなるほど無彩色(白黒・グレー)に近づいていきます。色は「有彩色」のようにカラーがある色とグレーや白黒といった、「無彩色」に分けられます。

縦のラインが明度だったのに対し、こちらは横のラインで、彩度を示していますね。ちなみに、これら明度と彩度を組み合わせた概念が「トーン」と言われるものです。

色相環｜デザイン理論の基礎