インビジョン株式会社

志 × 採用 × IT =
採用マーケティングチーム

その他

【センスがなくてもできる!】3色を使った配色術!色の使い方には基本があるんです!

 

前回は色の持つ力について書きました。

そこで、今回はその色をどう使ったらいいかという配色方法をご紹介します!

だれでもできる!3色を使った配色術

70:25:5

この比率、何だかご存知ですか?
配色は「ベースカラー」「メインカラー」「アクセントカラー」
3つの構成要素からできていて、
70:25:5=ベースカラー:メインカラー:アクセントカラー
の比率が最も美しく見えると言われています。

ではそれぞれの役割についてご紹介します。

ベースカラー

配色をする上で最も広い面積になる色です。
背景となることが多いので、薄い色や明度が高い色にしておくと
文字も見やすくなるのでオススメです。
※ベースカラーに蛍光色を使ってしまうと目が痛くなってしまうので、控えましょう
20141202_maido
20141202_keikoushoku

メインカラー

名前の通りメインとなる色です。
この色で全体のイメージが決まるので、
前回のコラムで書いた色相心理を踏まえて色を考えるといいですね!

アクセントカラー

ポイントとなる色です。
例えば、お問合せボタンやキャチコピーなど
一番目立たせたいポイントにアクセントカラーを持ってくると上手くまとまります。

アクセントカラーの決め方ですが、メインカラーの反対色を使うとはっきりした配色になるので、
配色に慣れるまでは反対色を使うことをオススメします。
※反対色は下の色相関で対角線にあたる色のことです。
color_chart
(反対色を使うと視認性が悪くなることもあるので、様子を見て配色しましょう!)

70:25:5で配色してみよう!

では早速、配色してみましょう。
前回のコラムで使った画像の配色違いを用意してみました。

メインカラーを青にする

ex_01

ex_01_color

爽やかで誠実な印象の配色になりました。
アクセントカラーをメインカラーの反対色であるオレンジにして、
一番目立たせたいボタンにポイントを作っています。

メインカラーを赤にする

ex_02
ex_02_color

なんだかクリスマスみたいな配色になってしまいましたが…
元気で力強い印象の配色になりました。
このバナーを見たら、体育会系な会社なのかな?と思ってもらえそうですね!
(キャッチコピーの文字に動きを付けると、より力強い印象になそうです)

メインカラーを青緑にする

ex_03
ex_03_color

フレッシュで若々しい印象になりました。
求職者に若い人たちが多い会社なのかな?と思ってもらえるんじゃないでしょうか。

まとめ

いかがでしょうか?
今回は、70:25:5=ベースカラー:メインカラー:アクセントカラー
を意識した配色方法をご紹介しました。

★ ベースカラーは明度高め
★ メインカラーは色相心理を意識して
★ アクセントカラーは一番目立たせたいポイントに使う

デザインにも配色にも正解なんてないので、
今回ご紹介したのはほんの一例として考えてもらえたら嬉しいです。

The following two tabs change content below.

【インビジョン広報隊長】ちあき

最新記事 by 【インビジョン広報隊長】ちあき (全て見る)

Contactコンタクト

ざっくばらんにご相談(無料)ください。