配色って難しくないですか？
「デザインセンスって生まれつきのものなの？」
って思うくらい、色々考えてみても良い配色が思い浮かばなかったりしました。
そんな私も配色についての基礎知識を学ぶと、意外と簡単だとわかりました。
こんな私でも、そこそこの配色ができている･･･と信じています。
シンプルな配色について解説してみたいと思います！
お役に立てたら嬉しいです！
- 色の基礎知識がわかる！
- シンプルな配色パターンがわかる！
色の基礎知識
色の知識があると配色で困りません！
色の基礎知識から簡単に解説します。
色と言えば色の三原色のシアン、マゼンダ、イエローが有名です。
ざっくり言えば、青、赤、黄を混ぜる事で全ての色が作れるという話です。
絵具的な考え方です。
また、光の三原色のRGBも有名です。
赤い光と緑色の光と青い光があれば全ての色を作れるという話です。
テレビ等を近くでよく見ると、この三つの色の光で映像が作られていることが分かります。
配色パターンを考える際にはこれらの色の捉え方だと難しくなります。
もう一つの考え方が、色相、明度、彩度を用いて色を作る方法です。
色相
青と赤と言えば全く別の色ですよね。
一方薄い青と濃い青はどちらも青です。
初めの青と赤のような色の差の事を色相と言います。
これだけだとだから何？って感じになってしまいます。
配色の際に色相を似ている色を隣同士に置いて輪にした「色相環」が重要になってきます。
今回は12色のものを例に挙げましたが、色相環はいくつものパターンがあります。
隣り合っているものは色が似ていて、対角線上の色が最も異なる色になる、という事になります。
彩度と明度
色相環の上にあるような、赤や青以外に「彩度」と「明度」があります。
彩度は鮮やかさで、高ければ原色、低ければ白、灰色、黒と言った色になります。
明度は明るさで、高ければ白く、低ければ黒くなります。
すごくわかりにくいんですよね。
色相を青でグラデーションさせてみました。
明度が最小と最大では白と黒になりますので、三角形上に並べられたりします。
白黒度合いが明度、色相度合いが彩度になります。
色そのものは意外と単純なんです！
配色パターン
いよいよ配色の考え方です！
色相、明度、彩度を使って色の組み合わせを考えていきます。
繰り返しになりますが、今回はシンプルな配色の解説です。
また、配色パターンとしては文字のある資料などを想定しています。
基本的に背景色と文字の色、そしてその他で使う色、という形になると思います。
シンプルな配色では背景色と文字の色は、白と黒とするととても無難です！
- 背景色は白か黒！
- 文字の色も黒か白！
選び方
色相から選ぶと良いと思います。
メインカラー2種を選ぶようにしましょう。
色相を多種選んでしまうと、とてもカラフルなイメージになり、見ていて疲れます。
色相を少な目にすることでシンプルな配色になります。
次にそれぞれの彩度と明度を決めます。
彩度と明度の組み合わせでもイメージが変わってきます。
色相の選び方毎にまとめていきます。
色相を同じ色にする
「同じ色って意味ないじゃん！」となるかもしれません。
この後明度や彩度を変える事によって色の差を出すことができます。
色相を同じ色にすると色に統一感が出ます。
シンプルさがあります。
彩度と明度は遠い位置
メインカラー2種を同じ色にした場合、彩度と明度は遠い位置にある配色にしましょう。
似過ぎているとメリハリのない配色になってしまいます。
例
HSL：170,189,224
HSL：170,64,96
色相が似た色にする
色相環の近い場所にある色は変化はありつつも統一感もあります。
同じ色にする場合同様、明度や彩度で色の差が出てきます。
彩度と明度
似た色なので彩度と明度が同じでも色の違いが出てきます。
一方、彩度と明度を遠いものを選んでも色が近いのでまとまりは出ます。
ただ、彩度と明度も近いものの方が、よりシンプルかなと思います。
例
HSL：0,255,224
HSL：32,189,224
HSL：0,255,224
HSL：32,190,192
HSL：0,255,96
HSL：32,189,224
HSL：0,255,224
HSL：32,95,94
色相環の大きく異なる色
色相の違いがあると色が目立ちます。
そのため色の強調されやすくなります。
彩度と明度は近い位置
彩度と明度を合わせる事でシンプルな配色になります。
例
HSL：170,255,224
HSL：0,255,224
サブカラー
後はお好みでサブカラーを多くても2種程に収まるようにすると良いと思います！
先にも書いた通り、色相が4種以上あるとすごくカラフルになってしまいます。
メインで1種もしくは2種選んでいるので、それ以外の色も2種程度にしておくと良いと思います！
これでシンプルな配色はバッチリです！
- メインカラーを2種、色相から選んで、選び方に合わせて彩度と明度を決めましょう！
- サブカラーは多くても2種位までにしましょう！
まとめ
いかがでしたでしょうか？
シンプルな配色だと寂しい感じするかもしれませんが、見やすさでは一番だと思います。
マルヒとしては内容で勝負したいのでシンプル配色を心掛けています！
- 配色を決めるときは色相、彩度、明度で決めるのがおすすめです！
- 色相の違いから彩度と明度を決めてメインカラーを決めましょう！
- シンプルな配色は色を少なく！
ここまでお読みくださりありがとうございました！