デザインがうまくなる「配色のルール」
デザインがうまくなる「配色のルール」
カテゴリー：ウェブデザイン | グラフィックデザイン
どの色とどの色が合うのか、考えるほどによくわからなくなった経験はありませんか？
チラシを作るにしても、ウェブサイトを作るにしても、色使いは非常に重要な役割を担います。色使い一つで野暮ったく伝わらないものにもなりますし、魅力的で人によく伝わるものにもなります。
そこで今回はノンデザイナー向けに魅力的なツールを作るための基本的な「配色のルール」についてご案内したいと思います。
この記事を読んで頂くと、色の組み合わせ方がわかるようになります。
Contents
配色の黄金比率「70:25:5の法則」
ツールの作成に当たっては一般的に、ベースカラー（70%）、メインカラー（25%）、アクセントカラー（5%）の比率にして配色すると美しくまとまると言われています。
ベースカラー（70%）
ベースカラーはそのツールのベース（基盤）となるカラーで、主に背景や余白に使われることになります。
メインカラーやアクセントカラーを際立たせるための配色であり、メインカラーやアクセントカラーを薄くしたものや、黒・白・グレーなどの無彩色を使用することが多くなると思います。
メインカラー（25%）
メインカラーはそのツールで主役ともいうべき役割を果たす配色です。 伝えたいイメージに沿ったカラーやロゴマークに使用されているカラーを使用することが多くなります。
アクセントカラー（5%）
ベースカラーとメインカラーだけでは単調になりそうな時、変化をつけるためにアクセントとして使用するのがアクセントカラーです。重要な箇所に使用すると効果的です。
アクセントとして使用するものですので、その割合は全体の5%と少なくても問題ありません。ベースカラーやメインカラーの反対色にすると効果的です。
色の組み合わせ方
では上記配色の黄金比率を踏まえてどう色を組み合わせて行けばいいのでしょうか？ 色の組み合わせはノンデザイナーにとって、一番悩むポイントかもしれませんが、実は上手な色使いには一定のルールがあります。
それは、まとまり（統一感）を出したいときは、色相が近いものを使い、コントラストを作りたいときは、反対色や補色を使うことです。 では、それぞれ確認していきましょう。
まとまり（統一感）を出したいとき
色相環でみた時、近いものを選んだり、同じ色相で明度や彩度が異なる組み合わせを選ぶことで、まとまりのあるデザインをつくることができ統一感が生まれます。
コントラストを作りたいとき
色相環でみた時、反対側にあるものを使うことで、コントラストができメリハリのあるデザインをつくることができます。
細かなテクニック
上記だけでカバーできない配色のテクニックをあと少し述べておきたいと思います。
色数を制限する
色数が増えると散らかってしまい、本当に伝えたいメッセージは何なのかよくわからないツールが出来上がってしまいます。
デザインに慣れるまで色数は無彩色に有彩色を1,2色加える程度でいいと思います。色数を抑えることで、デザインにまとまりが生まれ、人に伝わりやすいツールができます。
真っ黒を避ける
真っ黒（#000000）は非常に強い色なので、デザインにうまく馴染まないことがあります。黒よりも少し薄くしたものや背景色に近い黒を使うとデザインにうまく馴染み自然な印象を与えることができます。
困った時のお助けツール６選
これらツールを使用すると配色についてもう考える必要すらありません。
まとめ
ツールの作成は配色の黄金比率「70:25:5の法則」（ベースカラー（70%）、メインカラー（25%）、アクセントカラー（5%））を意識すると美しくまとまる
まとまり（統一感）を出したいときは色相環の近いもの、コントラストを作りたいときは色相環の反対にあるものを選ぶ
色数を制限すると、デザインにまとまりが生まれ、人に伝わりやすいツールができる。
真っ黒（#000000）の使用をさけるとデザインにうまく馴染み自然な印象を与えることができる。
「デザインの4原則」を知るとデザインの基本が身につきます。
色の三属性 色相・明度・彩度を知ると色をより上手に使いこなすことができるようになります。
お気軽にお問い合わせ下さい
ワンストップで様々なツールの作成が可能です