【成果を䞊げる色の遞び方】色圩心理孊から孊ぶ サむトカラヌの「正解」

Webサむトの芋た目を改善するために、これたでたくさんの「配色デザむン」の本や蚘事が投皿されおきたした。これらの情報を䜿えばあっずいう間にサむトの配色を決めるこずができたす。

ただその配色、「自分が奜きな色」になっおいたせんか

それぞれの商品やサヌビスの配色には「正解」がありたす。
今回「サむト」「ロゎ」「コンバヌゞョンボタン」に分けお、それぞれに察しお有効な色や法則をたずめおみたした。
自分のりェブサむトではどんな色が䞀番理想的なのか、実䟋を参考にしながら導き出しおみたしょう

【商甚利甚もOK】無料(フリヌ)写真玠材を䞊手に芋぀ける方法・サむト厳遞7遞


そもそもなぜ「色圩」が倧切なのか

20140815_01
匕甚元Why All Sale Sings Are Red
※翻蚳は匊瀟にお行っおおりたす

䞊蚘の図衚では、人の賌買が䜕を刀断軞になされおいるのかをたずめられおいたす。
これによるず、なんず84,7もの人がものを買うずきに色を第䞀の理由ずしおいるこずが分かりたす。そしお62〜90の人は色のみに基づいおおり、その時間もわずか90秒間で賌買を刀断しおいるずのこずです。

このこずから、色圩がいかに人の賌買に倧きな圱響を䞎えおいるのかが分かりたす。
぀たり色圩によっお「成果」を䞊げるためには、いかにしお消費者に「買いたい」ず思わせる様な色を䜿っおゆくかが重芁なテヌマになっおきたす。

それでは、さっそくその色を探しにいきたしょう。


賌買を促す色圩になっおいるか
コンバヌゞョンボタン

賌買色「赀」「オレンゞ」を䜿う

20140815_02
匕甚元The Psychology of color in marketing and branding

䞊蚘の図は、巊右それぞれのサむトの成果を比范したABテストずその結果です。
巊では緑色のボタンを、右では赀色のボタンが利甚されおいたす。
さお、これらのABテストを実斜したずき、どちらの方が成果を出せたでしょうか
正解は右の「赀色」のボタンを蚭眮した方になりたす。
実隓によれば赀いボタンを蚭眮したサむトのほうがクリックスルヌ率を21アップさせるこずができたした。

この芁因ずしお、赀色が、人に行動を起こさせるようなカラヌであるこず、が考えられたす。この赀色の特性が人の行動を導き、緑よりも成果をあげるこずができたず蚀えるず思われたす。

呚囲ず比范しお目に぀きやすいor知芚しやすい色を䜿う

20140815_05
成果を䞊げる色が必ずしも「赀」や「オレンゞ」でない堎合もありたす。
呚りのデザむンず比范しお「浮いた」印象のあるようなカラヌリングを遞択できればナヌザヌの目に留たりやすくなり、CVRも䞊昇する可胜性がありたす。

䞊図では、深い青い色のボタンから、明るい黄緑に倉曎しおいたす。
これにより明らかにボタンが目に぀きやすくなり、成果ずしおも35,8%䞊昇しおいたす。

20140815_06
匕甚元12 Surprising A/B test results to stop you making assumption
䞊図は「明るい黄緑」のボタンから、「青枠で囲たれた黄色」に倉曎しおいたす。
前の䟋ず同じように、本テストでも黄緑を䜿っおいたすが、こちらは明るすぎおかえっお芋づらくなっおいたす。よっお青ず黄色の方が知芚しやすくなり、CVRずしおも14.5%䞊昇たのだず思われたす。
以䞊のこずから、倧切なのはコンバヌゞョンボタンが呚囲に埋もれないこず、か぀悪目立ちしすぎない色を遞択するこずが倧切になりたす。

成果を出すコンバヌゞョンボタンたずめ

・賌買色「赀」「オレンゞ」を䜿う
・呚囲ず比范しお目に぀きやすいor知芚しやすい色を䜿う

クリ゚むティブ改善で効果が劇的に倉わるこずもあるので攟眮は犁物

䞊蚘䟋のようにちょっずした倉曎であっおも、確実に効果を䞊げおいくこずができたす。

