Webサイトの配色決めるコツ!基本となる3つのカラー

デザイン

2022-10-02

Webサイトに効果的!基本の3色配色

こんにちは、Creative.LABスタッフのM.Yです! 


Webサイトを制作する際に最初に決めなくてはいけないのがサイトのカラーです。

配色次第でガラリと雰囲気が変わるので、慎重に決めたいですよね。

今回は、基本的な配色方法と、カラーイメージをご紹介します!


3つのカラーとその比率

Webサイトデザインでよく使われるのが「ベースカラー」、「メインカラー(アソートカラー)」、「アクセントカラー」の3色配色です。

・ベースカラー・・・70% 

・メインカラー・・・25% 

・アクセントカラー・・・5%


カラーの比率

Webサイトデザインにおいては、色数が少なすぎると効果的な表現ができず、また色数が多すぎると煩雑な印象を与えてしまいます。

そのため3つにカラーを絞り、適切な比率で配色することで見やすいWebサイトに仕上がります。



ベースカラー

最も大きな面積を占めるカラーで、背景色や余白色として用いられます。

白や薄いグレーが使われることが多いですが、黒などの濃い色を使用することもあります。



メインカラー

サイトの印象を決める主役色です。特に、ベースカラーが白や淡い色の場合は一番目を引く色になります。そのため通常は一番最初にメインカラーを決めてから、ベースカラー、アクセントカラーを決定します。  メインカラー=サイトの色となりますので、コーポレートカラーを使用しているWebサイトが多いです。また、文字の読みやすいなどの可読性の観点から、明度の低い色が使用されやすい傾向もあります。


アクセントカラー

強調させたいコンテンツに使用するカラーです。  お問い合わせボタンや、購入ボタンなどのコンバージョン(Webサイトの目的)に直結する箇所に使用すると効果的です!  アクセントカラーはメインカラーの「補色」とすることもひとつの方法です。  補色とは色相環の反対側に位置する色で、お互いに引き立て、鮮やかに見せる効果があります。



配色のおすすめ参考サイト

コーポレートカラーが無いときや配色が決められないときには配色サイトを参考にしてもいいかもしれません。

いろんなバリエーションを見ることができるので、私は見ているだけでも楽しいです! 

Webサイトに限らず、資料づくり等に活かしたり、色から受ける印象を確認するときにも活躍しますね!



COLOR SUPPLY(カラーサプライ)



2〜4色の配色を類似色や色相環から自動で選出され、好みの配色を探すことができます。

直感的に操作ができて、配色デザインイメージも見ることができます!