知らないと損をする売上を上げるための色彩設計とは？

売れるために必要なこと

モノが売れるための要因って沢山ありますよね。
商品そのものだったり、価格だったり、素敵な写真だったり、人を引き付けるキャッチコピーだったり…。一つだけじゃない、相乗効果で上がったり下がったり。
でも、商品が同じでも、価格が同じでも、写真が同じでも、キャッチコピーが同じでも、色が違うだけで、購買意欲って変わるんです。

【引用元：Why All Sale Sings Are Red】（翻訳は弊社でおこなっております）

上記の図表では、人の購買が何を判断軸になされているのかがまとめられています。これによると、なんと84.7%もの人がものを買うときに色を第一の理由としていることが分かります。そして62～90％の人は「色のみ」に基づいて購入判断しており、その時間もわずか90秒とのことです。このことから、色彩が購買意欲にいかに密接にかかわっているということが、よくわかると思います。

そして、ランディングページのデザイン制作においても、サイトの色彩は非常に大きな要素です。例えば、見込み客の嗜好やブランドイメージと合わない色をメインカラーに選んでしまうと、それだけでコンバージョンは大幅に下がるといわれています。
では、その重要なファクターである色彩について、掘り下げてみましょう。

人の心と色の関係

色彩によって、人の購入意欲が左右されることについては、先ほど述べました。それはつまり、色を見ることで特定の感情を引き出されたりする、情動の働きが存在しているということです。
情動の働きには、表現感情と固有感情の二つが存在します。
表現感情は、好き・嫌い、かっこいい・ダサいといった、個人差がある感情のことを言い、固有感情とは、暖かい、冷たい、明るい、暗いといった、誰もが同じように感じる感情のことを言います。

また、固有感情には、連想作用と体覚作用の2種類があります。連想作用とは、赤は炎、青は水、緑は新鮮、白は純真、清潔、といった、色を見ることで頭に思い浮かべるイメージ。体覚作用とは、赤は暖かい、青は冷たいといった、色を見ることで生じる感覚です。そして、この２種類の固有感情こそ、マーケティングに使える色彩についての定石を司っているといってもよいでしょう。

ただしここで一つ注意が必要で、色に対する印象は、文化の違いや人々の性格の違いによって変わります。例えば、アメリカとインドの色彩感覚はことなりますし、日本とアメリカも、異なる部分は存在します。例えば、日本では太陽と言えば赤ですが、アメリカでは、太陽は黄色です。

ちなみに、下の図はアメリカのウェブマーケティングで一般的とされている色彩心理となりますが、これは日本でも応用できる部分ではないかと思います。

配色の大原則

ところで、あなたは、色数が多く、ごちゃごちゃした印象をもつサイトから、物を買いたいなって、思いますか？それとも、まとまり感のあるスタイリッシュなサイトから、物を買いたいと思いますか？
もちろん、何を買うかにもよると思いますし、好みにもよるとは思いますが、個人ブログの雰囲気をもつサイトから、高価な物を買おうとは、なかなか思えないものです。
さらに、冒頭でもお話ししたように見込み客の嗜好やブランドイメージと合わない色をメインカラーに選んでしまうと、それだけでコンバージョンは大幅に下がるといわれていることから、サイトデザインをする際、テーマの色を決めて、それをもとにデザインを進めることが重要だということは、お分かりいただけるのではないでしょうか。

そこで、質の良いサイトデザインをする際のポイントとなるものをお伝えします。
サイトデザインをする際、使う色は、3色をベースに考えます。

ベースカラー（70％）背景など、広い面積の色彩を彩る色

この色は背景になる色なので、主に白や薄めの色を使用する事が多いですが、最近は写真の背景などを多く使って、白文字を埋め込んでいるサイトもよく見かけますよね。
ただ、背景が濃いと書いてある文字が読みにくくなりやすいし、文章自体が頭に残らないこともあります。ですから、写真メインで、印象だけ残したいという場合を除き、薄めの色をベースとしたほうがよいでしょう。

メインカラー（25％）そのサイトの主軸、テーマとなる色

