Study Report 1 / 「配色の基本」

1day1study

どうもJBです。

今回は、「配色の基本」についてです。

僕が色について面白いなと思ったのは、下記の記事を見たときでした

　無意識に私たちは色に誘導されているが、逆をいえば色彩の作用を知っていれば色で人々を誘導する事が可能である。ファッションなどでもその効果は発揮できるので、その時の場所や状況、モチベーションに合った色が選べるように色彩を学んでみるのもおもしろい。それぞれの色の働きやどのように人に影響するのかを知っていれば人々を目的の方向へ誘導することができる。

簡単にいうと、色だけで人の振る舞いをデザインすることができるということです。

人のなんとなくに働きかけ、無意識のうちに誘導する。これ、ができるようになったら楽しそうじゃないですか？笑

　なので、まずは基本を抑えるということで「配色の考え方」や「色が与える印象」について勉強していきます。

・配色の考え方

配色のコツは色数と配色比率

最初は、無理にいろんな色を使って鮮やかにさせようとするあまり、まとまりがなくなってしまったり、鮮やか過ぎたりしてしまいます。なので最低限、色に慣れるまでは色の数と比率を意識して配色を考えることをお勧めします。

・70:25:5の法則

ベースカラー：背景や余白（どういう印象を与えたいのか）
メインカラー：ベースを補う色（似た色でまとまりを/異なる色で動きを）
アクセントカラ：注目させたいコンテンツに使用するとgood!

この３つの色を意識する法則です。

各色の割合を

ベース　70：メイン　25：アクセント　5

の比率で配色することでバランスの取れたデザインになります。　

・色が人に与える印象

色には、

進出色と後退色・膨張色と収縮色・興奮色と沈静色
心理的な影響、生理的な影響、感情的な影響、文化的な影響

など色には人の心の動きに様々な影響を与える心理効果があります。

印象

色が人に与える心理効果のなかで代表的なものを上げていきます。

赤
心理効果：見る人を元気にさせる効果や食欲増進、時間の感覚が早い
イメージ：愛情、情熱、闘争心
ポイント：アクセントカラーとして利用されることが多い。

青
心理効果：見る人を落ち着かせる、興奮の抑制、時間の感覚が遅い
イメージ：安心感、開放感、知的
ポイント：水の色と同じな為嫌う人が少ない色

黄
心理効果：見てる人の心を明るくさせる、集中力の向上
イメージ：希望、幸福、緊張
ポイント：認識しやすい色なので「注意や警報」を連想させたい時の色

緑
心理効果：見る人の興奮を鎮める。気持ちを穏やかにする。集中力向上
イメージ：健康、安らぎ、自然
ポイント：安心感や安定を連想させることから教育、健康、エコ関連のWEBサイトで利用されることが多い。

黒
心理効果：かっこ良さ、重厚感、引き締め効果
イメージ：高級・自信・死
ポイント：高級感やクールさを引出させたい時や男性的な印象与えたいとき

白
心理効果：気分を一新させる。軽量感、清潔感
イメージ：清潔、祝福、無
ポイント：暗い色を引き立てる効果がある。

以上

最後まで読んでいただきありがとうございました。

下記のリンクに配色の為の便利なツールがあるので添えておきます。

【デザイン】色の組み合わせが簡単に作れるWeb配色ツール10選

参考記事
・https://creive.me/archives/8680/
・https://blog.btrax.com/jp/color/