こんにちは、ウェブサイト運営歴21年のLeoです。
いつもは、「ブログ歴15年」と書いていますが、今日はブログをやる以前にホームページを作ったり、運営したりしてきた時間も関係する話題なのでより長い方を書きました。
ブログやホームページを作る上で絶対無視できないのが、「色」です。
全部真っ白で、文字はブラックというモノクロでもやれなくはないですが、普通はいくつか色をつけると思います。
- 「色」が持つ心理的作用・チカラ
- サイトデザインにおける「色」の重要性
- 「色」選びに迷ったら頼れる有能サイト
ウェブサイトと色
みなさん「好きな色」はあると思いますが、
色彩心理学を前提に好きな色から性格や気分を読み解くなんて話も聞いたことはありますよね？
先日、最新のプレステ、「PlayStation 5」が白になったことについて書きましたが、色には見る人に与える影響があって、ブログの色合いにも同じことが言えます。
無料テーマ最強の「Cocoon」では、デフォルトでデザイン済みの着せ替え機能が備わっている（ユーザー提供のもの含む）ため、色合いを含めたデザイン変更が瞬間でできますが、
独自に「キーカラー」をはじめ、背景や文字色、リンクの色などを簡単に設定でき、そしてその点はほとんどのテーマで無料・有料とわず同じことです。
それはつまり、
ということです。
色が持つ、心理的効果
それでは、主な色が読者に与える心理的効果を紹介します。
Image from ConvertKit
以上は、英語で書かれていますが、全11色の色が持つイメージをまとめたものです。
それぞれ簡単に日本語で紹介します。
| レッド | 怒り、危険、温かみ、情熱。心拍と血圧を上げたり、使われすぎると見るものが「うゎ〜」となる。 |
| オレンジ | 明るさ、楽しさ、フレンドリー、遊び心。簡単に注意が引ける色。 |
| イエロー | ポジティブ、楽観的、元気。 |
| グリーン | 成長、再生、自然、安定、忍耐、富（裕福） |
| ブルー | 誠実、落ち着き、平和。水色はリラックス。紺は強さや信頼性。 |
| パープル | ノスタルジック、センチメンタル、洗練。富と豪華さ。 |
| ピンク | 濃いピンクはセンチメンタル。鮮やかなピンクは若いエネルギー。 |
| ブラウン | 正直、シンプル。オーガニック系会社によく使われ、温かみや健康のイメージをもたらす。 |
| ホワイト | シンプル、ピュア。中性性や清潔さ、ミニマリズムな印象。 |
| ブラック | 大胆、力強い、クラシック、自信がある、洗練などのイメージ。先鋭的な印象やエレガントさなどを演出。 |
| グレー | ナチュラル、ムード、保守的、フォーマル。フォーマルでプロ感が欲しいものに使われがち。 |
ざっくりとした情報で、このデータはファッション業界に偏ったものでもあるので”参考”程度にしてもらえればと思いますが、
少なくとも色にはそれぞれイメージがあって、色が変わればものの持つ印象がガラッと変わるといことを知ってもらえればと思います。
つまり、
例えば、「高級感」を出したいブログならブラックを基調にしたデザイン、「楽しい！」的なイメージを持たせたいサイトならオレンジを使う、などが上記知識を応用した形になる感じです。
ブログの色は大事なのでしっかりデザインしよう
こちらの記事では、
このような図表とともに、『人は、最初の90秒で環境もしくは商品についてを潜在意識で判断する』と紹介されています。
そして『62%から90%の人が色だけでその判断を下している』とも言っています。
これもファッションとか、お店で物を買う場合のお話として紹介しているものですが、ブログにやってきた人が持つ心理的な反応はほぼ同じと考えられます。
つまり、
サイトにアクセスしてきた人は90秒以内にそのタイトについてを判断し、6〜9割の人が構成や文字ではなく、「色」でその判断に行き着くということになります。
そう、
よ！
実際のサイトで見てみましょう
では、実際に存在するウェブサイトを例にあげて話を続けていきます。
Life hacker
こちらはライフハック術に関する情報がたくさん紹介されているサイトですが、テーマカラーはグリーンですね。「ライフ」という単語とシンクロしている気がします。
バズ部
「Xeory」というオリジナルテーマも作っているWebマーケティングやWordpress関連情報などを発信するサイトです。
Xeoryも合わせて、白率高く、ポイントカラーとして「ブルー」が採用されています。ちょっと濃い目の青なので、信頼性や落ち着きを感じさせ、清潔感あるサイトイメージを作っています。
サルワカ
このページを見ている人なら1度は訪れたことがあるでしょう、人気有料テーマの「SANGO」作者でもあり、数々のWebデザイン情報を発信されているサルワカさんのブログ。
テーマカラーは淡いオレンジです。
明るさや遊び心を印象付ける色を使ってWeb制作を楽しくやろうという気持ちにならされるのかも知れません。
個人的なイメージですが、Web関係の情報を発信するブログはその多くがブルーを使っている印象があるため、オレンジというカラー選びは目立っています。
LEOLOG
手前味噌な感じになりますが、現在のLEOLOGデザインです。
少し前まではロゴやキーカラーをピンクに近い赤とし、多くのパーツにブラック系を使ってデザインしていました。
それを一念発起ブルー系統に変更しました。
変更の際のイメージは、「居心地の良さ」です。実際赤系のパーツやカラーリングもありますし、ブルー系統とターコイズ、ティファニー寄りのグリーンと合わせた色づくりでまだすこーし調整の余地を感じていますが、
赤の持つ刺激が強すぎることと、ブラックの持つ力強さのバランスから少しトゲトゲした印象もあった前カラーリングと比べて格段に柔らかいイメージのサイトになったのではないかと思っています。
このように、ブログは文字を読む（読ませる）ことがメインになるウェブサイトである以上文章部分の背景はホワイトで、文字はブラックである点は基本的に固定である一方、Hタグデザインやロゴに入れる色でサイトイメージをコントロールすることになり、
その色選びによって印象が変わってきます。
色に悩んだ時に参考になるサイト
以上のように、
なんとなくブログを始めた人、運営している人にとって注目するべき色問題ですが、
色彩について誰もが得意なわけではないですよね？
なので以下に、ボクもいつも参考にさせていただいているサイトを紹介しておきます。
Leo的使えるカラー関連サイト4選
国別に分けられたフラットカラー各20色が紹介されていて、気に入った色があればクリックだけでコピーできるとっても使いやすいサイトです。
LEOLOGの色はかなりここから引っ張ってます（笑）。
持っている画像をアップロードすることでテーマカラーを抽出してくれる機能が有能で、
例えばこんな風にアップロードした瞬間から写真の中の色を解析して色をピックアップしてくれます。
また、「カラームード」という項目もあり、同じ写真でも上のものは「カラフル」で、
「ディープ」を選ぶとこうなりました。
ブログを作った時にヘッダーに写真を据える場合、その写真を使ってカラー抽出をやってみたらサイトの色選びが捗るかも知れません。
こちらもめっちゃ有能。
サイドバーに並ぶ一覧から好みの色合いを選ぶと↑こういう感じでいろんなパーツごとに分けられた色が提案されます。
サンプルを見てしっくりくるものがあればそのままパクればオッケーです。
昔は「原色大辞典」を多用していました。最初にあげたFlat UIを使う前はほぼこちらで色を探していました。
上記スクショの通り、今では「パステルカラー」を参照することが多くなっていますが、「和色大辞典」では日本古来の色をイメージした色が紹介されていて、和食店や旅館などのサイトづくりの際は使えるのではないかと思いますし、かなり捗るサイトだと思います。
ネットを探せば同様のサイトは結構多く存在するので、自分が使いやすいと思うものを見つけてブックマークしておくことをオススメします！
まとめ・総括
以上、
今回はブログデザインの中でも「色」に特化したお話を紹介しました。
有料テーマだと元から提案されたカラーリングが施されていることもありますし、Cocoonでもボックス類をはじめとした装飾パーツの色はテーマがわで決められています（ボクはデフォルトから変更していますが）ので特別強い意識がなければ入手したままで使っておけばいいと思いますが、
今回紹介した通り、
色というものが持つ力や可能性は大きいと思うので、
どこかの段階でこだわってカラーリングを楽しんでもいいのではないかと思いました！
