Webサイトの配色はサイトを作る上で誰もが悩む最後の難関です。
『自分の考えた印象を与えられるのだろうか？どの配色ならコンバージョンが取れるだろうか？』など、誰もが考える悩みということは間違いありません。
そこで、今回ご紹介するのが色の基本パターンと色が与える心理的効果です。
これはWeb制作の初心者からベテランまで誰もがすぐに実践できるので、大きな力添えになること間違いなしだと思います。
今回、私は数多くある視覚効果のサイトの中から、みなさまのwebサイトに活かせるものを厳選しました。Webサイト改善に直結するテクニック、色の持つ複数のイメージや心理的効果について述べていきます。実際、この方法を使うことで、他の人に自分のサイトが受けること間違いありません。
▼目次
Webサイトの基本配色の決め方
配色のが大切な理由
テクニック① 『70:25:5の法則』を使おう
テクニック② 『色は3から4色にとどめよう』
テクニック③ 『成功する6つの配色パターン』
テクニック④ 『色が持つイメージ』
色相調整のおすすめサイト
まとめ
配色が大切な理由
この図を見ていただいたら分かる通り、配色とサイトのデザインにより半数の消費者は訪れなくなる。人は視覚からの情報が87パーセントと言われています。最初は見た目で決まります。いくら良い文章でも見た目が悪ければ文章まで辿り着かないのです。つまり、webサイトが見やすければ内容を読んでもらえるということなのです。
引用元：http://www.webcreatorbox.com/webinfo/how-important-web-design/
Webサイトの基本配色の決め方
一般的に配色は『色相環』を元に考えると簡単です。配色のパターンは大きく分けて三つです。同系色、反対色、トーンでまとめる。ではその三つがどんなものか、特徴と図を踏まえて見ていきます。
同系色
同一色相
色相が全く同じで、明度、彩度などの要素を変化させた色との組み合わせ。
例：青と薄い青、緑と薄い緑
隣接色相
色相が隣り合っているもの同志の組み合わせ。
例：赤とオレンジ、水色と青
類似色相
色相は少し遠いが、似ている色同志の組み合わせ。
例：黄色と緑、青とシアン
反対色
補色色相
色相環で、反対側に位置しているもの同志の組み合わせ。
例：赤とシアン、青と黄色
対照色相
色相環で正三角形を置いた時に、２点に位置するもの同士の組み合わせ。
例：青と緑、緑とシアン
中差色相
色相環で直角に位置するもの同士の組み合わせ。
例：赤と紫、青とシアン
トーンでまとめる
類似トーン
トーン（明るさや鮮やかさなど）が同じ、または似たもの同士の組み合わせ。色の印象を揃えるため、おさまりの良い配色となります。
対照トーン
トーンが異なるもの同士の組み合わせ。色相が近いもの同士が組み合わさった時のアクセントとして有効です。
参照元：http://color.eweb-design.com/0107_crc.html
『70：25：5の法則』を使おう
色のバランスどうしよう？って頭を悩ます方多いですよね。そんな時に使える、色の配色バランスを紹介したいと思います。それぞれの割合を75パーセント、25パーセント、5パーセントに割り振るとバランスよく見えるという法則です。それぞれの色の選び方は以下のようなものがおすすめです。
引用元：http://handywebdesign.net/2012/07/12colors-give-you-the-impression/
色は3から4色にとどめよう！
ひとつのwebサイトに違う色相をたくさん使うと、どうしても雑多でまとまりのない印象を与えてしまいます。配色に自信のない場合は、使う色相を3色以下から始めてみましょう。また、ベースカラー、サブカラー、アクセントカラーというように使う分量を上記の『70：25：5の法則』で変えると、メリハリのあるweb配色になります。3色が難しいと思う場合は2色から始めてもいいと思います。2色の場合は半分ずつにならないようにどちらかにメインを置きましょう。
引用元：http://www.lipton.jp/
参照元：http://blogs.yahoo.co.jp/six_changer/2601739.html
成功する6つの配色パターン
コンプリメンタリ―カラーは、カラーウィール上で対局にある色の組み合わせです。
コントラストがはっきりするのでインパクトを強くできます。
店舗デザインではメインカラーを決定して、デザインを強調したいポイントに対局の色を使うと効果的です。
アナロガスカラーは、近い色同士の組み合わせを使うことで視覚的に柔らかい雰囲気をつくることができます。
トリアディックカラーはカラーウィール上で３つに色を使って、正三角形になるように配色するものです。
これは最も基本的な配色になります。
スプリットコンプリメンタリーカラーは、対局の色の組み合わせの強いコントラストを少し柔らかく見せる手法です。
レクタンギュラ―は、コンプリメントカラーを２つ組み合わせる配色パターンです。
色彩が豊な表情をつくることができます。
スクエアカラーは、カラーウィール上で四角形になるように配色されるパターンです。
かなり強いインパクトを与えたい時に使用します。
使い方を間違えると、ごちゃごちゃするだけの印象になってしまうので注意が必要です。
店舗のデザインは、お店を利用するお客さま、働くスタッフの五感や精神を刺激する大きな影響力を持っています。
参照元：http://support-full.jp/blog/cat13/post-70.html
色が持つイメージ
色が持つイメージを理解することにより、自分がイメージしている印象により近い配色にすることができます。ぜひ、下記の色のイメージを参考にし、メインカラーを決めてみてください。伝えたいメッセージが伝わりやすくなります。
赤色
【イメージ（象徴）】生命・活動的・情熱的・衝動的・破壊・暴力
【心理的作用】生きる力や性を表していることから、神経を興奮させる・元気を出すという効果がありますが、悪い意味では闘争心を出したり短気になったりするという一面もあります。意欲を出させる色なので、スポーツで赤を身につける人も多いです。他にも購買意欲を出すために店でも良く見かけますね。その他にも、暖かく感じたり、時間の経過を早く感じさせたりといった効果もあります。とにかく赤は生命・活動の象徴です。
橙色
【イメージ（象徴）】家庭・仕事・自由・暖かい・深い知恵・推察力
【心理的作用】橙（オレンジ）は解放感を与えて、楽しい気分にさせる色です。また食欲を促進させる色としても有名なので、飲食店や商品のパッケージには橙などの暖色系が多く使われています。赤に比べて少し柔らかい色なので、赤の積極的なイメージから一歩引いた「思いやりがある・親しみやすい」といった意味合いもあります。確かに夕焼けの色もほわーんとした光で癒されて思わず見てしまいます。
黄色
【【イメージ（象徴）】好奇心・向上心・知識・幸福・軽快・カジュアル
【心理的作用】黄色は暖色系の中でも特に明るく感じられる色の通り、集中力を高めたり気分を明るくする効果があります。他にも注意を促すといった警戒色の効果もあるので道路工事や踏切などでもよく見かけますよね。自信や元気がない時に、黄色いものを身につけると気分も明るくなるそうなので一度試してみてはいかがでしょうか。
緑色
【イメージ（象徴）】穏やかさ・調和・自然・平和・バランス・協調
【心理的作用】興奮を静めたり、集中力を増す効果があります。また遠くの緑を見ると目に良いと言われていることからも分かるように、目の疲れを癒す効果があります。また協調性を表し、運気が向上するために資金が集まる色とも言われています。なんだか願ったり叶ったりな色ですね。まさに自然を象徴する色なので、気持ちが落ち着くのんびりした気分になれます。ナチュラルな感じを出したい時にはぜひ使いたい色です。
青色
【イメージ（象徴）】平和・安全・冷静・誠実・清潔・若い・爽やか
【心理的作用】興奮を抑え、冷静にさせる作用があります。青は情熱を意味する赤とは反対に、涼しさや爽やかさ、知性や冷静を感じさせてくれる色です。空をイメージさせる色であることから航空会社（イメージカラーや飛行機の色）でも良く使われています。航空会社以外にも、涼しさを感じさせる清涼飲料水（ポカリスエット）や海を連想させる塩味の商品にも青い色がよく使われていますね。夏では「涼しさを感じさせる色」として青が使われ、冬では「季節感（寒さ）を表す色」として青が使われています。季節に応じて違った意味合いで使われる色です。
紫色
【イメージ（象徴）】高貴・優雅・魅力的・非現実的・霊的・神秘
【心理的作用】想像力をかきたてたり、感受性を高める効果があります。芸術的な意味合いもあるので、自分の中の感性を引き出したりする色です。紫と聞いて連想できるものが他の色と比べて少なく、抽象的な意味合いで連想されることが強いようです（スピリチュアルや芸術の世界など）。悪い意味だと、青でもなく赤でもないイメージから内向的・不明瞭といったイメージも持っています。紫に関する色は全般的に高級感や上品さを表すものが多いため、他の色のバランスに気をつければ視覚で印象に残りやすいで
白色
【イメージ（象徴）】清潔・潔さ・美しさ・純粋・神聖・天国
【心理的作用】汚れていないというイメージから、清潔感・純粋さを与えてくれる色です。そのため病院や飲食店では白い制服が使われていることが多いですよね。その他には、ものを軽く感じさせたり、気持ちをリセットする（始まりを感じさせる）という効果もあります。日本人が好む色のひとつで、商品のカラーバリエーションの中には白が入っていることが多いですね（車なんか特に）。明度が高く光を反射する色なので、明るいイメージで使われることがほとんどですが、悪いイメージだと無機質で空虚感を感じさせる色なので多用は禁物です。
灰色
【イメージ（象徴）】調和・憂鬱・不安・過去・薄暗い・思い出
【心理的作用】黒でもなく白でもない位置なので、割と象徴するイメージは暗い感じのものが多いですが、バランス感覚に優れ人との関わりが上手な人が好む色だと言われています。はっきりしない色のイメージから、控えめで平凡な印象を与えます。またその意味の延長線上で、上品で落ち着いたイメージも兼ね備えています。灰色は無彩色で、他の色とも相性が良いので合わせて使うことによって効果が発揮される色です。薄い灰色は目に優しく控えめな印象のため、ＷＥＢデザインでも背景に多用されています（このサイトも背景は薄い灰色です）。
黒色
【イメージ（象徴）】暗闇・死・恐怖・悪・沈黙・高級感・男性的
【心理的作用】黒は全ての色を吸収した色といわれていて、何かを秘めた印象や影のある印象を与えます。また男性的で威厳のある感じや、都会的で洗練された印象も与えます。白はものを軽く見せる効果があるのとは逆に、黒は重く見せる効果があります。死を表す色であることから、葬式でも必ず使われる色ですね。黒は一番有彩色を引き立てる色で、明るい色は特に引き立つので相性が良いとされています。
銀色
【イメージ（象徴）】冷たさ・金属・洗練・硬い・上品
【心理的作用】灰色と似た印象効果を持っていて、上品で落ち着いた印象、また洗練された都会的な印象を与えます。金色に比べて控えめな色なので、派手ではなく、かつ高級感を持つ色です。「銀座」という地名は、実際に銀貨にまつわる名前の由来があるようですが、「銀」という色が持つイメージも相まって自然と高級な印象を受けると思います。自然界では少ない色なので、人工的な印象も与えます。
金色
【イメージ（象徴）】成功・高級・富・頂点・輝き・豪華
【心理的作用】派手で目立つ色、また高価の象徴であることから、特別なものや高級感といった印象を与える色です。お金や富を連想させ、豊かさを感じさせてくれます。歴史的に見ても、富や豪華さを表すために建築や宝飾で金が多く使われていますね。欲を満たすといった気持ちを満足させる意味合いが強い色です。ただし金などの派手な色は使いすぎると、高級なイメージから低俗なイメージ（物欲）に変わってしまうので注意が必要です。
参照元：http://handywebdesign.net/2012/07/12colors-give-you-the-impression/
配色を決める時のおすすめサイト
配色を決める際、中々イメージをしにくかったりしますよね。そんな時に使用し易いサイトを厳選しました。ぜひ、使ってみてください。
ウェブ配色ツール Ver2.0
http://www.color-fortuna.com/color_scheme_genelator2/
Adobe Kuler
https://color.adobe.com/ja/create/color-wheel/
HUE/360
http://hue360.herokuapp.com/
まとめ
本日は、Webサイト改善に直結するテクニック、色の持つ複数のイメージや心理的効果について述べてきました。実際、この方法を使うことでまとまった配色、他の人に自分のサイトが受けること間違いありません。以上のことをすれば人に受ける基本色を導き、そこからまとまりのあるサイトにできます。