配色で迷ったときのヒント!

こんにちは、コウノです。
最近すごく暑いですね。
夏が近づくと、素麺が食べたくなりますが。
素麺屋さんってあるんですかね?
未だかつて見たことありません!情報あれば教えてください!

0620-2

前回カラーについて書きましたが、
今回はそれに引き続きカラーの中でも配色について。

「配色が良くなるテクニック」

僕はずっと配色は生まれ持ったセンスなのかと思っていましたが、
実は配所にもテクニックがあり、
それを習得すれば整った配色が出来るそうです!

その1.キーカラーを決めよう

まずイメージとなるカラーを決めてみましょう。
前回の記事で書いた「マタニティ図書館」なら「ピンク色」
そのように、サイトのイメージとなるカラーを先に決めます。

しかし、決めたキーカラーを背景にドーンっと使わなくても。
差し色などのように使い、目立たせるなどのテクニックもあります。

その2.70:25:5の比率を覚えよう!

この「70:25:5」をまずは覚えるのがベストみたいです!
この割合というのが
「ベースカラー70%、サブカラー25%、アクセントカラー5%」です。
○ベースカラーについて
ベースカラーとは、配色する上で一番面積を占める色です。
例えば背景や余白などに使われる色のことです。

主に、白や黒、灰色などの無彩色を利用することが多く。
文字を読む時の可読性を高めるためでもあります。
彩度が高い色を選んでしまうと、画面がうるさくなってしまうこともあるの
で注意が必要にもなります。
○サブカラーについて
サブカラーは、ベースカラーを補う役割を持ちます。
例えば、サイトの背景が白なら灰色など。
似た色を使えば、まとまった印象を与えることができます。
○アクセントカラーについて
アクセントカラーは、強調して目立たせるための色なので、ベースカラーやサブカラーとはまったく異なる色が選ばれる場合が多いです!
この比率を覚えるとサイトがすごく整って見えます。
使用する色は、3~4色でまとめるとメリハリが付くサイトになります。

「配色はどう決めるか」

0620-3

さて、ここまでで、配色のことはなんとなく分かってきたと思いますが。
では、どうやって配色を決めるのか。
決め方は色々とテクニックがあるようです。

捕食を補った配色や・・・
明暗を使った同系配色や・・・
トーンを揃えた配色など・・・・
言葉だけでは、さっぱり分からないと思います!
そこで色々調べていたら、すごく便利なサイトを見つけました。
これをベースに配色をするとすごくわかりやすいと思います。

https://color.adobe.com/ja/create/color-wheel/
指定したカラーに基づいて、色の組み合わせを何パターンも教えてくれます。これはすごく便利です!

http://www.color-fortuna.com/color_scheme_genelator2/
あと、これもすごく便利でした。
キーカラーを決めると、自動でこの辺はこの色にしたらいいよ~っと教えてくれます。
この2つのサイトを使って作業していくと。
何となく、この色がいいのか!っと分かってくると思います。

配色に迷った場合はおすすめです!

コウノ