ブログの配色を決めるコツ｜Webサイトのカラーデザインは色彩心理を考慮して決めよう
ブログを作ったんですけど、どんな配色にしたらいいかわからないです。
ブログのカラーを決めるときのコツってありますか？
文子
今回は、こんな悩みや疑問を解決するために「ブログの配色と人間心理の関係性」についてお伝えします。
僕はデザイナーではないですが、「コピーライティング」と「デザイン」には共通点があると考えています。
両者に共通する点、それは「自分に興味を持ってもらい最終的に人を行動してもらう」こと。
一般的な広告デザインの役割は「おしゃれなイメージを与える」ために活用しますよね。
しかし、ブログや情報サイトにつかうデザインの役割は「ブランディング」のためです。
「自分が好きな色」を使うことも大事ですが、あなたが自分のブログに訪れた人にどんなイメージを持ってほしいかで「選ぶべき色」というのは変わってきます。
今回の記事で、サイトカラーが「読み手の心理にどんな影響を及ぼす」のか詳しく解説していきます。
あなたのサイトを見直すきっかけにしてみてくださいね。
わたしのサイトはやっぱりピンクですかね～。カワイイし♪
文子
ん？人の話きいてた？
中村
エド・バーネットの「40-40-20」の法則
色彩のお話をする前に、まず押さえておきたい重要なポイントについてお話します。
重要なポイントとは「40-40-20」の法則というものです。
■40-40-20 の法則とは
ダイレクトマーケティングの理論的ビジネスリーダーであるエド・バーネットが提唱しているダイレクト・マーケティングで成功するルール。正しい人々にメールすることが成功の40％。提供（オファー）するものやサービスの品質が成功の40％。パッケージの見ばえやデザインが成功の20％とするルール。
わかりやすくいうと、下記のような感じです。
- 正しいターゲットへのアプローチ（40％）
- 商品やサービスの品質（40％）
- デザインや提案力（20％）
つまり、消費者が求めている「商品・サービス」を、「適切なターゲット」に向けて、理解できるような分かりやすいメッセージで提案すると成功しやすくなるということですね。
あくまで、「ターゲットの設定」「商品力」が幹で、コピーライティングやデザインは、枝葉の部分に過ぎないということは理解しておく必要があります。
では、以上を踏まえたうえで色彩がもたらす心理効果について解説していきます。
色彩効果は人間心理どんな影響をおよぼすのか？
「色彩」と「人間心理」には、密接な関係があります。
あなたがよくいくお店のレイアウトやデザインを思い出してみてください、「あなたが心地よく感じる配色」ではないでしょうか？
「企業は商品ごとに、ターゲット層に好印象を与える色彩を研究して活用」しています。
たとえば、10代女性がターゲットのファッションブランドは「明るい配色」のものが多いですが、50代女性がターゲットのお店は「落ち着いた色味」のものが多いはずです。
それと同じで、あなたも自分のブログのターゲットに好印象を持たれる配色を選ぶ必要があるというわけですね。
もし、あなたが30代男性だとして、たまたま見たサイトの「メインカラーがピンク」で「文字が黄色」で書かれたサイトを見たとしたら、どんなイメージを持つでしょうか？
中には、ピンク好き男子がいるかもしれませんが、普通に考えて目がチカチカしちゃいますよね。
過去にアメブロでブログを書いていた人が、同じような感覚でWordPressでブログを作ると、「何色も色を使った目がチカチカするブログ」にしてしまうケースが多いようです。
色彩に統一感のない、チカチカするブログは
- 「読者にとって読みやすいブログ」でしょうか？
- 「また来たい」と思ってもらえるでしょうか？
デザインだけに限った事ではないですが、「読者目線で考える」という視点は重要です。
ビジネス目的のブログは、アート作品ではないというわけですね。
では、ここから色彩心理について詳しく解説していきます。
色彩心理学の基本となる「マンセル・カラー・システム」
配色には、数えきれないくらいの種類があるので、イメージ上で同じ認識を持つことは困難です。
たとえば、「青」を口頭で伝えるにはどうしたらいいでしょうか？
口頭だけで伝えることを考えると、あなたのイメージしている「青」を相手にイメージしてもらうのは、不可能に近いことが分かると思います。
そこで、色を体系的に表現できるものが必要になるわけですね。
色の表記方法は色々ありますが、今回は世界的にも使われている「マンセル・カラー・システム」を使ってお話ししていきます。
マンセル・カラー・システム (Munsell color system) とは
色を定量的に表す体系である表色系の1つ。色彩を色の三属性（色相、明度、彩度）によって表現する。マンセル表色系、マンセル色体系、マンセル システムとも言う
これは「色相環」と呼ばれるもので、基本的には12色の配色で分類され、上の図はそれをさらに細かく分類しているものです。
色相環とは、彩度が最高(純色)の赤・黄・緑・水色・青・紫などの色を、色合いの順で輪のような丸い形に並べたものです
中村
色相環の詳細については理解する必要はないので、あなたが「自分のサイトで使いたい色の与えるイメージ」にどんな意味があるのか？ という部分だけおぼえておくといいですよ。
色彩心理を理解してブログの読者に好印象を持たせよう
色には、それぞれ読み手に与えるイメージがあります。
ブログのカラーイメージを決める際には、
- ベースカラー
- メインカラー
- アクセントカラー
といった基本の三色を決めておきましょう。
基本的に「基本の3色とそれに似た色以外は使わない」と決めておくと、自然とサイトカラーはまとまった配色になりますよ。
では、それぞれ具体的にお話ししていきます。
色彩の役割．ベースカラー編
ベースカラーは、ブログの背景になる色です。
ヘッダーやフッター、グローバルメニューの配色になる部分ですね。
一番多く目にする色でもあるので、この色でサイトの印象が変わるといっても過言ではありません。
伝えたい印象やキーワードから連想して、「ブログの背景色」を決めていきましょう。
色彩が与える印象の例
◆赤．激しい、生命力、情熱的、行動的、革命的、活気、エネルギー、興奮、健康
◆ピンク．優しさ、穏やか、愛情、柔軟、女性的
◆オレンジ．活気、親しみ、健康、躍動、元気、陽気、新鮮、にぎやかな
◆黄色．快活、歓喜、軽快、希望、注意、幸福
◆緑．平和、健康、安全、自然、安らぎ、癒し、生命、潤い、親愛
◆青．冷静、さわやか、誠実、消極、無限、真実、知性、清涼
◆紫．高級、上品、美意識、神秘、妖艶、優雅、芸術、気品
◇白．純粋、清潔、無垢、神聖、純真、善良、素直
◆灰色．平凡、無機質、ひかえめ、調和、曖昧、クール
◆黒．高級、プロフェッショナル、力強い、絶望、不信、死、静寂、罪悪、重厚
以上、10色が基本と呼ばれる色と与えるイメージの概要となります。
それぞれの色に、プラスとマイナスの両面がありますが、まずは、この意味合いを把握しながら、どの色をサイトのメインカラーにしていくか考えていくと、大きく外さずにすむはずです。
コピラボのベースカラーについて
当サイトコピラボは、ベースカラー（背景色）を「白」にしています。
その理由は、コピラボが「読みやすさを追求するサイト」だからです。
背景が「白」であれば、その上にどんな配色をのせても邪魔しませんし、文章を書いている際、改行のスペースなどに「間」を持たせることができます。
文章の合間の「余白という空間」は、読みやすい文章を書く上では欠かせないものなので、「余白を最大限に活かせる白色」をベースカラーに設定しています。
す。
色彩の役割．メインカラー編
メインカラーは、背景色をのぞくデザイン内で最も多く登場する色です。
同じベースカラーでも、組み合わせるメインカラーによって印象が変わるので、「どのような印象を持ってほしいのか？」を意識して選びましょう。
たとえば、ベースカラーが「白」の場合
- 白+紺色＝シンプル+知的
- 白+水色＝清潔+爽快
- 白+黄色＝無垢+元気
- 白+ピンク＝透明感+柔らかさ
- 白+赤＝明るい+活発
- 白+緑＝清潔+エコ
のような感じですね。
コピラボのメインカラーについて
当サイトコピラボは、メインカラーを「黒鳶（くろとび）」という配色にしています。
黒鳶（くろとび）とは、やや黒みの赤褐色で暗い赤褐色である鳶色をさらに暗くした色のことです。江戸時代前期から行われた染め色で、『反古染』によると、享保の頃は小袖の色として流行し、安永の頃には黒の紗綾形（さやがた）模様の帯としても流行しました。
引用：伝統色のいろは（黒鳶）
赤系と紫を濃く配色したようなイメージでしょうか。
デザイナーではないので詳しく説明できません
中村
わからんのかーい！
文子
意図としては、「白背景」と「黒に近づけるようなメインカラーにすることで、「落ち着き+信頼感」を感じてもらうことを意図しました。
色彩の役割．アクセントカラー編
アクセンとカラーは、デザイン内での使用頻度は多くありませんが「ここぞという時に目を引くための色」です。
特に目立たせたい場合は、「選んだ色と逆の色を選ぶ」のがおすすめです。
コピラボのアクセントカラーについて
コピラボでよく使っているアクセントカラーは「黄色」と「緑」です。
メインカラーが「赤」と「紫」を混ぜた色なので、反対色である「緑系」「黄色系」のアクセントカラーを使っています。
特に「緑」はトップページなどの「バナー画像」として、「黄色」は、アイキャッチ画像のタイトル色として使っています。
ぜひ、あなたのブログも「色彩」に意図を持っているか？
という部分を意識してみてくださいね。
読みやすい記事を書くコツも色彩のバランスにある
ここまでお伝えしたサイトの基本3色は、「どんな印象を持ってもらいたいか」を優先して選ぶことをお勧めしましたが、記事を書く際も配色にも気を遣う必要があります。
もちろん文章の書き方も大切ですが、「読者が読みやすい環境を作る」というポイントが、あなたの記事を何倍も読みやすくしてくれます。
読みやすい記事を書くための環境作りは以下の4点。
- サイトの背景色は「白」
- 文字色は「黒」
- リンク文字は「青」
- 重要な部分は「赤」
記事を書いていく際には、この４色を基調に書いていくことでシンプルで読みやすい記事になります。
では、それぞれお話ししていきますね。
ポイント1．サイトの背景色は「白」を基調とした配色がおすすめ
背景を白にしたほうがいい理由は、単純に「見やすいから」です。
先ほどのベースカラーのところでお話ししましたが、
たとえば、背景が「黒」だとダークなイメージを持ってしまいますし、「赤」や「黄」といった背景にしてしまうと、目がチカチカして読者がまともに文章を読むことができません。
趣味のサイトであれば、花柄や木目などの背景や、ピンクや黄色を使った文字色でもいいと思いますが、「派手にすればするほどサイトに来てくれた人にとって読みにくい記事」になります。
というわけで、よっぽどの理由がない限り、背景は目に優しい「白」一択と言えるでしょう。
ポイント2．読みやすい記事を書くための鉄板の配色
2つ目のポイントは、「文字色」は黒系にするという点です。
文字色に関しては色々意見があると思いますが、僕が推奨するのは以下の3パターン。
- ベースの文字は「黒系」で書く
- リンクを張りたい部分の文字は「青字」で書く
- 記事の中で、重要度小は「黒で太字」重要度中は「黒太字+黄色蛍光ペン」最重要部分は「赤字」で書く
この３パターンを使い分けて書いています。
たまに、リンクを張っている部分ではなく、強調したい部分を青字で書いているブログを見かけますが、読み手からすると紛らわしいのでやめておいたほうが無難です。
僕は有難いことに「記事がよみやすい」といっていただけることが多いですが、今回お伝えしている配色と記事の書き方にこだわっているだけなんですね。
ブログの書き方については、下記の記事で詳しく解説しています。
ブログの配色バランスも「読者目線」で決めていかないと、あなたがどんなにいい記事を書いても読んでもらえない危険があります。
読まれなくては記事を書いても時間の無駄になってしまうので、「読み手に寄り添った配色バランス」に気を付けてブログで使う色を決めてみてくださいね。
まとめ．色彩心理を意識して見込み客に好印象を与えよう
今回は「色彩心理とデザインを利用したサイトイメージの作り方」についてお話ししました。
サイトのデザインを考えようとすると、膨大な時間がかかりますが、サイトのメインカラーを変えるくらいならば30分もあればできます。
目的を持たずに配色を考えるといくら時間があっても足りませんが、最初から「意図を持った配色」を決めておけば、あなたのイメージにあったブランディングにも繋がるはずです。
サイトカラーに配色に関しては、僕が使っているWordPressテーマ「エレファント3」のように、ワンクリックで変更できるものもあれば、専門知識がある程度必要になるテーマもあります。
しっかりと考え抜かれたカラーは、「無意識のうちに読者にいい印象を与える」ので、ぜひ1度意識してみてくださいね。
あなたの発信したい内容とメインカラーを合わせる。
この作業が出来ていないサイトは意外と多いので、今回お伝えしてみました。
ではでは、最後まで読んでいただきありがとうございました。