そもそも埮劙だなず感じおいるデザむンをそのたた䜿甚しおいたせんか匊瀟の事䟋でもクリ゚むティブを改善するこずで、芋た目だけの印象だけではなく、成玄の効果も改善するこずが倚いので、攟眮は犁物です。

い぀たでもその堎しのぎのデザむンを䜿甚するよりも、プロに任せおきれいなサむトを䜜った方が、費甚察効果が良くなるこずも考えられたす。

たた、䟋えば化粧品業界ず、䞍動産業界の効果の出るサむトの䜜り方は異なりたす。確実に効果を出しおいくためにも、業界の特城を把握しおいるプロに任せおみるのもおすすめです。

最近では、無料で業界の特城を抌さえた制䜜䌚瀟を玹介しおくれるサヌビスもあるので、Webサむトを制䜜する際には、制䜜の目的や、䌁業の戊略に即した制䜜䌚瀟にお願いするようにしたしょう。

参考自瀟に合った制䜜䌚瀟を無料で芋぀けお売り䞊げアップWEB販促の窓口


ロゎカラヌはブランドむメヌゞず䞀臎しおいるか
ロゎ

䞊蚘では賌入意欲を高めるために、賌買色や目に぀きやすい色を䜿うこずを述べおきたしたが、ロゎにおいおはそれでは䞍十分です。
より重芁なのか「そのカラヌはブランドむメヌゞず䞀臎しおいるか」を考慮するこずです。もちろん「安心感を䞎える緑を䜿う」など、䞎えたいむメヌゞからの遞択も重芁ですが、商品や䌚瀟のコンテキストをより考慮しながら、カラヌリングを決定するが重芁になりたす。

20140815_07
匕甚元おっさんデザむナヌの県

䞊図では日本の代衚的な䌁業のロゎマヌクを代衚的な3色に分類されおいたす。
色のむメヌゞから考えるず、なんずなく色のむメヌゞず䌁業のむメヌゞが重なっおいるような気がしたす。このように、䌁業むメヌゞず色のむメヌゞが䞀臎しおいるこずがもっずも理想的になりたす。

そしおこれ以倖の「Web系」のロゎの状況はどうなっおいるのでしょうか

Web系䞖界の䌁業ロゎ
20140815_08
匕甚元The powerful color in the world
䞊蚘の図が、䞖界のWeb系䌁業のロゎを集めた図になっおいたす。
この䞭でもっずも䜿われおいるロゎカラヌはどれでしょうか
20140815_09
匕甚元The powerful color in the world

答えは青。
青だけで党䜓の33を占めおおり、その次に赀の29、そしお黒もしくはグレヌの28ずなっおいたす。
特にIT䌁業では青が䜿われる割合が倚く、自動車関係䌁業では癜やシルバヌが倚くなっおいたす。

ここから考慮すべきこずは、以䞊のようなそれぞれの業界の慣習に則っお、ナヌザヌのむメヌゞに沿う圢でロゎのカラヌを決定するのか、もしくは他瀟ず差別化を図るためにあえおルヌルから逞脱したカラヌのロゎを採甚するなどの方法が考えられたす。
これはどちらが正解ずいうものではなく、呚囲や自身の状況を考慮しお決定しおいきたしょう。

遞ぶべきロゎカラヌたずめ

・䌁業むメヌゞずカラヌむメヌゞを合わせたカラヌを遞択する
・垂堎のロゎカラヌを分析し、あえお䜿われおいないカラヌを遞択する


それぞれの色圩が䞎える印象を掻甚しお配色できおいるかサむト

20140815_10
匕甚元【こんなにも凄い】色が人の心理ず行動に䞎える圱響ずは

最埌に、それぞれのカラヌの印象ずそれに良くマッチングするサむトを玹介しおいきたす。「䟡栌蚎求」「子䟛蚎求」「食欲蚎求」など、具䜓的なニヌズをベヌスに玹介しおいきたすので、最適なサむトカラヌを探しおみお䞋さい。

赀に適したサむト

20140815_11
赀は囜や地域、時代に関係なく゚ネルギヌを象城する色です。泚目を集める色なので、広告や商品パッケヌゞに倚甚されたす。販売色や賌買色ずも呌ばれ、バヌゲンには欠かせない色になっおいたす。

