少し前の記事で、フォントの選び方や表記の仕方についてお話をしましたが、
今回のテーマは「色」です！
テキストと同じように、色もデザインには欠かせない重要な要素です。
っていう人も多いですよね。
選んだ色や配色によって全体のイメージは大きく変わってくるので
伝えたいイメージにマッチした色を選択したいところです。
そこで今回は、色の選び方や配色についてお話ししたいと思います！
ページコンテンツ
メインで使う色を3つ決める
配色を決めるときは、まずメインで使う3色を決めましょう。
と呼ばれているぽ。
この3色を「70%：25%：5%」の割合で配色していくと
全体的にバランスの取れた配色にすることができます。
【参考】GK-POSTの配色
ベースカラー：70%
メインカラー：25％
アクセントカラー：5%
では、それぞれどのような観点でカラーを決めていくのか
順番に見ていきましょう。
メインカラー
その名の通り、サイトのメイン、顔となる色です。
サイトのロゴマークで使われている色をそのまま使うことが多く、
白文字をのせても可読性が高い、明度の低い色を選ぶのがオススメです。
【サンプル】明度の差による色の違い
| 明度が低い色 読みやすい |
| 明度が高い色 読みにくい |
薄い色に白文字をのせると字が沈んでしまうほどに薄いので、
色としてのインパクトが非常に弱く、メインカラーには向いていません。
ベースカラー
ベースカラーは、背景や余白など全体の70%の面積に使用する色です。
メインカラーと親和性が高く、他の要素を邪魔をしない色が良いとされていて
一般的には白や薄いグレーなどの無彩色を利用することが多いです。
ベースカラーにも色味がほしいという場合は
メインカラーの明度を高くした色を設定すると調和がとりやすくなります。
【サンプル】ベースカラーによく利用される色
アクセントカラー
アクセントカラーは、とくに目立たせたい部分に使います。
全体の色味に負けないくらい目を引く色を選択する必要があるので
メインカラーの補色（反対色）を選択するのがオススメです。
補色（反対色）というのは、色相環で正反対の位置にある色のことで
補色同士の組み合わせは、互いの色を引き立てあう相乗効果があります。
無料で使える便利な配色ツール
メインカラーが決まれば、その他のカラーも決めやすいですが
可愛い感じにしたい！オシャレにしたい！といった抽象的なイメージだと
なかなかカラーを決めるのは難しいです。
そんなときは、Web上にある配色ツールを使ってみるのも良いかもしれません。
Color Supply
色相環から好みの配色パターンを選択できるツールです。
Material Design Colors – Material Palette
画面左側のカラーパレットから好みの2色を選択すると
その色に合うカラーとデザインサンプルを表示してくれるツールです。
Colormind
ボタンをクリックするだけで配色パターンがランダム表示されるツールです。
気に入った色があった場合は、その色だけをロックすることで
その色をもとにした配色パターンを生成してくれます。
配色パターン見本40選
あらかじめ用意されている配色パターンを選択すると
画面右側でプレビューが確認できるツールです。
配色パターンは「万人受けする」「かわいい系」「個性的」など
複数のカテゴリが用意されているので、イメージに近いものを選ぶことができます。
Grabient
こちらはグラデーションに特化した配色ツールです。
あらかじめ用意されたグラデーションパターンをカスタマイズできるので
好みの色でサンプルを確認することができます。
まとめ
デザインをする上で色はとても重要な要素ですが
バランスよく配色するのは難しいと感じることも多いのではないでしょうか。
でもそれは、デザインの論理やルールを知らないからかもしれません。
実はデザインというものはものすごく論理的で
それを知っているかどうかでデザインの質もスピードも大きく変わってきます。
今回ご紹介した配色のコツも、そんな論理のひとつです。
ちょっとした知識ですが、知っているだけで色選びで悩むこともきっと減るはずです。
ぜひ活用してみてください！
ネットショップ運営でお困りのことはありませんか？
お気軽にご相談ください。
