【WEBデザイン・グラフィックデザイン 初心者向け】 色の知識を簡単に解説!
色の知識
デザインが生きがいの ゆうすけ です。
独学でデザインをはじめてからつまずく事のひとつとして
「色」
があると思います。
アートであれば自分の感性のままに配色をしてもだいじょうぶなのですが
デザインの場合は目的をもって色を選んでいきます。ということを言われるので
「それじゃ色の勉強しなくちゃw」となるわけです。
が・・・
そのときに「色相」だとか「トーン」だとかの専門用語がでてきてよくわからないですよねw。ぼくもそうでしたw。
そこでデザイン初心者の方でも
「色」をなんとなくではなく
しっかりと理解して選べるようになっちゃいましょうw!
色の3属性
色は3つの要素からできていて
それぞれの大きさでさまざまな色が出来上がっています。
その3つは
- 色相
- 彩度
- 明度
といよばれるものです。
それではひとつづつ解説していきますねw。
1. 色相(Hue)
赤・オレンジ・黄・緑・青・紫などの色味のことをです。
ちょっとむずかしいことを言うと
色は光の波長のちがいで人に認識されます。
そのときの連続した変化が「赤・オレンジ・黄・緑・青・藍・紫」
なんですw。
これってそう、虹色ですw!
そんでもってこれを輪にしたのが「色相環」というわけです。
これが色相環w▼
この輪の中で対面している色どうしを「補色」といいます。
お互いの色を目立たせるので、アクセントカラーとして使うのによいということです。
看板や商品のパッケージに効果的につかわれていますねw。
2. 彩度(saturation)
色の鮮やかさです。そのまんまですねw。
もっとも鮮やかなで彩度が高い色は「純色」といいます。混じり気のない色です。
この「純色」に色が混ざっていくと彩度は低くなっていくんです。
グレー・白・黒などの色味がまったくない色を「無彩色」といいます。
3. 明度(Brightness)
色の明るさの度合いです。これもそのまんまですねw。
でも明度と彩度ってすごく似てますねw。
でも高い、低いは逆のような気がするしで、もうわけわからんw!
簡単に言うと白に近づくにつれて(インクでいえば白をたくさん入れることで)
明度は高くなっていき
黒に近づくにつれて(インクでいえば黒をたくさん入れることで)
明度というのは低くなっていくということですw。
上としたのカラーバーを見比べるとわかりやすいと思いますよw。
ここまでが色の3属性の話です。
つぎに色の出し方について話していこうと思います。
色の構成
色はさまざまな物に配色されていますが大きく分けると
- 映像
- 印刷物
のふたつになると思います。
これらは色の出し方はまったくちがうんですよね。
1. 映像・・・光の3原色(RGB)
R・・レッド
G・・グリーン
B・・ブルー
という3色の頭文字をとってRGBといいます。
映像で使用している色は、赤・緑・青の光の組み合わせでさまざまな色を表現しているんです。
webサイトを作っていくときはRGBモードで作成していかなければいけないのはそういう理由からなんですねw。
また3色すべての色を重ねるといちばん明るい色の「白」になります。
2. 印刷物・・・色の3原色(CMY(K))
C・・シアン(青緑)
M・・マゼンタ(赤紫)
Y・・イエロー(黄色)
印刷物の場合はこの3色になります。
シアン・マゼンタ・イエローの3色のインク(顔料)を混ぜることでさまざまな色を
表現することができます。こちらのほうは子供のころから絵の具などで親しんできているので理解しやすいかもしれませんねw。
CMYは全ての色を混ぜると黒になるのですが、実際はまっくろにはならないので
K(黒)で補ってCMYKとして使われているんです。
まとめ
今回は色の基本のキになる部分のはなしでした。
映像(web)と印刷物の色の仕様は全く違うことがわかりましたねw。
これを知らないで印刷物なのにうっかりRGBでつくってしまったらたいへんなことになっちゃいますw。気をつけましょう(^O^)/
次回は「明度」と「彩度」の関係している「トーン」の話もしようと思っていますw。
デザインの印象をきめる大事な要素「色」をしっかりと理解して
よいデザインを作っていきましょうねw。