Webデザインの基本、「配色」について考える。Note03

『Webデザインの基本～きちんと入門～』を読んで学んだことを
NOTEでアウトプットしていきます。
今回は配色について学びました。

配色について

配色は人の心を動かす情報が多く、
デザインの中でも特に重要な要素です。

色には感情やモノを連想させる力や状況を伝える力があります。
複数の色を使ってイメージを限定して、ユーザーに伝達します。

Webデザインで使われる混色の方法は
色を混ぜると明るくなる加法混色です。

反対に、印刷物やグラッフィックデザインに
使われるのは色を混ぜると暗くなる減法混色です。

それぞれについて詳しく見てみましょう！

加法混色とは？

光の三原色（RGB）
Red　Green　Blue　この3色を足すと白に、抜くと黒になります。

減法混色とは？

色料の三原色（シアン・マゼンタ・イエロー）
一般的に色料の三原色とキープレート（黒）による
CMYK（シアン・マゼンタ・イエロー・キープレート）が
使用されます。

色は3つの属性に分けられる！

アメリカの画家アルバート・マンセルが表現したルールを
マンセル表色系といいます。
連続する色を目に見える変化として体系的に表現しました。

マンセル表色系では色を色相・明度・彩度の3つの
属性を用い、このことを色の三属性といいます。

1.色相

赤・青・黄などの色の様相を表した色味のことです。
赤・黄・緑・青・紫の５色を主要カラーに
中間色を追加して楕円に並べたものを色相環といいます。

色相環で正反対側に位置する色を補色といい、
互いの色を引き立てあう性質があります。

ロゴマークや看板には補色調和を使って
安定した色を取り入れることが多いです。

2.明度

色の明暗のことです。

色味のない黒・灰・白を無彩色といい
色味を持つものを有彩色といいます。

最も明るい白を明度10、最も暗い黒を明度0として
10分割します。

色の三属性の中で
１番視認性に直結しているのが明度です。
※完成したデザインをモノクロコピーすると、
明度だけになり分かりやすく差が出てきます。

3.彩度

色の持つ鮮やかさのことです。

無彩色を0とし、色の鮮やかさによって
数字が大きくなっていきます。
マンセル表色系の彩度が高いと派手な印象に、
彩度が低いと地味な印象になります。

トーンとは？

明度と彩度が似ている色を集めてグループ化したものを
トーンといいます。

トーンのグループをうまく組み合わせることで
配色に指針を簡単に決めることができ、統一感のとれた配色で
デザインを作ることができます。

トーンは、純色・清色・中間色（濁色）の３つに分けられます。

1.純色

赤・青・黄などの彩度が最も高い色のことをいいます。

2.清色

白か黒だけを加えた色のことをいいます。
白だけ→明清色
黒だけ→明暗色　

3.中間色

純色に灰色を加えた濁った調子の色を指します。

PCCS とは、財団法人日本色彩研究所が開発した
カラーシステムで有彩色の明・暗・強・弱・
濃・淡など、色の調子が12種類に分けられています。

トーンを決め、配色を揃えてデザインをしていくことで
イメージする色彩設計を簡単に作ることができます。

次回は「デザインにあった色の組み合わせ方」を
学んでいきたいと思います。

Yuka.