【簡単】ブログ配色の決め方|色を統一するだけでおしゃれなブログに変身します

ブログのデザイン
ブログの配色を決めたいけど、何色にするのがベストかな?
センスに自信がないので初心者に簡単なブログ配色の決め方を教えてほしい。
そういった方に向けてブログ配色の決め方を解説します。

配色のセンスがなくても、この4つを意識すればブログを簡単におしゃれにできます。

  • ブログのテーマに色を合わせる
  • 3色までに抑える
  • 配色見本から選ぶ
  • アイキャッチにも配色を反映する

私のブログも配色を決める前は統一感のないイマイチな見た目でした。
 

 
正直難しいテクニックは全く必要なく、簡単にブログの配色を決められます。
ブログ初心者の方にもわかりやすいよう図を使って解説しますのでぜひご覧ください。

ブログ配色の決め方

さっそくブログの配色を決めていきます。

順番としては以下の通りです。

  1. ブログテーマから色を決める
  2. 3色に抑える
  3. 配色見本から選ぶ
ひとつずつ解説します。

ブログ内容に合わせる

ブログの色はブログ内容に合わせたいです。

ブログのテーマ(主題)に合わせた方がより色の効果を発揮できるからです。

例えばミニマリストに関するブログなのに、派手な色合いだとブログのテーマと離れちゃいますよね?
 

 
「与えたい印象の色と好きな色は違う」ことに注意です。
自分の好きな色にこだわりすぎて、ブログのテーマとかけ離れた配色になってるケースもあります。

ブログのターゲット読者に合わせた色を使いましょう。

色のもつイメージはデザインでの配色のコツ5選に掲載してます。

デザインでの配色のコツ5選|NG行為とともにデザインテイスト別のアイディアもご紹介

3色に抑える

配色は基本的に3色に抑えます。

3色以内にするとブログ全体にまとまりがでます。
逆に色を使いすぎると子どもっぽい印象を与えてしまうので注意です。
 

 

比率を守る

大見出し2
 
そして3色の割合も意識します。

あくまで以下は参考程度ですが、アクセントカラーの量が多すぎないよう注意します。

  • 背景色にベースカラー
  • ヘッダーやフッターにメインカラー
  • アクセントカラーはアイキャッチの一部に

3色の比率は神経質にならなくても大丈夫ですが、3色以内に抑えるのはデザイン初心者であるほど意識したいです。

色が多いほど扱いづらくなります。

配色見本から選ぶ

3色を選ぶには必ず配色見本を参考にして選びます。

色のトーンがしっかり計算された美しい配色を提案してくれます。

ついやってしまいがちなのが、自分の好きな3色を感覚で選ぶことです。
感性で色を選ぶと失敗の元なので、ツールの力を借りましょう。

ここで使いやすい配色見本を2つご紹介します。

その①『coolors』


