センスに自信がないので初心者に簡単なブログ配色の決め方を教えてほしい。
配色のセンスがなくても、この4つを意識すればブログを簡単におしゃれにできます。
- ブログのテーマに色を合わせる
- 3色までに抑える
- 配色見本から選ぶ
- アイキャッチにも配色を反映する
私のブログも配色を決める前は統一感のないイマイチな見た目でした。
正直難しいテクニックは全く必要なく、簡単にブログの配色を決められます。
ブログ初心者の方にもわかりやすいよう図を使って解説しますのでぜひご覧ください。
☑ 本記事の内容
ブログ配色の決め方
さっそくブログの配色を決めていきます。
順番としては以下の通りです。
- ブログテーマから色を決める
- 3色に抑える
- 配色見本から選ぶ
ブログ内容に合わせる
ブログの色はブログ内容に合わせたいです。
ブログのテーマ（主題）に合わせた方がより色の効果を発揮できるからです。
例えばミニマリストに関するブログなのに、派手な色合いだとブログのテーマと離れちゃいますよね？
「与えたい印象の色と好きな色は違う」ことに注意です。
自分の好きな色にこだわりすぎて、ブログのテーマとかけ離れた配色になってるケースもあります。
ブログのターゲット読者に合わせた色を使いましょう。
色のもつイメージはデザインでの配色のコツ5選に掲載してます。
3色に抑える
配色は基本的に3色に抑えます。
3色以内にするとブログ全体にまとまりがでます。
逆に色を使いすぎると子どもっぽい印象を与えてしまうので注意です。
比率を守る
そして3色の割合も意識します。
あくまで以下は参考程度ですが、アクセントカラーの量が多すぎないよう注意します。
- 背景色にベースカラー
- ヘッダーやフッターにメインカラー
- アクセントカラーはアイキャッチの一部に
3色の比率は神経質にならなくても大丈夫ですが、3色以内に抑えるのはデザイン初心者であるほど意識したいです。
色が多いほど扱いづらくなります。
配色見本から選ぶ
3色を選ぶには必ず配色見本を参考にして選びます。
色のトーンがしっかり計算された美しい配色を提案してくれます。
感性で色を選ぶと失敗の元なので、ツールの力を借りましょう。
ここで使いやすい配色見本を2つご紹介します。
その①『coolors』
（引用：https://coolors.co/5c6f68-8aa39b-95d9c3-a4f9c8-a7fff6）
『coolors』はスペースキーを押すたびに最大5色のカラーパレットがランダムで表示されます。
もし5色のうち気に入った1色があれば、その色だけを固定して別の4色を選んでくれます。
その②palettable
（引用：https://www.palettable.io）
出てきた色を「スキ：like」か「キライ：Dislike」で判断していくと自分好みの配色が完成します。
こちらも最大5色までの組み合わせを選べます。
直観で操作できて使いやすいサイトです。
その③当ブログの配色パターン記事
このブログ内にも40通りの3色配色パターンを掲載してる記事があります。
「シンプル」や「エレガント」などテイスト別に掲載しており探しやすいのでぜひご覧ください。
ブログ配色の設定方法
お気に入りの3色は見つかりましたか？
ここからはカラーコード（＃で始まる番号）を実際に設定していきます。
3色を反映させるのは主にこれらの場所です。
- ヘッダー
- フッター
- 見出し
- アイキャッチ画像
- ヘッダー画像
さきほど解説した3色の比率を意識しつつ設定します。
もしなんとなくまとまりがないな…と感じたら、無彩色のグレーを見出しに取り入れると締まると思います。
何通りか試して外観をチェックしましょう。
ブログ配色を決める上での注意点
ブログに色を設定する際の注意点を簡単に解説します。
リンクの色は青にする
記事内のリンクの色は必ず青系にします。
スマホ #1558d6 PC #1a0dab
※定期的に変更されてるようです
青系以外の色にしちゃうと読者は混乱するし見逃す可能性があります。
リンクの色にこだわりは捨てましょう。
マーカーで下線を引きすぎない
色を使いすぎると読者が疲れるだけでなく、どこか大事な文章なのかわかりづらいです。
よく見かけるのがカラフルな下線をたくさん引いてる記事です。
私もブログ開設当初、よくやってしまったのですが無意識のうちに気が散るんですよね。
自分にも言い聞かせてますが読者の読みやすさを優先したいです。
ブログの配色を決めるメリット
そもそもブログの配色を決めるとどんなメリットがあるのか。
配色までこだわる余裕がないブログ初心者のときほど、知っておくとラッキーです。
狙った印象を与えられる
まず一つ目に、読者に与えたいあなたの印象をキャラ付けできます。
色のもつ印象を利用すると、読者があなたのブログに対してイメージを抱きやすいですよね。
ピンクだから可愛い印象、ネイビーだと知的で大人っぽい印象など。
ある意味ブログのブランディングです。
適当な色を設定してるより、あなたのブログのファンになってくれる確率は高まりますよね。
情報がわかりやすく伝わる
配色が統一されてることで、情報がわかりやすく伝わります。
同じ色が繰り返し使用されてることで情報を整理してくれるのです。
例えばブログの外観を多く占めるアイキャッチ。
配色が統一されてることで見た目が美しいだけでなく、文字も読みやすくなります。
アイキャッチの作り方はこちらの記事をご覧ください。
記事ページの装飾も色を使いすぎるより統一してる方が読者は読みやすいですよね。
実は配色の統一は、デザインの超基本ルールである「デザイン基本4原則」にしっかり従っています。
わかりやすく伝わるためのデザイン基本4原則とは。
同じ色の見出しが反復されることで、読者は安心して読み進められますよね。
ブログの色を「反復」させることで情報がわかりやすく伝わるメリットがあります。
読者の目が疲れない
ブログの配色を決めることで読者の目の負担を軽減できます。
色を使いすぎると情報量が多くなり、読んでる側は無意識に疲れを感じます。
- 派手な色の背景色
- マーカーでカラフルな記事ページ
- 青以外のリンク
自分のこだわりがありすぎたり、適当な配色にしてると読者を疲れさせてしまいます。
色を選ぶ手間が省ける
ブログの配色が決まっていれば毎回色を選ぶ手間がなくなります。
特にアイキャッチです。
記事をやっと書き終えてアイキャッチを作ると、さらにまた時間がかかるなんてことないですか？
しかも同じ色を使うことでブログの外観に統一感がでて美しいです。
見た目がキレイなだけでなく時間も節約できるので一石二鳥ですね。
まとめ
以上がブログ配色の決め方でした。
最後にまとめます。
- ブログテーマから色を考える
- 3色までに抑える
- 配色見本から選ぶ
- 比率を意識してカラーコードを設定する
最後に配色を決めたい人にピッタリな本を紹介します。
見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色
3色だけの配色パターンが90通り以上も掲載されてる配色見本の本です。
この1冊があれば配色に迷うことはまずないでしょう。
見本のデザインもかなりおしゃれなのでアイキャッチを作る際の参考にもなりますよ。
アマゾンにサンプルページがたくさん見れるのでぜひチェックしてみてくださいね。
を使用しております。
「シンプル・簡単・時短」を叶えてくれます。
