ブログの色を决めたい!色選びに便利なサイト10選!

今回はデザインの観点について書いていきます。

ブログのデザインなどを決める際にはレイアウトや文字のサイズやフォントなど様々な要素を考慮していかなければいけませんが、その中でも非常に重要な役割を担うものがブログの色です。色にはそれぞれの色ごとに見込める効果がありそれらを知っておくのと知らないのでは大きな差が生まれてしまいます。今回はそんな色が持つ効果や配色などを決める際に役立つ便利なサイトをいくつかご紹介していきたいと思います。

色が与える影響とは

同じ内容のブログであっても全体の色が違えばブログの印象というのは大きく変わります。そのため色というのは人にとって様々な印象をあたえることから色彩心理という言葉もあるほどです。それぞれの色が与える印象を知っておくことで自分のブログに適した色を知ることができ結果としてブログ収入につながることになります。

・赤色が与える効果
赤色は一般的に購買色と呼ばれています。赤色はその色の特徴から非常に目にとまりやすい色でもあります。「○○%オフ」や「大特価」などスーパーで見かける広告などに赤色が多いことも赤色が購買色であるためです。また、生まれたばかりの子供のことを赤ちゃんと呼びますがこれは新生児が一番初めに認識できる色が赤色だからといわれています。そのためブログ内での商品販売などをメインとするのであれば赤色をメインカラーとするのが良いでしょう。

・青色が与える効果
青色は気持ちの鎮静効果が見込める色とされています。心を落ち着かせてくれる効果がある一方、寒色であるため冷たさを感じさせる心理的効果もあります。また、知的な印象も与える効果があるため雑学的なブログや専門知識が多いブログであれば適しているといえます。それらの効果以外にも食欲減退効果もあるためそこを上手に活用したブログ運営もおもしろいかもしれません。

・黄色が与える効果
黄色は太陽光などの自然光に近い色とされています。そのため青色とは違った心を落ち着かせる安心感を与えることができます。喜びや希望の色でもあるとされており読者が読んでいて楽しい気分にさせるような記事内容であれば黄色が適しているといえます。また、黄色は金運アップの効果もあるとされているため節約術や金銭的なブログも適しています。

・緑色が与える効果
緑色は草や木といった身近にある自然の色であるため緊張感を和らげる効果が見込まれます。窓から山や自然を見ていると自然と心が落ち着くという経験があるかと思いますが、緑色が与える効果がまさにそれです。また、緑色は目の疲労を和らげるとも言われており健康面での効果が見込まれることから健康系のブログなどに適しているといえます。

配色で気をつけること

色が与える効果からブログのメインカラーが固まってくると次に決めることは配色です。メインカラー1つでブログを作成してしまうとそれだけでは色が与える効果を十分発揮することができません。場所によってはあえてアクセントカラーと呼ばれるメインカラーとは異なる色を入れることでメインカラーの効果をより強くすることができます。

配色については基本的な割合がありそれは配色の面積割合です。ブログで使用する色を大きく3つに分け、それぞれの色の割合を一定にすることでバランスのとれたブログにすることができます。使用する色の3つの区分は「ベースカラー」「メインカラー」「アクセントカラー」となり、それぞれの割合を70:25:5にするとバランスのとれた好印象なデザインになるといわれています。

・ベースカラー
ページの中で最も大きな面積を占める基本色であり背景色や余白に使うことが多い色となります。残りのメインカラーとアクセントカラーを引き立てるために使用します。そういった意味では脇役というイメージになります。よく使用される色としては白・黒・グレーなどの色味のない色があります。メインカラーとアクセントカラーの邪魔にならないような色を選ぶことが重要です。

・メインカラー
自分のブログで読者に与えたい印象をより強くするために選ぶ主役の色のことです。ベースカラーとアクセントカラーとの組み合わせによりブログの印象を決定づける大事な色です。上記にあるように自分のブログ内容にあった適切な色を選ぶことが重要です。

・アクセントカラー
ページ内の使用割合は5%と非常に少ないですが色としては一番目立つ色を選択することで全体をまとめる効果があります。ベースカラーとメインカラーだけでは全体的にフラットな印象となってしまうためベースカラーとメインカラーとは真逆の色を足すことでメリハリをつけることができます。よく使用されている場所としてはお問合せフォームのボタンなどがあります。

色選びに役立つサイト

色が与える印象というのは上記である程度は理解できたかと思いますがやはり実際に見てみた方が具体的にどのような印象を与えるかというのはわかりやすいかと思います。また色は非常に多くの種類があるため細かな色味を調整することで、さらに色の与える効果を発揮させることができます。現在は登録無料で使用することができる配色ツールやサイトなどが多く存在するため、その中からいくつかのサイトをご紹介したいと思います。

・配色の見本帳
色の見本がページ上に並んでおりそれらの色を選択することで類似色や反対色などを掲載してくれます。カラーコードも表示されているのでシンプルで便利です。

・原色大辞典
原色だけでなく非常に多くの種類の色が掲載されているため細かな配色を決めることができます。イメージなどから色を検索してくれる機能もあり、背景色と文字色の組み合わせもできるので配色を考えやすいサイトです。

・シーン別配色見本32パターン
それぞれの色をカテゴリー別に分けられており色が与える印象についてあまり理解できていない人でも簡単に適切な色選びをおこなうことができます。イメージが決まっているがどの色にすればよいのかわからない人にはぴったりです。

・ウェブ配色ツールbyフォルトゥナ
メインカラーを指定することで背景色やベースカラーを自動でおすすめしてくれる機能が非常に便利です。サイトプレビュー画面もあるため、よりイメージに近い配色を決めることができます。

・Brand Colors
大手企業などのブランドカラーを調べることができるサイトです。大手企業などのブランドカラーを知ることで類似業種のイメージカラーを参考にすることができます。色のコピーもすることができるため非常に便利です。

・配色パターン見本40選
万人受けする配色やクール系の配色など6パターンの中から配色を選ぶことができ色選びや配色が苦手という人でも簡単に配色を決めることができます。プレビュー画面もあるのでブログの完成イメージをしやすくなっています。

・Random Material Palette
クリックをするたびに背景色や文字色などの3色を組み合わせて表示してくれるので、配色イメージが全くない場合でも参考にすることができます。また、イメージがある程度固まっている場合でも思いもよらない配色が見つかることもあります。

・Color Hunt
世界中のユーザーが作成したカラーパレットを見ることができるため配色の参考にすることができます。自分のオリジナルのカラーパレットを投稿することもできるのでたくさんのユーザーと情報共有することができます。

・Color of Book
実際に雑誌や書籍の表紙の配色を調べることができます。ファッション誌やスポーツ誌ごとに検索することができることや、参考となる雑誌などからカラーコードをコピーすることができるため非常に便利です。

・design shack
こちらは配色ではなく海外サイトを検索するためのサイトです。サイトのタイプや色から海外サイトを検索することができ、サイトに使われている色を調べることもできます。色だけでなくサイトデザインの参考にもなります。

まとめ

ブログで使用する色のイメージがなかなか思いつかない人でも上記のようなサイトを駆使すれば簡単に適した色というのは見つけることができます。色を見つけながらサイトデザインの参考になるサイトもあるので色々なサイトを回ってバランスのとれた配色とデザインを見つけましょう。