東京 台東区のホームページ作成 EC ≫ クリエイターブログ
CompanyWebsite createContact

WEBサイトを活用し“売上・成果”を上げる!ならエグゼクティブクリエイションへ是非ご相談ください。 エグゼクティブクリエイション TOPページへ無料お見積り・お問い合せはこちらお電話でのご連絡:03-5839-2512

ホームページを活用し 売上・成果を上げる方法満載

WEBデザイナーでなくてもできる?配色の基本

デザイナーでなくてもできる?配色の基本

さて、皆様はホームページに限らず「配色」について営業資料やプレゼン原稿を作る時に困ったことはないでしょうか。
 
検定などもあることから、配色については難しくてよくわからないという印象を持っている方も多いと思います。しかし、デザイナーではなくてもある程度の要点を押さえておけば、実はそれっぽい見た目のものを作ることは十分可能です!
 
そんな配色のポイントをいくつかご紹介したいと思います。
 
 

虹色と色相環

さて、皆様が目にするものの中で、単純に色数が多くてきれいなものといえば何があるでしょう。そう、虹ですね。 虹は仕組み上、世界のどこに行っても同じ順序で色が並びます。
 

色相環

こういった自然色をベースに、色のサイクルを指し示す円形の表を「色相環」と呼んでいます。
美術の教科書に載っていたのを覚えている方も多いのではないでしょうか。
デザイナーはセンスに生きているように見えますが、実際センスでどうにかなっている人はごく一握りです。
だいたいのデザイナーは、基本的にはこれをベースにして論理的に配色を決定しています。
 
 
 

自然色の組み合わせは受け入れやすい

もっとも簡単な配色は「自然の色に従うこと」です。
例えば「青い空と白い雲」という組み合わせに気持ち悪さを覚える人はそうそういないはずです。
これは、日常的に目にしているため感覚的に慣れているからです。
 
同じように「茶色の土木と緑の草葉」も、気持ち悪いと思う人は少ないはずです。
 

自然の色はとても馴染みます

人間は無意識のうちに自然物の配色を違和感がないものとして受け入れています。
配色が思いつかない時は、自然物の配色を真似することが有効です。
 
 
 

暖色・寒色をはじめとする色ごとのイメージ

色にはそれぞれの色が持つイメージというものがあります。
 
見せたい内容に合わせて適切な色を選ぶと、それだけで説得力はとても向上します。
例えば赤系の色は「食欲・情熱・積極性・活発・社交的・注意喚起」といった印象をもたせることができます。逆に、色相環で反対に位置する青系の色は「冷静・洗練・清潔・信頼・安全」という印象を与えます。
 
 
よく挙げられるのが食べ物の色についてです。
ハンバーガーのバンズが紺色、お肉が水色だったら、味はまともだよと言われても多くの人は口にするのをためらうと思います。そのため、飲食店の写真は白色電球や蛍光灯ではなく、赤系・オレンジ系の温かみのあるライトの下で撮るのが基本です。
 

食べ物は赤系の色のほうが食欲を刺激します

他の代表的な色では、緑系が「自然・安定・健康・若さ・調和」というイメージ、ピンク系が「可愛さ・好意・女性的・優しさ」というイメージになります。
 
 
また、色のトーンが明るいと傾向として「平和・明快・清楚・新しい」という印象を持ちやすく、トーンが暗いと「落ち着き・気品・安定・古風」という印象になります。
子供向けの服に明るいものが多く、老年の方向けにはシックな服が多いのはここからきています。
 
 
その他、大きい黒塗りは「不安・悪いこと・悪いもの」を表現する方法としてよく使われます。
「不安」の黒と「注意喚起」の黄色を組み合わせると…
工事現場や輸送トラックなどで見る立入禁止・危険物のカラーリングになりますね。
 
 
見せたい相手やターゲットにしたい性別・業種・年齢層などで適切に選んでいくことで、よりわかりやすく、違和感のないものに仕上がります。
 
 
 
余談ですが、当サイトはやはり会社の顔となりますので、信頼や安全、フォーマルさをイメージした紺色を中心とした配色になっています。
 
 
病院は清潔で健康なイメージを大事にしますので、一般的には水色や緑色を使うところが多くなります。その中でも、高年齢層の方をターゲットにしている病院は茶色系の色を混ぜるパターンもあります。
 
司法・税務といった業種は信頼第一のため、やはり当サイトと同じく紺を中心にした配色パターンが大半です。このように街中にある色は、結構なるべくしてその色が使われているのです…!
 
 
 

「目立てば良い」というものでもなく…

「こういう配色をした方がいい」があるなら、もちろん「こういう配色は絶対にやめたほうがいい」というものもあります。わかりやすいものは「ハレーション」という現象を発生させている配色です。
 
 
ハレーションとは、色が強すぎるために配置したものがぼやけたり不鮮明に見える現象のことを言います。いまひとつピンとこないかもしれませんので、実例を用意しました。
 

ハレーション

 
…どうでしょうか。
上半分は、正直見続けているのが辛く感じませんか?
 
目立たせたいから強い色を使いたい、という気持ちはもちろんわかりますが、
適切に使用しないと思わず目を背ける配色になってしまいます。
目をそらされてしまっては、せっかくの目立つポイントが完全に無駄になってしまいます。
 
こういったときには、白・黒を使って打ち消すのがセオリーです。
白・黒は他の色と違い「トーンの明るい・暗い」の影響を非常に受けにくい色です。
白なら白に近い色、黒なら黒に近い色に合わせない限り、だいたい良い方向に働きます。
 
 
 

とはいえ、やっぱり決めかねる・・・

そうは言ってもプレゼン資料とホームページはやっぱり違うし、上手くバランスが取れない…
もちろん、そういったお悩みの方もいらっしゃると思います。
 
エグゼクティブクリエイションでは、WEB業界に10年以上在籍し、時代ごとのトレンドとともにデザインをこなしてきたベテランスタッフが常駐しております!
 
「お考えのテーマや会社の方向性に合わせたイメージ」を的確にご提案することができますため、どうしてもお悩みが解消できない時にはぜひご相談下さいませ!
 
 
 
---------------------------------------------------------------

サイト制作をこれから行うなら、

エグゼクティブクリエイション!
---------------------------------------------------------------
◇webサイト制作/運営に関する
 お問い合わせはコチラ
TEL:   03-5839-2512
FAX: 03-5839-2513
topshitabana03.jpg
------------------------------------------------
 

 

まずはお気軽にお電話下さい!是非ホームページ作成、リニューアル等に関しお問い合わせ下さい。
メールでのお問い合わせ:info@mail.exe-creation.com
お電話でのお問い合わせ:03-5839-2512【受付】10:00〜18:00(土日・祝祭日除く)