ブログは何色?カラースキーム(配色)に役立つサイトの紹介

こちらは私の著書「はじめてのブログをワードプレスで作るための本」の読者さま専用ページです。

このページではP240あたりで少し触れたブログの色合い(カラースキーム)の話を解説します。

色によってかなり雰囲気が変わります。

好きな色を指定しようと思うと目立つ色にしてしまうことがよくあります。

派手な色にすると一見目立って良いように感じますが、肝心の文字の色が読みづらく、背景の色と差がありすぎて“目が痛い”となりがちです。

どうしてもこういった濃い色を使いたい場合は、載せる文字は白っぽい色にすることと、サイト全体で使う量を減らすと良いでしょう。

黒い文字が見やすい色というのはやはり薄めの色です。
色によって雰囲気がかなり変わってきます。ピンク系ではかわいらしく、ブルー系では落ち着いた印象、黄色やグリーンは元気な印象ですよね。

サイトのテーマカラーを最初に決めておくと便利!!

サイトのテーマカラーを決めておくとゴチャゴチャも回避できますし、画像や名刺など他のもので色を使うときも時間短縮になります。

テーマカラーを決めるときはカラースキームと呼ばれる配色パターンまで考えておくと便利です。こういう言い方すると難しく感じますが、このブログはこの色!というものを3~4種類用意しておこう、というお話です。

なぜ複数あった方が良いかと言いますと、大きいサイズで使えるメインのカラー、サブ的に使うカラー、アクセントのカラーみたいに数色あればそれだけでどんな配色も対応できちゃうんですよ!

たとえば今回私が作っているブログ虎の巻はこんな色合いです。

キャラクターがトラなので黄色、技術系のブログなので爽やかめにしようとこうなりました。

ホワイト #FFFFFF・イエロー #29C1B4・グリーン #FECC09・ネイビー #093057 の4色が基本となっています。

私はカラフル好きなので派手ですが、もちろん同じ色の系統で鮮やかさ・明るさ違いでそろえてもオシャレです。

さて、色の組み合わせはどうやって考えればよいのか、というところですが、すごく良いサイトがあります!COLOURloversというサイトで配色やパターンに関する投稿型のサイトです。使い方をご紹介しておきますね。

COLOURLOVERSの使い方

(図:7-3-5)はCOLOURlovers(http://www.colourlovers.com)のトップページです英語ですが、英語読めなくても大丈夫です。

(図:7-3-6)PALETTESがすごく参考になる!

(図:7-3-6)のView Moreをクリックするとユーザーが投稿した配色パターンをたくさん見ることが出来ます。しかしあまりに膨大で何を選んでよいか悩んでしまうことも。

そんな場合は検索機能を使うと便利です。

COLOURLOVERSの検索機能

(図:7-3-7)COLOURloversの検索ページ

まず1色好きな色を決めてRGBカラーコードを確認します。そして(図:7-3-7)の検索ページ(http://www.colourlovers.com/palettes/search)へアクセス。そしてHEXと書かれたところにコードを入力し「SEARCH PALETTES」をクリックします。

するとその色が入った配色パターンが出てきます。それぞれをクリックするとさらに細かい内容が見れます。今回わたしのブログでは下の方のmarikikis duranさんが投稿したdroneという配色パターンの内3色を使わせていただくことにしました。

オシャレな配色パターンがたくさんあるので参考にしてみると良いアイディアが生まれそうですよね。