Webデザイン 配色をイメージで学ぶ【基本11色】

こんにちは、高橋です。

近頃、ユーザが製品を経験してどれだけ満足を得れるのかといった仕組みが注目を浴びています。UXですね。配色もUXの範疇とすれば、理解を深めておいて損はないと思います。今回は基本的は色と使われるWebサイトのタイプも併せてザックリと紹介していきます。

・色紹介

◯赤（Red）

情熱や活気といった気持ちを高ぶらせる色です。
インパクトを与えたいイベント・キャンペーンサイトで使われています。またサイトカラーだけでなく、強調したいコンテンツ・危険を促す削除ボタン等にも使えます。艶のある赤は上品さを感じさせますが、使い過ぎると落ち着きのない雰囲気になってしまいまいます。反対に暗い赤は気持ちを落ち着かせる効果があります。

◯緑（Green）

健康や自然といった癒しを連想させる気持ちを落ち着かせる色です。
自然やエコをモチーフとしたサイトで使われています。また安心のカラーとも呼ばれ、保険に関するサイトでも使われています。また2009年の話ですが、緑のボタンはコンバーション率が高いなんて統計（http://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/）もあるようです。

◯青（Blue）

信頼や知性といった誠実な印象を与える色です。
信用のカラーとして多くの法人サイトでよく使用されており、コンセプトカラーとしては最も使用されている有彩色だと思います。ITとも相性が良いですね。ただ寒色は食欲を抑えますので、料理系のサイトとは相性が良くないです。ということは逆にダイエット系には向いているかもしれません。

◯黃（Yellow）

希望や快活といったとても元気なカラーです。
黄色は有彩色の中で最も明るく子供向けコンテンツに向いています！少し彩度を落とした黄色なら黒との相性が良く冒険や刺激といった雰囲気を連想させます。しかし、お金を扱うコンテンツではそういうつもりがなくても怪しい雰囲気になるかもしれませんので気をつけましょう。それから黄金色はビールを象徴する色であることは忘れてはいけないでしょう。

◯橙（Orange）

陽気や好奇心といった活発にさせる印象を与える色です。
最もバランス良く購買欲を高める色です。スーパーのチラシでは赤と黃の組み合わせが多いですが、これでは激安という印象が先行してチープな印象を与えてしまいます。その両方をうまい具合に表現してくれるオレンジはショッピングサイトでよく使われています。また明るい青とは南国をイメージさせるため夏のイベントサイトなど抜群の相性でしょう。

◯ピンク（Pink）

可愛らしさや幸せといった甘いイメージを与えるカラーです。
ふんわりとした明るいピンクは女性向けのサイトでよく使われてます。ただ、ピンクは開放感のある色ですので真面目なコンテンツでバシッとキメるのは難しかったりします。色からそれますが、その際は角のあるレイアウトで緊張感を出すと良いかもしれません。

◯茶（Brown）

木や土といったズッシリとしながらもぬくもりを感じさせるカラーです。
木の素材感を出したいサイトでよく使われています。また自然を連想させる緑との相性が良く、生命を表現しやすいと思います。また伝統的といった渋いイメージに最適です。

◯紫（Purple）

神秘や魅力といったムードを感じさせるカラーです。
Webデザインではあまり使う機会がないかもしれません。これはよく言われることですが、青と赤の二面性を持つカラーなので印象がその時の気持ちで変わったりして不安定です。それが逆に不思議と感じられるのが紫の魅力だと思います。占い系のコンテンツでは定番のように使用されます。また渋めの紫は和のイメージを持つため例えば京都に関連するコンテンツには使えると思います。

◯白（White）

純粋や平和といった神聖なイメージさせる色です。
潔癖なイメージから病院や医療機関を思い浮かべる人は多いと思います。また白は膨張色でありベースにするとそこに広い空間があるようにも感じられます。不動産関連のサイトもそうですが、間取り図が白塗りなのはそのためのように感じられます。

◯黒（Black）

恐怖や絶望といった不安をイメージさせる色です。
謎やホラーを題材としたコンテンツで使われます。ネガティブな印象の反面、デザインでは有彩色とのバランスを保つとても重要な色となります。また黒という性質上どんな色とも相性が良いです。ですが、カラーバランスが自然でもメインカラーが黒に近づいた時の雰囲気は思い描いているイメージと離れているかもしれません。黒をたくさん使うと途端に難しくなります。

◯灰（Gray）

無機質や調和といった控えめな印象の色です。
バランスが良くシンプルなサイトに仕上げたい時に便利で、多くのサイトで使用されています。また質感を硬くして艶を出せば途端に高級感が出ます。さらにWebサイトの『一工夫欲しいな』という場面にサッと馴染みます。表の偶数行のみ薄いグレーにする。無効なボタンなら濃いグレーにする。といった感じです。

・配色について

配色の選定は、例えばメインカラーを1つ選び類似色3つにアクセントカラー1つを探すといったルールはどうでしょうか。中々バランスのよい配色に仕上がると思います。

まずメインカラーを1つ選び（上品な赤）、それから類似色3つ（渋い赤、くすんだ赤、暗いオレンジ）にアクセントカラー1つ（深く暗い緑）を探す。

Web上に便利なジェネレータや参考になる配色が公開されているので積極的に活用しましょう。

◯ウェブ配色ツール Ver2.0

リアルタイムでプレビューが確認できていい感じ

http://www.color-fortuna.com/color_scheme_genelator2/

◯kuler

レートで並べたりするとイケてる配色がチェックできていい感じ

https://kuler.adobe.com/

・まとめ

とりあえず11色紹介してみましたが、どうでしょうか？面白かったなら良かったです。

色の性格をある程度把握していれば「ここのヘッダは青ベースだな〜」とか「ここの背景は#fdfcfcにノイズつけたぐらいが自然かなぁ」というのがパッと思い浮かびます。組み合わせによっては全く新しい印象を与えることもあるので色は奥が深いし面白いですね。