色彩心理とデザイン｜読者に好印象を持たれるサイトカラーの解説と選び方

どうも、セールスコピーライターの中村です。

 

今回は、意外と知らないデザインの役割についてお伝えします。

僕はデザイナーではありませんが、「コピーライティング」と同じように「デザイン」にも役割があります。

 

あなたは自分のサイトカラーの配色は意図をもって決めているでしょうか？

もし、何となく決めてるならば「チャンスを逃している」かもしれません。

 

「自分が好きな色」を使うことも大事ですが、あなたが自分のビジネスにどんなイメージを持ってほしいかで「選ぶべき色」というのは変わってきます。

 

今回は、色彩心理をもとに「色が読み手の心理にどんな影響を及ぼす」のか詳しく解説していきます。

あなたのサイトを見直すきっかけにしてみてくださいね。

 

色彩の組み合わせと心理の関係とは？

「色彩」と「人間心理」には、実は密接な関係があります。

あなたがよくいくお店のレイアウトやデザインも「あなたが心地よく感じる配色」ではないでしょうか？

 

その理由は「企業がターゲット層に好印象を与える色彩を研究して使っている」からなんですね。

たとえば、10代女性がターゲットのファッションブランドは「明るい配色」のものが多いですが、50代女性がターゲットのお店は「落ち着いた色味」のものが多いはずです。

 

それと同じで、あなたも自分のブログのターゲットに好印象を持たれる配色を選ぶ必要があるというわけですね。

 

もし、あなたが30代男性だとして、たまたま見たサイトの「メインカラーがピンク」で「文字が黄色」で書かれたサイトを見たとしたら、どんなイメージを持つでしょうか？

中にはそういう配色が好きな方もいるかもしれませんが、一般的な目線でみると、かなり怪しいサイトになっちゃいますよね？

 

僕も過去にいろいろなサイトを見ましたが、中には「何色も色を使った目がチカチカするブログ」を見かけました。

 

そのようなサイトは、「読者にとって読みやすいブログ」でしょうか？

「また来たい」と思ってもらえるでしょうか？

 

デザインだけに限った事ではないですが、ビジネス目的でブログを運営するならば「意図を持った構成」を作る必要があります。

ビジネス目的のブログとアート作品は違うというわけですね。

 

では、ここから色彩心理について詳しく解説していきます。

 

色彩心理学の基本となる「マンセル・カラー・システム」

色を人に伝えるのは難しいですよね。

たとえば、「青」を口頭で伝えるにはどうしたらいいでしょうか？

 

口頭だけで伝えることを考えると、あなたのイメージしている「青」を相手にイメージしてもらうのは、かなり難しいことがわかるはずです。

 

ではどうしたらいいのか？

そこで、色を体系的に表現できるものが必要になるわけですね。

 

ただ、色の表記方法はたくさんあるので、今回は世界的にも使われている「マンセル・カラー・システム」を使ってお話ししていきます。

 

 

マンセル・カラー・システム (Munsell color system) とは

色を定量的に表す体系である表色系の1つ。色彩を色の三属性（色相、明度、彩度）によって表現する。マンセル表色系、マンセル色体系、マンセル システムとも言う

引用：Wikipediaより抜粋

これは「色相環」と呼ばれるもので、基本的には12色の配色で分類され、上の図はそれをさらに細かく分類しているものです。

 

色相環の詳細については理解する必要はないので、あなたが「自分のサイトで使いたい色の与えるイメージ」にどんな意味があるのか？ という部分だけおぼえておくといいですよ。

 

色彩心理を理解してブログの読者に好印象を持たせよう

色には、それぞれ読み手に与えるイメージがあります。

ブログのカラーイメージを決める際には、

といった基本の三色を決めておきましょう。

基本的に「基本の3色とそれに似た色以外は使わない」と決めておくと、自然とサイトカラーはまとまった配色になりますよ。

 

では、それぞれ具体的にお話ししていきます。

 

色彩の役割．ベースカラー編

ベースカラーは、ブログの背景になる色です。

ヘッダーやフッター、グローバルメニューの配色になる部分ですね。

 

一番多く目にする色でもあるので、この色でサイトの印象が変わるといっても過言ではありません。

伝えたい印象やキーワードから連想して、「ブログの背景色」を決めていきましょう。

以上、10色が基本と呼ばれる色と与えるイメージの概要となります。

 

それぞれの色に、プラスとマイナスの両面がありますが、まずは、この意味合いを把握しながら、どの色をサイトのメインカラーにしていくか考えていくと、大きく外さずにすむはずです。

 

コピラボのベースカラーについて

当サイトコピラボは、ベースカラー（背景色）を「白」にしています。

その理由は、コピラボが「読みやすさを追求するサイト」だからです。

 

背景が「白」であれば、その上にどんな配色をのせても邪魔しませんし、文章を書いている際、改行のスペースなどに「間」を持たせることができます。

文章の合間の「余白という空間」は、読みやすい文章を書く上では欠かせないものなので、「余白を最大限に活かせる白色」をベースカラーに設定しています。

す。

 

色彩の役割．メインカラー編

メインカラーは、背景色をのぞくデザイン内で最も多く登場する色です。

