Blog ブログ

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

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

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

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

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

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

ベースカラー

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

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

メインカラー

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

アクセントカラー

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

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

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

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

COLOR SUPPLY（カラーサプライ）

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

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

https://colorsupplyyy.com/

Color Hunt（カラーハント）

4色の配色パターンが掲載されている配色パターン見本サイト。

世界中のユーザーが投稿した配色パターン見本が掲載されていて、お気に入りの登録数によって人気が分かるようになっています。

おしゃれな配色パターンを探したい時は、画面上部のプルダウンで並び順を「Popular」にしてみましょう。

https://colorhunt.co/

いかがでしたでしょうか？

Webサイトのカラーは重要で簡単には決められないかもしれません。

そんなときは配色参考サイトを見たり、数多くのWebサイトを見て理想の色を見つけましょう＾＾

現在『ホームページ制作 最大30万円割引キャンペーン』を実施中です！

詳しくはこちら

ぜひお気軽にお問い合わせください。

お問い合わせはこちら