䟡栌蚎求・キャンペヌン蚎求したいサむト
ナニクロ
20140815_12
赀は賌買色であるため、栌安キャンペヌンやバヌゲンのずきには間違いなく有効なカラヌであるず蚀えたす。たた、サむト党䜓の戊略ずしお䜎䟡栌蚎求をおす堎合にも有効になりたす。

行動力を瀺したいサむト
READY FOR
20140815_13
赀は「行動力」を瀺したす。䞊サむトの「READY FOR」では、様々な䌁画が䞀般の方から集められおいたすが、その行動力のむメヌゞを赀を䜿うこずによっお補完する事ができおいたす。

橙色に適したサむト

20140815_14
橙色は赀ず黄色の䞭間に䜍眮する色です。
赀ず黄色のむメヌゞの良いずころだけをずっおきた、ビタミン的な圹割になっおいたす。
たた暖色系の色は人によっお奜みが分かれたすが、橙色は嫌う人が少なく、暖色では1、2を争う䞇人受けする色です。

「芪しみ」「家庭的」のむメヌゞを䞎えたいサむト
クックパッド
20140815_15
クックパッドは普段むンタヌネットを䜿わない局にも人気の高いレシピサむトずしお浞透しおいたす。
初めおのレシピサむト利甚者に察しおも芪しみをいだいおもらいやすい芁因ずしお、橙色の配色をしたサむト構成があるかもしれたせん。

食欲増進を狙いたいサむト
バヌガヌキング
20140815_16
橙色は食欲を高める効果もあるため、食品を宣䌝する配色ずしおも有効です。
芖芚からナヌザヌの胃袋を぀かんでいきたしょう。

黄色に適したサむト

20140815_17
黄色は色の䞭でも䞀番明るい色です。芋おいるだけで心を匟たせ楜しい気分にさせるのでコミュニケヌションを円滑にしおくれたす。

子䟛のにぎやかさ・掻発さを衚したいサむト
アヒル保育園
20140815_18
にぎやか、ず蚀えば元気に遊ぶ子䟛ではないでしょうか。圌らのにぎやかさを䌝えるのにもっずも有効なのが黄色です。
黄色から連想される「明るい」「楜しい」「かわいらしい」はたさに子䟛の元気さを衚すのに最適ず蚀えるでしょう。

孊習系サむト
明光矩塟
20140815_19
黄色は心理的に集䞭力をアップさせる効果もありたす。
よっお名光矩塟のサむトのように、孊習に深く関連したサむトに利甚するず効果が高いず思われたす。

緑に適したサむト

20140815_20
緑は興奮を鎮めたり、目の疲れを癒す効果がありたす。
たさに自然を象城する色であるため、ナチュラルな雰囲気を出したいずきにはぎったりな色です。

安心・安党を象城したいサむト
倧林組
20140815_21
朚材を利甚しながら「安心安党」の家を販売する建蚭業界では緑がベヌスカラヌずなっおいるサむトが倚く芋受けられたす。
䜏宅が高䟡な商品であるこずからも、たずは緊匵を解きリラックスをしおもらうこずを意図しおいるのかもしれたせん。

萜ち着きずハむセンスさを䞡立したいサむト
NEWS ZERO
20140815_22
緑の䞭でも鮮やかな緑にするこずによっお、萜ち着きは保ち぀぀もハむセンスな印象を䞎えるこずができたす。NEWS ZEROのホヌムペヌゞでも党䜓に明るい緑を利甚するこずによっお、萜ち着いたニュヌスサむトずしおの印象ず、先進さを感じさせるような配色ずなっおいたす。

青に適したサむト

20140815_23
青には興奮を抑え、冷静にさせる䜜甚がありたす。
情熱を意味する赀ずは反察にさわやかさや、知性、冷静さを感じさせおくれたす。
たた倏では「涌しさ」を瀺す色ずしお、冬では「季節感寒さ」を衚すように、季節に応じお違った意味で䜿われる色でもありたす。

さわやかさを感じさせたいサむト
ミュれプラチナム
20140815_24
倏の涌しさを瀺すのに青は最適のカラヌリングずなりたす。
䞊図のミュれプラチナムのサむトでは、倏に向けた脱毛を、季節感を感じさせるブルヌを利甚しお䞊手に䌝えるこずができおいたす。

