どんな配色にすればブログはおしゃれに見えるかな？
おすすめの配色と、配色の参考になるようなサイトを知りたいな。
配色の知識がないとなんとなくで色を決めてしまい、ど素人感のあるブログになっちゃたりします。
過去の自分のブログがそうでした。
そんな時にカラーコード（色番号）を真似するだけで綺麗なブログができると楽ですよね！
今回はおすすめの配色５パターンだけでなく、ブログの配色の設定方法も詳しく解説しています。
☑ 本記事の内容
おすすめのブログ配色の見つけ方
さっそく配色を選び、設定していく手順を解説します。
ツールに配色を選んでもらう
配色パターンは配色ツールを使って選ぶと失敗しないですよ。
調和のとれた色の組み合わせを提案してくれるからです。
ブログを作り立ての人にありがちなのが、好きな色を自分で何色も選ぶケース。
自分もそうだったんですが、必ずダサくなっちゃうんですよね…。
「そうは言っても自分の大好きなブルーを選びたい！」
気持ちはわかりますが、ブルーと言ってもたっくさんあるんです。
配色見本ならセンスのいいカラーを提案してくれるので頼った方が安心です。
4つのサイトを紹介するので使いやすいものを見つけてみてください。
（色の選び方は後述してます）
配色ツールその①Coolors
（引用：https://coolors.co/5c6f68-8aa39b-95d9c3-a4f9c8-a7fff6）
スペースキーを押すたびに5色のカラーパレットがランダムで表示されます。
もし5色のうち気に入った1色があれば、その色だけをロックして別の4色のパターンを表示することが出来ます。
ひたすらスペースキーを押し続ければいいので楽ですね。
配色ツールその②palettable
（引用：https://www.palettable.io）
出てきた色を「スキ：like」か「キライ：Dislike」で判断していくと自分好みの配色が完成します。
5色の組み合わせまで選べます。
直観で操作できるの使いやすいサイトです。
配色ツールその③pigment
（引用：https://pigment.shapefactory.co）
2色の組み合わせから選べます。
左側で明るさも調整できますね。
コントラストのある配色にしたい場合に向いてます。
配色ツールその④canva
（引用：https://www.canva.com/ja_jp/learn/100-color-combinations）
ツールではないですが100個の配色パターンが載ってるページです。
夏っぽい、都会っぽい雰囲気、などイメージで色を選べます。
3色以内におさえる
使用する色は3色に抑えたいところです。
色数が少ない方が扱いやすく、まとまりが生まれます。
左側は5色使用、右側は3色使用。
比べてみると、右側の方がまとまってると感じませんか？
例えば当ブログはこの3色がテーマカラーです。
とは言っても使ってるテンプレートによっては、3色だとうまく設定できない場合もあるかもしれません。
例えば当ブログの見出しはさきほどの3色ではないグレーを使ってます。
このように選んだ3色だと見出しの色に微妙…という場合は、無彩色を見出しの色に選ぶのがいいと思います。
メインカラーはうすい色
ブログのヘッダー／フッターなど、メインカラーとして設定する色は、なるべく薄めの色がいいですよ。
濃い色だとインパクトがあって扱うのが結構難しいんですよね。
しかも薄めの方がおしゃれに見えます。
たった3色だけど…
この3色を選ぶ作業がちょっと難しいかなと思います。
ブログの見た目に大きく影響してきますからね。
たとえ配色見本の通り選んだ色だとしても、いざ自分のブログカラーに設定するとイメージと全然違ったり…。
ちゃんとおしゃれにしたいのであれば、やはり勉強が必要です。
色に関する知識ゼロの人に超基礎から教えてくれる本です。
他の本より初心者向けに書いてあるので、テクニックをマネしやすいですね。
好きな色「だけ」を選んでたのは失敗だったんだと気づかせてくれました。
ブログの配色を設定する場所
では3色が見つかったらブログに色を設定します。
- アイキャッチ
- ヘッダー／フッターの色
- ヘッダー画像（あれば）
- 見出しの色
- その他色が選べる部分
ポイント：アイキャッチ
アイキャッチにもテーマカラーを使った方がよりブログの見た目が統一されます。
アイキャッチはブログの中でも印象を左右しますからね。
なので使う画像にもテーマカラーを合わせるとさらに統一感がでます。
例えばメインカラーがブラウンだった場合、高品質なブラウンの画像でまとめると一気にオシャレになります。
（引用：https://unsplash.com）
美しい画像のフリー素材： unsplash
（引用：https://unsplash.com）
海外のセンスのいい写真が揃ってるフリー素材サイトです。
アイキャッチ画像の作り方はこちらの記事で詳しく解説しています。
おすすめの配色をブログに設定してみた
さきほどの配色ツールを使って見つけたオススメの配色パターンを、ブログレイアウトに当てはめてみました。
イラストなのであくまでも参考イメージです。
やわらかい雰囲気の色味を中心に選びました。
その①
使用カラーコード
その②
使用カラーコード
その③
使用カラーコード
その④
使用カラーコード
その⑤
使用カラーコード
まとめ
というわけでまとめます。
- 配色ツールで3色選ぶ
- ブログの各場所に色を設定
- アイキャッチ画像もテーマカラーを使う
この記事を読み終えたら配色ツールを使ってテーマカラーを選んでみましょう。
を使用しております。
「シンプル・簡単・時短」を叶えてくれます。