同じベースカラーでも、組み合わせるメインカラーによって印象が変わるので、「どのような印象を持ってほしいのか？」を意識して選びましょう。

 

たとえば、ベースカラーが「白」の場合

のような感じですね。

 

コピラボのメインカラーについて

当サイトコピラボは、メインカラーを「黒鳶（くろとび）」という配色にしています。

黒鳶（くろとび）とは、やや黒みの赤褐色で暗い赤褐色である鳶色をさらに暗くした色のことです。江戸時代前期から行われた染め色で、『反古染』によると、享保の頃は小袖の色として流行し、安永の頃には黒の紗綾形（さやがた）模様の帯としても流行しました。

引用：伝統色のいろは（黒鳶）

赤系と紫を濃く配色したようなイメージでしょうか。

 

意図としては、「白背景」と「黒に近づけるようなメインカラーにすることで、「落ち着き+信頼感」を感じてもらうことを意図しました。

 

色彩の役割．アクセントカラー編

アクセンとカラーは、デザイン内での使用頻度は多くありませんが「ここぞという時に目を引くための色」です。

特に目立たせたい場合は、「選んだ色と逆の色を選ぶ」のがおすすめです。

 

コピラボのアクセントカラーについて

コピラボでよく使っているアクセントカラーは「黄色」と「緑」です。

メインカラーが「赤」と「紫」を混ぜた色なので、反対色である「緑系」「黄色系」のアクセントカラーを使っています。

 

特に「緑」はトップページなどの「バナー画像」として、「黄色」は、アイキャッチ画像のタイトル色として使っています。

 

ぜひ、あなたのブログも「色彩」に意図を持っているか？

という部分を意識してみてくださいね。

 

読みやすい記事を書くコツも色彩のバランスにある

ここまでお伝えしたサイトの基本3色は、「どんな印象を持ってもらいたいか」を優先して選ぶことをお勧めしましたが、記事を書く際も配色にも気を遣う必要があります。

 

もちろん文章の書き方も大切ですが、「読者が読みやすい環境を作る」というポイントが、あなたの記事を何倍も読みやすくしてくれます。

 

読みやすい記事を書くための環境作りは以下の4点。

記事を書いていく際には、この４色を基調に書いていくことでシンプルで読みやすい記事になります。

 

では、それぞれお話ししていきますね。

 

ポイント1．サイトの背景色は「白」を基調とした配色がおすすめ

背景を白にしたほうがいい理由は、単純に「見やすいから」です。

先ほどのベースカラーのところでお話ししましたが、

と思って大丈夫です。

 

たとえば、背景が「黒」だとダークなイメージを持ってしまいますし、「赤」や「黄」といった背景にしてしまうと、目がチカチカして読者がまともに文章を読むことができません。

 

趣味のサイトであれば、花柄や木目などの背景や、ピンクや黄色を使った文字色でもいいと思いますが、「派手にすればするほどサイトに来てくれた人にとって読みにくい記事」になります。

というわけで、よっぽどの理由がない限り、背景は目に優しい「白」一択と言えるでしょう。

 

 

ポイント2．読みやすい記事を書くための鉄板の配色

2つ目のポイントは、「文字色」は黒系にするという点です。

 

文字色に関しては色々意見があると思いますが、僕が推奨するのは以下の3パターン。

この３パターンを使い分けて書いています。

たまに、リンクを張っている部分ではなく、強調したい部分を青字で書いているブログを見かけますが、読み手からすると紛らわしいのでやめておいたほうが無難です。

 

僕は有難いことに「記事がよみやすい」といっていただけることが多いですが、今回お伝えしている配色と記事の書き方にこだわっているだけなんですね。

記事の書き方については、下記の記事で詳しく解説しています。

 

配色も「読者目線」で決めていかないと、あなたがどんなにいい記事を書いても読んでもらえない危険があります。

読まれなくては記事を書いても時間の無駄になってしまうので、「読み手に寄り添った配色バランス」に気を付けてブログで使う色を決めてみてくださいね。

 

まとめ．色彩心理を少しだけ意識してブログのイメージを定着させよう

今回は「色彩心理とデザインを利用したサイトイメージの作り方」についてお話ししました。

サイトのデザインを考えようとすると、膨大な時間がかかりますが、サイトのメインカラーを変えるくらいならば30分もあればできます。

 

目的を持たずに配色を考えるといくら時間があっても足りませんが、最初から「意図を持った配色」を決めておけば、あなたのイメージにあったブランディングにも繋がるはずです。

サイトカラーに配色に関しては、僕が使っているWordPressテーマ「エレファント3」のように、ワンクリックで変更できるものもあれば、専門知識がある程度必要になるテーマもあります。

 

しっかりと考え抜かれたカラーは、「無意識のうちに読者にいい印象を与える」ので、ぜひ1度意識してみてくださいね。

 

あなたの発信したい内容とメインカラーを合わせる。

この作業が出来ていないサイトは意外と多いので、今回お伝えしてみました。

 

ではでは、最後まで読んでいただきありがとうございました。

 

 

⇒当サイトに来られた方はこちらのページもご覧になっています