こんにちは!先日、札幌市清田区にある、弊社の事務所前に雪がすこーし積り、そろそろ冬なんだなぁ、と感じるようになってきました。
いつものごとく、突然ですが、「冬」と聞くとどのような色を想像しますか?
以前、色についてお話した通り、人間は、見る色によって印象が全く違います。
ですが、人間同士の共通の認識は大体あるので、その時々、提供したいサービスなどでイメージカラーを変えただけで売り上げが上がる、なんてこともしばしば。
例えば、もうすぐハロウィンの季節ですね。
ハロウィンの場合は、オレンジや、赤、紫、黒などを組み合わせている配色が多く、怖いけれど楽しいイベントと感じさせるようなデザインが多いですよね。
冒頭でお聞きした冬の場合は、「雪」「氷」「寒い」など、冬独特のイメージがあるため、寒色系が多いです。
このカラーイメージですが、ホームページにも重要です。
今回は、Webデザインで抑えるべき3つのカラーの解説と、サイトを制作会社に依頼する際に、伝えやすくなる便利なサイトをご紹介します!

知っておいて損はない!Webデザインで重要な3つのカラー
ホームページではそれぞれ、ベースカラー、メインカラー、アクセントカラーという3つのカラーを持っているページが多く、それぞれの比率をバランスよく使用すると、美しい配色に仕上げることができます。
このサイトでも、下の図のように、ベースカラー、メインカラー、アクセントカラーがあります。
このサイトでも、下の図のように、ベースカラー、メインカラー、アクセントカラーがあります。
ベースカラー70%、メインカラー25%、アクセントカラー5%程度にすると、見た目が美しい配色にすることが可能だと言われています。
ベースカラーは、最も大きな面積を占めるまさに、ベースになる色で、主に背景や、余白に使われる色です。
ベースカラーは、最も大きな面積を占めるまさに、ベースになる色で、主に背景や、余白に使われる色です。
メインカラーは、そのサイトのイメージをつける、主役の色です。暖色・寒色だけでもガラッとイメージが変わり、お店や会社のイメージに合った配色が重要になります。
アクセントカラーは、メインカラーよりも目を引く色が良いと言われています。ボタンやなどの注意を惹きたい箇所に利用していることが多く、全体を引き締めるための役割もあります。
ベースカラーが2つあったり、アクセントカラーが2色あったりなど、そのサイトに合わせて3つのカラーから増えることがありますが、どれが重要な部分なのかが不明になるだけではなく、画面が「うるさく」なってしまう可能性があるため、弊社では、3~4色までにおさえることをおススメします。
アクセントカラーは、メインカラーよりも目を引く色が良いと言われています。ボタンやなどの注意を惹きたい箇所に利用していることが多く、全体を引き締めるための役割もあります。
ベースカラーが2つあったり、アクセントカラーが2色あったりなど、そのサイトに合わせて3つのカラーから増えることがありますが、どれが重要な部分なのかが不明になるだけではなく、画面が「うるさく」なってしまう可能性があるため、弊社では、3~4色までにおさえることをおススメします。
配色って言われても難しい!
サイトにとって色はユーザーの第一印象を決める一つの要因です。
飲食関係では、食欲を指そう赤やオレンジなどの暖色系が多く使われていたり、医療系などの場所では、清潔感を出すため、青などの感触が使われることが多いです。
ホームページをリニューアルする際は、「イメージカラー」は、あらかじめ社内で話し合って、決めておくと、デザイナーにも伝わりやすく、スムーズに話が進むことが多いので、是非、以下の3つのサイトを参考にしてみてくださいね。
飲食関係では、食欲を指そう赤やオレンジなどの暖色系が多く使われていたり、医療系などの場所では、清潔感を出すため、青などの感触が使われることが多いです。
ホームページをリニューアルする際は、「イメージカラー」は、あらかじめ社内で話し合って、決めておくと、デザイナーにも伝わりやすく、スムーズに話が進むことが多いので、是非、以下の3つのサイトを参考にしてみてくださいね。
見ているだけでも楽しい配色サイト
NIPPON COLORS
http://nipponcolors.com/
http://nipponcolors.com/
日本の色を紹介しているサイトです。
色の名前をクリックすると、背景の色が変わり、色の名前が和名で表示される見ているだけでも、とても綺麗なサイトです。
色の名前をクリックすると、背景の色が変わり、色の名前が和名で表示される見ているだけでも、とても綺麗なサイトです。
Coolors
https://coolors.co/
https://coolors.co/
英語サイトです。
「Start the Generator,it's free!」のボタンを押すと、シュミレーターが起動します。
後は、スペースボタンを押していくと、5色のバーがそれぞれ色が変わっていきます。
好きな色を指定することもできますし、任意の色だけ固定して他の色を変えるなど様々なシュミレーションができるので、まずは好みの色を見つけたい!という場合はお勧めです。
「Start the Generator,it's free!」のボタンを押すと、シュミレーターが起動します。
後は、スペースボタンを押していくと、5色のバーがそれぞれ色が変わっていきます。
好きな色を指定することもできますし、任意の色だけ固定して他の色を変えるなど様々なシュミレーションができるので、まずは好みの色を見つけたい!という場合はお勧めです。
Color Hunt
http://colorhunt.co/
http://colorhunt.co/
こちらも英語サイトです。
私もよく使っているサイトですが、このサイトは、特にバリエーションが豊富です。
ベースカラー、メインカラー、アクセントカラーがバランスよく配色されており、左上のタブで、新着、人気、ランダムでジャンル分けすることができます。
私もよく使っているサイトですが、このサイトは、特にバリエーションが豊富です。
ベースカラー、メインカラー、アクセントカラーがバランスよく配色されており、左上のタブで、新着、人気、ランダムでジャンル分けすることができます。
まとめ
いかがでしたでしょうか。
配色には自信がない、いつもと違う印象にしてみたいなど、ホームページ以外にも、チラシやプレゼン資料などの制作にも利用できる配色サイトです。
すべて無料ですし、複数のサイトを知っておくと、いざ配色に困ったときに有効活用ができるので、是非利用してみてくださいね!
配色には自信がない、いつもと違う印象にしてみたいなど、ホームページ以外にも、チラシやプレゼン資料などの制作にも利用できる配色サイトです。
すべて無料ですし、複数のサイトを知っておくと、いざ配色に困ったときに有効活用ができるので、是非利用してみてくださいね!