簡単にテーマカラーが決められて、配色の参考になるようなサイトを教えてください。
こういった疑問にお答えします。
この記事の内容
- ブログのテーマカラーの決め方
- テーマカラーを選ぶのに便利なツールとサイト
についてまとめました。
この記事を書いている私は、色彩検定2級を持っていて、色彩や色が人に与える影響について、とても興味があります。サイトを作るときは、いつもこの記事でご紹介している方法を使っているのでぜひ参考にしてみてくださいね。
あなた好みのテーマカラーを決めるヒントになれば幸いです！
ブログのテーマカラーの決め方
どんなジャンルやコンセプトのサイトを作っていきたいかによって、ブログのテーマカラーは決まります。
なぜなら、人は色でイメージを判断するからです。
色が人に与える影響は大きい
色彩が人に与える影響は大きく、例えば上の写真のような「青い色の食べ物」は、多くの日本人にとって「美味しそうに見えない」のではないでしょうか。
それと同様に、病院で「白」や「薄いピンク・ブルー」の白衣を着たお医者さんや看護婦さんを見ると、清潔感を感じたり、病気でしんどくても安心感をかんじませんか？
ブログのテーマカラーでも同じことが言えます。
ブログのジャンルによってある程度のイメージカラーは決まっていて、一般的なイメージカラーと離れていないほうが、読者は安心します。
ジャンル別のイメージカラー
ブログのジャンルによって、色が与える心理的な印象を有利に持っていきましょう。
以下は、一般的に言われているイメージカラーの例です。
食品系
- 赤 → 食欲を増進させる
- 緑 → 野菜、無農薬、健康食品、お茶、青汁
- 青 → 清涼飲料水
IT・お金・転職
- 青 → 信頼、クール、デジタル
語学・海外
- 青 → 集中力、自由
- 国旗の色
レジャーを紹介するサイトなのに黒や紺など暗い色を使ったり、ベビー用品を紹介するサイトなのに抹茶やえんじ色みたいな渋い色を使うことは避けたほうが良いことは頭ではわかっていても、自分のサイトとなると自分の好みが優先されてしまって、実際にそういうちぐはぐなサイトカラーを選んでしまうことはよくあります。
色を選ぶときは、想定読者を設定し、想定読者とサイトのイメージがかけ離れない配色パターンで読者を安心させてあげましょう。
あなたが目的とするサイトの方針や分野に近いウェブサイトをいくつか見てまわり、参考にしてみるとわかりやすいかもしれませんね。
当サイトのイメージカラーを決めた理由
当サイト「ブロガークエスト」のイメージカラーは、赤がメインで、次に黒です。
私自身、ゲームが好きで、ブログの攻略はRPGと似た要素を感じますし、生活においての時短は、ゲームでいうRTAだったり“効率厨”に似通っていると思っています。
なので、ニンテンドースイッチやスクエニ、マリオなどのイメージカラーである「赤」と、ファミコンのドラクエの戦闘画面で印象の強い「黒」をメインカラーに選んでみました。
- いくつになっても小さなことにワクワク出来る人
- ゲームであっても真剣に取り組める人
- 攻略や知識を得るのが楽しい人
そんな人たちが集まるサイトにしたいと思っています。
また、赤は人のやる気を引き出す効果もあるので、このブログで紹介したことを、ぜひあなたにも実行に移してほしいという願いも込めています。
テーマカラーを選ぶのに便利なツールとサイト6選
いくつか参考のサイトやブログを回って見て、気になる配色や色を使っているサイトは見つかりましたか？
気になる色は見つかったけど、カラーコードがわからないから同じ色が再現できない
いくつかサイトを見てみたけど、あまりピンとこない。何か提案してほしい
といった声が聞こえてきそうですね！
ここで、お悩みを解決するツールをいくつかご紹介しますので、実践してみてください。すべて無料で利用できます。
気になるサイトのカラーコードを調べるツール
ColorPick Eyedropper【無料】
ColorPick Eyedropperは、例えば、「マクドナルドの「M」のロゴ部分に使われている黄色のカラーコードを知りたい！」という場合に便利なツールです。
Google Chromeの拡張機能で、超便利なので今回使わなかったとしても、とりあえずダウンロードしておくと必ずいずれ役に立ちます。
ColorPick Eyedropperのアイコンをクリックして、気になる色の上にマウスを重ねるだけでカラーコードを調べることが出来ます。
≫ColorPick Eyedropper をダウンロードする
なぜ多いのかというと、このColorPick Eyedropperや、ほかにもブログを書くのに便利なGoogleの拡張機能が使えるからです。
なので、特に使っているブラウザにこだわりがなければ、Google Chromeにするのがいいですよ。
メインカラーに合うサブカラーを見つけるツール
サイトで使用する色を2～4色に絞っておくと統一感がでます。メインカラーを決めたら、相性のいいサブカラーを2～3個決めておきましょう。
サブカラーは、サイトの見出しに使ったり、ボックスの枠線に使います。
Color Hexa【無料】
Color Hexaは、カラーコードを入力すると、それに合う色を提案してくれる便利なサイトです。
私の場合、ColorPick Eyedropperでメインカラーを決めてから、Color Hexaでサブカラーを決めることが多いです。
色の彩度や明度が揃うので、簡単に統一感のあるサイトが仕上がります。
とにかくいろんな配色をみて決めたい人におすすめのツール
メインカラーやサイトのテーマカラーは特に決まっていなくて、おしゃれな組み合わせの配色をいくつかみて決めたいという人におすすめのサイトがいくつかあるので紹介しますね。
Color Tool【無料】
Color Tool はカラーパレットの中から一つカラーを選びクリックすると、それに合うマテリアルデザインの配色パターンが自動で表示されます。
表示されたカラーコードを真似するだけでおしゃれな配色デザインに仕上がります。
この手のサイトは英語表記で使い方がわかりにくいものも多いのですが、このColor Tool は直感的に使いやすくなっています。
ColorDrop【無料】
ColorDropは、とにかくたくさんの配色パターンを見比べて決めたいという人におすすめです。
配色パターンは、New（新着）、Popular（人気）、Random（ランダム）に並べ替えることが出来ます。
SchemeColor【無料】
SchemeColorは大量に表示される配色パターンから好みのものを見つけたいという人におすすめです。
各配色の下には、「Flying Unicorn」や「Baby Pastels」などといったように、カラーテーマが記載されているので、ご自身のブログテーマと合った配色を探すこともできますね。
グラデーションカラーにしたい人におすすめのツール
Grabient【無料】
色彩に詳しくなくてもキレイなグラデーションのカラーコードを調べることが出来るのがGrabientというサイトです。
サンプルとして表示されているカラーチャートを変更して、自分好みのグラデーションを作ることもできますよ。
まとめ
ブログのメインカラーとサブカラーの配色は、
- 色が持つ心理的な力を利用する
- 想定読者のイメージカラーに合わせる
ことによって、サイトの統一性や信頼性がうまれます。
ウェブ上で使える便利な無料ツールを使って、プロに負けない配色を選んでくださいね。
ツールをまとめます。
→マウスオーバーでカラーコードを表示するツール（超便利）
→カラーコードをひとつ入力すると、類似色や相対色などいくつかの配色パターンを提示してくれるツール
→カラーパレットからひとつ色を選ぶと、マテリアルデザインの配色パターンを提示してくれるツール
→人気のある4色の組み合わせの配色パターンを一覧で提示してくれるツール
→大量の配色パターンの中からテーマに沿ったカラーパレットを提示してくれるツール
→根強い人気のグラデーションのカラーコードを簡単に試して調べられるツール
おわり！