この色が一番の決め手と言って過言ではない、ページ全体の印象を決める色となります。ブランドカラーやターゲットの好みやすい色、商品や商材のもつイメージカラー（ビジネス系、信頼感のある雰囲気→青系。20代若い女の子、かわいらしい印象→ピンク系。自然、天然→緑または茶色など）で決めるといいでしょう。

アクセントカラー（5％）強調したい部分などに使用する色

特に強調したい部分などに使用することになるため、メインカラーと同系色だと、色味がアクセントとして効かないので間逆の色を選ぶと良いです。例えば、メインカラーが「青」であれば、アクセントカラーは「赤」「オレンジ」等、まったく違う色味のものを選ぶ、または、同系色でまとめたいときはメインカラーよりもワンランク濃い色を使用するとメリハリがつきます。

色数が少なければ、まとまりのあるサイトになります。もちろん、配色が3色のみではすごくシンプルですし、ランディングページなど、長いサイトになってしまうと、色数が単調で飽きが来てしまうこともあります。色数が足りない！となってしまった場合は、メインカラー、とアクセントカラーを分割して色味を増やして下さい。
その場合の原則は、「色味」か「濃さ」どちらか同じもので、分割することです。また、うまく分割すれば、色を増やしても統一感はでるので、ごちゃついた印象が少なく、まとまった印象を保てます。

Aは基本、Bはメインカラーを２つに分け青色の色合いを増やしたもの、Cは色数を限らずに、色々使用したもの。さて、どれが読みやすいでしょうか。書かれている内容が頭に入ってくるのは、どれでしょうか？

サイトのコンセプトにぴったりの色を選ぶ

さて、重要なのは、自分のサイトを訪れる客層やサイトコンセプトにピッタリの色を選ぶこと。でも、そんなこと言っても、どう選んでいいのかわからない。
そんなあなたに、色彩決定のヒントとなるサイトをいくつかご紹介いたします。

Dribbble Colors

https://dribbble.com/colors/

ユーザーインターフェース向けインスピレーションを探すときに便利なサイトのひとつ。特定の色を他のデザイナーがどのように使用したのか、視覚的に調べたいときに使えるフィルタリング機能も実装されています。
同時に、一枚の画像に特定の色が使用されている割合も調整することができます。（以下でスクリーンショットでは、うすい緑色15%）

Material Design Color Tool

https://material.io/color/#!/?view.left=0&view.right=0

Google のマテリアルデザインの配色を使って、UIデザインにあったカラーパレットを作成、共有でき、あらゆる色の組み合わせを表現が可能なツールです。直観的に色を選ぶだけで、サイト全体の雰囲気を確かめることが出来ます。

Color Palette Generator

http://www.degraeve.com/color-palette/

イメージ写真のURLを打ち込むとそれに合った配色マルチカラーパレットを作成、提案してくれます。なんとなくこんなイメージ…と決まっているときに便利なアイテムです。

Cohensive Colors

http://javier.xyz/cohesive-colors/

統一感のある配色カラーパレットをボタンクリックのみで生成できるツール。色数を増減させたり、特定色をオーバーレイで重ねるなどシンプルで、効果的なツール。

CVボタンは目立ってこそ意味がある

さて、ここまでで、色の重要性、そして、どうやってまとまりのあるサイトを作っていくかをお伝えしました。次に重要となってくるのは、いかにボタンをクリックしてもらうかということです。そこで大切になってくるのは、「違和感」です。
下の図をご覧ください。

A、Cは、本文に対して、違和感があるため、ボタンが自ずと目に留まります。
しかし、Bは多少の違和感はあるものの、本文に溶け込んでいるので、ボタンとして認識しづらく、見過ごされがちになってしまいます。
CVボタンは、周囲に埋もれない色を使用することがとても大切です。
一般には、赤、オレンジなどの暖色系が、人に行動を起こさせるカラー、購買色といわれ、クリック率が高いとも言われていますが、弊社では、特に物販物は価格を赤系の色で表示することが多いこともあり、そこに一緒に並べるボタンは、緑のCV率が高くなっています。(2018年1月時点)