配色の秘密を知ろう!

配色の秘密を知ろう!

こんにちは!

今回は「配色」についての記事になります。

配色=色の選定と配置を合わせた色の構成を決めること

夕焼が沈んでいく海、真っ赤に染まった紅葉、黄色と群青のグラデーションなどのように人間が無条件に美しいと感じる自然とは異なり、人工的に作られるものに使われる色には、色の基本を十分に理解し活用する必要があります。

せっかく作ったデザインも配色が悪かったら全て台無しです。

なのでしっかりと配色、色の仕組みについて知る必要があります!

一緒に色の世界について学んでいきましょう!

〜〜 目次 〜〜

【1】色の仕組み
【2】2色の組み合わせ対比を知る
【3】失敗しない3色の選び方
【まとめ】

【1】色の仕組み

今、あなたの視界に入っている色は何色ありますか?

朝起きてから夜寝るまで1日何色の色を見ているでしょうか?

人間は750万色の色を見分けることができると言われています。

750万色ですよ! すごい能力ですよね、、、

しかし、750万色に名前を付けて覚えることは難しいと思います。

そのため「色相・彩度・明度」という3つの指標を使いこなすことで覚えずとも色を使いこなすことができます!

色相:色味・色合いを表すもの

彩度:色の鮮やかさを表すもの

明度:色の明るさ・暗さを表すもの

それぞれを理解することが、色にまつわるデザインセンス(=色彩感覚)を身につけることに繋がります。

 【2】2色の組み合わせ対比を知る

色は1色ずつ様々な効果を持っていますが、大事なのは色の組み合わせです。

組み合わせによって、色の効果を生かすことも死なせることもできます。

ですので、組み合わせでデザインが決まると言っても過言ではないでしょう。

ここでは様々な組み合わせの紹介をいくつかしていきます。

【明度対比】  明度差のある2色を並べると明暗がさらに強く見える


【彩度対比】  彩度差のある2色を並べると彩度がさらに強く見える

【色相対比】  2色を並べたときに色相の差が大きく見える

【補色対比】  色相の反対側の色を並べるとお互いが鮮やかに見える

他にも「縁辺対比」「継続対比」などがあります。

色の組み合わせを大事にすることでデザインの中で強調させたい部分や目立たせたい部分をより一層引き立たせることができると思います。

 でもいきなり効果の出る色の組み合わせを自分で一から探し出すのは先が遠くなるような作業ですよね。そのため後ほど、無料で使えるツールを紹介いたしますのでご安心下さい!

【3】失敗しない3色の選び方

先ほど、2色の対比について言いましたが、実際に仕事で配色を使う時の多くは1色2色はほぼ無く、3色以上の組み合わせが多いですが色の知識を知らないと色が汚いと言われてしまうケースが多くあります。

そのため初心者の状態から自分の感覚でセンスを磨くのは難しいと思うので、

「70:25:5」のルールの従って選んでみましょう!

これは、色を使う部分を全体を100%として割合を分けています。

 イメージを挙げますとこんな感じになります!



いきなり色はたくさん使うのは難しいと思った方は背景色は基本使わずに
「誌面は白・文字は黒」を基本にして進めることをオススメします!

【無料で使える配色ツール】

各色の特性や心理効果の理解を深めるカラートレーニングなどをするのも良いと思いますが、今すぐに身に付く能力では無いですよね。
ですが、誰でも無料で使える配色ツールがあるのでご紹介します!

「Adobe Color」写真から配色を作れる



「Scheme Color」欲しい系統から簡単に選択できる


「Palette List」2色選ぶと後はAIが提案してくれる

このような感じで調べればまだまだ無料で使えるツールが沢山あります。
どれも割と簡単に使うことができると思います。
そのためたとえデザイン未経験でも、色彩の専門教育を受けていなくても、簡単にデザインセンスのある人に近づくことができます!

 

【まとめ】 

今回の内容はこちらで以上になります! 
色の世界って奥深くて可能性が無限に広がっていますね。
最初は難しいかもしれませんが色を自分の味方にすることができれば、デザインの幅や表現したいことを伝えやすくできると思います。
次の記事では各色の特徴についての記事になりますので各色の特徴を知って
色を完全に味方にしましょう!

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