WEB

成果が出るWEBサイトの配色の考え方とは

こんにちはNAOです。

今回はWEBサイトの配色について解説していきたいと思います。

 

皆さんはサイトを作成する時、依頼する時にどのように色を決めますでしょうか。

 

「なんとなく、良さそうだから」

「かっこいいから」「可愛いから」

「よくわからないけど、良さそうに見える」

 

と言った理由で決める方もいるのではないでしょうか?

もし今までそう言う感覚的に配色を決めているのでしたら今後はやめましょう。

 

何故なら、配色が及ぼす効果は絶大で、売り上げや、PVなどに大きく左右すると言っても過言ではないからです。

 

結論を言うと、配色は感覚で決める事ではないと言う事です。

そして、配色を決めるために、配色を決めたらダメだという事を理解していきましょう。

 

色を決める前に決める事

 

色には、その色から連想される言葉があります。つまり、色と言葉には、密接な関係にあるということです。

 

初めに色を決めてしまうと、どうしても決めた色の正当性を主張するために言葉を使用してします事がありがちです。

 

では、配色を決めるために、配色を決めてはいけないのなら、何から決めればいいのか?それは「キーワード」になります。

 

当然ですが、サイトやブログなどを作る際は、サイト上で発信したいキーワードがあると思います。つまり、「そのキーワードに親和性の高い色を選んでいく」という工程が正解になります。

 

さらに、キーワードは1つに絞り込まない事。というのも、伝えたいキーワードは、1つに絞り込む事は難しいものだからです。

 

CHECK1
あなたが高級な物を売っているとします。その商品は高価な物で、他社にはない魅力があり珍しい商品だとします。どのようなキーワードをサイトで表現したいでしょうか?

 

この例の場合、

高価な商品なので高級感を出して、さらに他にない商品なので先進的なイメージにしたい、その上で信頼感もあるイメージとなると思います。

こうなる事はありうる話ですし、それが普通の考えになります。

 

上記のCHECK1から、言葉(キーワード)があるから色を決めれるのであって、色から決めていくのは、とても違和感があると思います。

 

この違和感こそが、配色を決めるために、配色を決めないという理由になります。

では、もう一度CHECK1に戻ってさらに深掘りしてみてください。

 

CHECK1深掘り
高級感、先進的、信頼感というキーワードを訴求したいのでキーワードを訴求したいので、配色を考えてみてください。どのような配色がいいでしょうか?

 

このような手順でキーワードから配色を深掘りしていくと、より結果が出るサイトに激変するという事を忘れないでください。

 

クリックされやすい色は存在するのか?

配色についてもう1つ伝えておきたい話としては、

クリックされやすい色は存在するのか?ということになると思います。

 

以前、クリックされやすい色=赤と言われていました。

ですが、これまでの経験を考えると絶対的な法則ではないと思っています。

 

何故なら、そのクリックエリアを見る前にたくさん見ていた色に深く関係するからです。

赤系のサイトを見ていて赤のクリックエリアが出てきても目立たないなどが存在するということです。

 

これとは逆に、白や青などの配色のサイトに赤のクリックエリアだとインパクトがあり効果が得られるということになります。

つまり、赤ボタン=クリックされやすいというのは定石であり、定石ではないと言うことです。

 

サイトの配色を考え、クリックエリアに適切な赤と青系を使用するのがインパクトがありクリック率が上がります。

何から何まで教科書通りというのも通用しない時代になっています。

 

まとめ

POINT

 

色を決めるために色を決めない。

言葉(キーワード)があるから色を決められる。

赤ボタン=クリックされやすいというのは定石であり、定石ではない。

 

サイトやブログを作成する際の配色などクリックボックスの配色などに参考に作成して行っていただけたらと思います。

 

ご購読ありがとうございました。

ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-WEB

© 2021 TSUTAERU BLOG