訪問ありがとうございます。 わいず(@FamilyCamp_Labo）です。
当サイトでは、「”シンプル” で ”コンパクト”に自然を楽しむ」ことをテーマに情報をお届けしています。
色んな生活スタイルがあるけれど、”自分（家族）が自然体で過ごせる”「コト（体験）・モノ（商品）・トキ（時間）」を取り入れることで、自分らしさあふれる楽しい時間を過ごす。
そんな生活の手助けになる情報の提供を目指しています。
この記事を書いた人
趣味：ファミリーキャンプ、写真撮影
特徴：いいモノ（商品・サービス）を勝手に紹介するクセがある
人見知りをこじらせた結果、最終的に「文章で価値を伝える」をいう方法にいきついた人。
シンプルかつコンパクトに自然を楽しむ”というコンセプトで「ファミリーキャンプ」をテーマにブログ Family Camp Labo（通称：ファミキャンラボ）を運営中。
今回の記事では
- ブログの配色をどう決めていいかわからない
- ブログがごちゃごちゃしていて見づらい気がする
- 読者に信用されやすいブログのデザインにしたい
このような方に向けて、
色彩心理学に基づいた「信頼を得やすいブログデザイン（配色）の決め方」
についてお伝えします。
星の数ほどあるブログ（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色は色彩心理を参考に決める
色には、それぞれ読み手に与えるイメージがあります。
ブログのカラーイメージを決める際には、
- ベースカラー
- メインカラー
- アクセントカラー
といった基本の三色を決めておきましょう。
基本的に「基本の3色とそれに似た色以外は使わない」と決めておくと、自然とまとまりのあるサイトカラーになります。
では、それぞれ具体的にお話ししていきます。
色彩の役割．ベースカラー編
ベースカラーは、ブログの背景になる色です。
ヘッダーやフッター、グローバルメニューの配色になる部分ですね。
一番多く目にする色でもあるので、この色でサイトの印象が変わるといっても過言ではありません。
伝えたい印象やキーワードから連想して、「ブログの背景色」を決めていきましょう。
- 色彩が与える印象の例
-
- ◆赤．激しい、生命力、情熱的、行動的、革命的、活気、エネルギー、興奮、健康
- ◆ピンク．優しさ、穏やか、愛情、柔軟、女性的
- ◆オレンジ．活気、親しみ、健康、躍動、元気、陽気、新鮮、にぎやかな
- ◆黄色．快活、歓喜、軽快、希望、注意、幸福
- ◆緑．平和、健康、安全、自然、安らぎ、癒し、生命、潤い、親愛
- ◆青．冷静、さわやか、誠実、消極、無限、真実、知性、清涼
- ◆紫．高級、上品、美意識、神秘、妖艶、優雅、芸術、気品
- ◇白．純粋、清潔、無垢、神聖、純真、善良、素直
- ◆灰色．平凡、無機質、ひかえめ、調和、曖昧、クール
- ◆黒．高級、プロフェッショナル、力強い、絶望、不信、死、静寂、罪悪、重厚
以上、10色が基本と呼ばれる色と与えるイメージの概要となります。
それぞれの色に、プラスとマイナスの両面がありますが、まずは、この意味合いを把握しながら、どの色をサイトのメインカラーにしていくか考えていくと、大きく外さずにすむはずです。
当サイトのベースカラーについて
当サイトは、ベースカラー（背景色）を「白」にしています。
その理由は、「ストレスなく文章を読めるサイトにしたい」という思いを込めて作っているからです。
背景が「白」であれば、その上にどんな配色をのせても邪魔しませんし、文章を書いている際、改行のスペースなどに「間」を持たせることができます。
文章の合間の「余白という空間」は、読みやすい文章を書く上では欠かせないものなので、「余白を最大限に活かせる白色」をベースカラーに設定しています。
色彩の役割．メインカラー編
メインカラーは、背景色をのぞくデザイン内で最も多く登場する色です。
同じベースカラーでも、組み合わせるメインカラーによって印象が変わるので、「どのような印象を持ってほしいのか？」を意識して選びましょう。
たとえば、ベースカラーが「白」の場合
- 白+紺色＝シンプル+知的
- 白+水色＝清潔+爽快
- 白+黄色＝無垢+元気
- 白+ピンク＝透明感+柔らかさ
- 白+赤＝明るい+活発
- 白+緑＝清潔+エコ
上記のような感じですね。
当サイトのメインカラーについて
当サイトは、メインカラーを「Sherpa Blue（シェルパブルー）」という配色にしています。
ブルーとついていますが、濃い緑のイメージでしょうか。
わいず僕が愛用しているサバティカルというブランドロゴに使われている緑をイメージして使っています
意図としては、「シンプルでコンパクトに自然を楽しむ」というコンセプトで運営しているブログなので、アウトドア感のある「緑」を基調としたカラーをメインカラーをしています。
色彩の役割．アクセントカラー編
アクセンとカラーは、デザイン内での使用頻度は多くありませんが「ここぞという時に目を引くための色」です。
特に目立たせたい場合は、「選んだ色と逆の色を選ぶ」のがおすすめです。
当サイトのアクセントカラーについて
当サイトでよく使っているアクセントカラーは「黄色系」と「オレンジ系」です。
深い緑なので、メリハリのあるアクセントカラーを使っています。
特に「オレンジ」は「ボタン色」として、「黄色」は、アイキャッチ画像のタイトル色として使っています。
ぜひ、あなたのブログも「色彩」に意図を持っているか？という部分を意識してみてくださいね。
色彩心理をデザインに活かすとブログ記事が活きる
ここまでお伝えしたサイトの基本3色は、「どんな印象を持ってもらいたいか」を優先して選ぶことをお勧めしましたが、記事を書く際も配色にも気を遣う必要があります。
もちろん文章の書き方も大切ですが、「読者が読みやすい環境を作る」というポイントが、あなたの記事を何倍も読みやすくしてくれます。
読みやすい記事を書くための環境作りは以下の4点。
- サイトの背景色は「白」
- 文字色は「黒」
- リンク文字は「青」
- 重要な部分は「赤」
記事を書いていく際には、この４色を基調に書いていくことでシンプルで読みやすい記事になります。
では、それぞれお話ししていきますね。
ポイント1．サイトの背景色は「白」を基調とした配色がおすすめ
背景を白にしたほうがいい理由は、単純に「見やすいから」です。
先ほどのベースカラーのところでお話ししましたが、ベースカラーに関しては「白色」にしておけばまず間違いはないと考えて大丈夫です。
たとえば、背景が「黒」だとダークなイメージを持ってしまいますし、「赤」や「黄」といった背景にしてしまうと、目がチカチカして読者がまともに文章を読むことができません。
趣味のサイトであれば、花柄や木目などの背景や、ピンクや黄色を使った文字色でもいいと思いますが、「派手にすればするほどサイトに来てくれた人にとって読みにくい記事」になります。
というわけで、よっぽどの理由がない限り、背景は目に優しい「白」一択と言えるでしょう。
ポイント2．読みやすい記事を書くための鉄板の配色
2つ目のポイントは、「文字色」は黒系にするという点です。
文字色に関しては色々意見があると思いますが、僕が推奨するのは以下の3パターン。
- ベースの文字は「黒系」で書く
- リンクを張りたい部分の文字は「青字」で書く
- 記事の中で、重要度小は「黒で太字」重要度中は「黒太字+黄色蛍光ペン」最重要部分は「赤字」で書く
この３パターンを使い分けて書いています。
たまに、リンクを張っている部分ではなく、強調したい部分を青字で書いているサイトなどを見かけますが「読者から見ると分かりづらい」のでやめておいたほうが無難です。
僕は有難いことに「記事がよみやすい」といっていただけることが多いですが、今回お伝えしている配色と記事の書き方にこだわっているだけなんですね。
ブログの書き方については、下記の記事で詳しく解説しています。
ブログの配色バランスも「読者目線」で決めていかないと、あなたがどんなにいい記事を書いても読んでもらえない危険があります。
読まれなくては記事を書いても時間の無駄になってしまうので、「読み手に寄り添った配色バランス」に気を付けてブログで使う色を決めてみてくださいね。
まとめ．ブログの配色を決める時は色彩心理を意識し統一感のあるサイトカラーにしよう
今回は「色彩心理とデザインを利用したサイトイメージの作り方」についてお話ししました。
サイトのデザインを考えようとすると、膨大な時間がかかりますが、サイトのメインカラーを変えるくらいならば30分もあればできます。
目的を持たずに配色を考えるといくら時間があっても足りませんが、最初から「意図を持った配色」を決めておけば、あなたのイメージにあったブランディングにも繋がるはずです。
サイトカラーに配色に関しては、僕が使っているWordPressテーマ「SWELL」のように、ワンクリックで変更できるものを使えば簡単に変更することができます。
しっかりと考え抜かれたカラーは、「無意識のうちに読者にいい印象を与える」ので、ぜひ1度意識してみてくださいね。
あなたの発信したい内容とメインカラーを合わせる。
この作業が出来ていないサイトは意外と多いので、今回お伝えしてみました。
では、最後まで読んでいただきありがとうございました。
コメント