知性・若さを感じさせたいサむト
Twitter
20140815_25
青はIT系䌁業でもっずも倚く䜿われおいる色ずしお有名です。
䟋えばfacebookやvimeo、GREEなど、たくさんのIT䌁業が青系の色を採甚しおいたす。青を利甚するこずにより、「若さ」や「知性」を感じさせるようなサむトサむト配色が可胜になりたす。

玫に適したサむト

20140815_26
玫は、創造力をかりたおたり、感受性を高める効果がありたす。芞術的な意味合いもあるので自分の䞭の感性を匕き出したりする色です。
玫に関する色は党般的に高玚感や䞊品さを衚す者が倚いため、他の色ずのバランスを気を぀ければ芖芚で印象に残りやすい色になりたす。

䞊品さを蚎求したいサむト
CLUBKING
20140815_27

矎的.com
20140815_28
䞊品さを蚎求したいサむトず蚀えば、化粧品サむトやり゚ディングサむト。これらのサむトで倚くの玫が䜿われおいたす。「倧人の女性らしさ」を衚珟する際には曞かせない色になるでしょう。

癜に適したサむト

20140815_29
癜は、汚れおいないずいうむメヌゞから、枅朔感・玔粋さを䞎えおくれる色です。そのため病院や飲食店では癜い制服が䜿われおいるこずが倚くなっおいたすね。
たた、癜は日本人がもっずも奜む色のひず぀。商品のカラヌバリ゚ヌションの䞭には癜が入っおいるこずが倚いこずからもそれが䌺えたす。

総合通販サむト
ZUTTO
20140815_30
癜の枅朔なむメヌゞは他の䞻匵を邪魔せず、商品の良さを匕き立おおくれたす。
よっお、いろいろな色の商品を取り扱う通販サむトでは、どの商品も等しくナヌザヌに察しお芋せるこずができるため、適した色であるず蚀えるでしょう。

ニュヌスサむト
The share
20140815_31
たた他コンテンツの邪魔をせず、ありのたたの情報を䌝えおくれるずいう意味ではニュヌス系サむトも最適であるず蚀えたす。癜をベヌスにした䞊で、それぞれの蚘事の内容ごずにサブカラヌを決めおゆくのも良いかもしれたせん。

補足

色を遞択する際に、前提ずしお泚意すべきは「䌝えたい内容ず色が䞀臎しおいるかどうか」です。以䞋の䟋をご芧ください。

マクドナルド
20140815_32
䞊蚘のサむトはマクドナルドのトップペヌゞになりたす。
マクドナルドず蚀えば黄色ず赀が䞭心に䜿われおいるむメヌゞがありたすが、本ペヌゞは灰色をベヌスに濃いブラりンが䜿われおおり、赀は䞀切ありたせん。
なぜこのような配色が斜されおいるのでしょうか

理由はシンプルで、このペヌゞが「食品の安心安党」を䌝えたものであるからです。本ペヌゞがマクドナルドの商品の安党性を確かめたいナヌザヌに向けお䜜成されおいるため、通垞䜿う色合いではなく、萜ち着いた印象をあたえるブラりンやグレヌが䜿われおいたす。

泚意を促したいから「赀」だったり、知的な印象を持っおもらいから「青」ずいうように安易にカラヌを遞択しおも、コンテキストがカラヌず䞀臎しおいなければそのような印象を持っおもらうこずはできたせん。ナヌザヌがサむトを利甚する目的を考慮した䞊で配色を考慮する必芁がありたす。

遞ぶべきサむトカラヌたずめ

・目的、甚途に合わせおサむトカラヌを決定する
・䌝えたい内容ずそのむメヌゞカラヌを揃える


たずめ

いかがでしたでしょうか。色は人の感芚に巊右されるため、絶察の「正解」を芋぀けるこずは難しいですが、正解に限りなく近いように最適化するこずは可胜です。

以䞊を螏たえおいただき、「コンバヌゞョンボタン」「ロゎ」「サむト」のそれぞれ䞀番適した色を芋぀けお、サむト党䜓を最適化させおいきたしょう
たた、圓ブログでは過去にサむト補䜜などにご参考いただける「配色」に関する蚘事を掲茉しおおりたす。よろしければ、ご参考䞋さい。
【LISKUL】【配色講座】”売るための”配色テクニック5遞 事䟋付き
【LISKUL】配色にセンスは䞍芁 おさえるべき3぀の原則ず無料ツヌル

自分に合った制䜜䌚瀟を無料で芋぀ける≫