(引用:https://coolors.co/5c6f68-8aa39b-95d9c3-a4f9c8-a7fff6)

『coolors』はスペースキーを押すたびに最大5色のカラーパレットがランダムで表示されます。

もし5色のうち気に入った1色があれば、その色だけを固定して別の4色を選んでくれます。
大見出し1

その②palettable


(引用:https://www.palettable.io)

出てきた色を「スキ:like」か「キライ:Dislike」で判断していくと自分好みの配色が完成します。

こちらも最大5色までの組み合わせを選べます。

直観で操作できて使いやすいサイトです。

その③当ブログの配色パターン記事

このブログ内にも40通りの3色配色パターンを掲載してる記事があります。

「シンプル」や「エレガント」などテイスト別に掲載しており探しやすいのでぜひご覧ください。

40通りの3色配色パターン:デザインのテイスト別にベストな色の組み合わせを探せます

ブログ配色の設定方法

お気に入りの3色は見つかりましたか?

ここからはカラーコード(#で始まる番号)を実際に設定していきます。

3色を反映させるのは主にこれらの場所です。

  • ヘッダー
  • フッター
  • 見出し
  • アイキャッチ画像
  • ヘッダー画像

さきほど解説した3色の比率を意識しつつ設定します。
 
大見出し2
 
もしなんとなくまとまりがないな…と感じたら、無彩色のグレーを見出しに取り入れると締まると思います。

何通りか試して外観をチェックしましょう。

ブログ配色を決める上での注意点

ブログに色を設定する際の注意点を簡単に解説します。

リンクの色は青にする

 

 

記事内のリンクの色は必ず青系にします。

グーグルの場合:
スマホ #1558d6 PC #1a0dab

※定期的に変更されてるようです

青系以外の色にしちゃうと読者は混乱するし見逃す可能性があります。

リンクの色にこだわりは捨てましょう。

マーカーで下線を引きすぎない

 

 

色を使いすぎると読者が疲れるだけでなく、どこか大事な文章なのかわかりづらいです。

よく見かけるのがカラフルな下線をたくさん引いてる記事です。
私もブログ開設当初、よくやってしまったのですが無意識のうちに気が散るんですよね。

自分にも言い聞かせてますが読者の読みやすさを優先したいです。

ブログの配色を決めるメリット

そもそもブログの配色を決めるとどんなメリットがあるのか。
配色までこだわる余裕がないブログ初心者のときほど、知っておくとラッキーです。

狙った印象を与えられる

まず一つ目に、読者に与えたいあなたの印象をキャラ付けできます。

色のもつ印象を利用すると、読者があなたのブログに対してイメージを抱きやすいですよね。

ピンクだから可愛い印象、ネイビーだと知的で大人っぽい印象など。
 

 
ある意味ブログのブランディングです。
適当な色を設定してるより、あなたのブログのファンになってくれる確率は高まりますよね。

情報がわかりやすく伝わる

配色が統一されてることで、情報がわかりやすく伝わります。
同じ色が繰り返し使用されてることで情報を整理してくれるのです。

例えばブログの外観を多く占めるアイキャッチ。
配色が統一されてることで見た目が美しいだけでなく、文字も読みやすくなります。
 

 

アイキャッチの作り方はこちらの記事をご覧ください。

【おしゃれなのに時短】ブログのアイキャッチ画像の作り方5ステップ【初心者こそこだわりたい理由】

記事ページの装飾も色を使いすぎるより統一してる方が読者は読みやすいですよね。

実は配色の統一は、デザインの超基本ルールである「デザイン基本4原則」にしっかり従っています。
 

わかりやすく伝わるためのデザイン基本4原則とは。

【超単純】デザインの基本4原則をわかりやすく図解します【センス以前に大事なこと】

4原則のひとつである「デザインの反復」は内容の理解を助けます。
同じ色の見出しが反復されることで、読者は安心して読み進められますよね。

ブログの色を「反復」させることで情報がわかりやすく伝わるメリットがあります。

読者の目が疲れない

ブログの配色を決めることで読者の目の負担を軽減できます。

色を使いすぎると情報量が多くなり、読んでる側は無意識に疲れを感じます。
 

  • 派手な色の背景色
  • マーカーでカラフルな記事ページ
  • 青以外のリンク

自分のこだわりがありすぎたり、適当な配色にしてると読者を疲れさせてしまいます。

色を選ぶ手間が省ける

ブログの配色が決まっていれば毎回色を選ぶ手間がなくなります。

特にアイキャッチです。
記事をやっと書き終えてアイキャッチを作ると、さらにまた時間がかかるなんてことないですか?

そんな時に使う色が毎回決まってると楽ですよね。
しかも同じ色を使うことでブログの外観に統一感がでて美しいです。

見た目がキレイなだけでなく時間も節約できるので一石二鳥ですね。

まとめ

以上がブログ配色の決め方でした。
最後にまとめます。

  1. ブログテーマから色を考える
  2. 3色までに抑える
  3. 配色見本から選ぶ
  4. 比率を意識してカラーコードを設定する
決まった色を使うだけでブログのデザインに統一感がでるし、毎回色を選ぶ手間も省けるのでラッキーですよね。

最後に配色を決めたい人にピッタリな本を紹介します。
 

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色

 
3色だけの配色パターンが90通り以上も掲載されてる配色見本の本です。

この1冊があれば配色に迷うことはまずないでしょう。
見本のデザインもかなりおしゃれなのでアイキャッチを作る際の参考にもなりますよ。

アマゾンにサンプルページがたくさん見れるのでぜひチェックしてみてくださいね。