今回はブログのテーマカラーの決め方について紹介していきたいと思います。ブログのカラーはそのブログのイメージを決める重要な要素です。また、あまりにもおかしなカラーを選択していると、ユーザーの離脱にも繋がるので、ブログの配色は重要な要素になります。
この記事ではどうやってブログの配色を決めればいいのか、その手順と具体例を紹介していきます。
また、実際に便利なツールも紹介していきますので、自分でも簡単に配色を決められるようになります。
ブログの配色を決める流れ
それでは、早速ブログの配色を決める流れを説明していきます。パターンはいくつか存在しますが、特にやりやすいやり方としては以下の通りです。
まず、ブログのテーマ色の系統を決める。
薄い色を使うのか、濃い色を使うのかを決める。
ベースカラーを決定し、そのベースカラーを基に強調するカラーであるアクセントカラーを決める。
という流れになります。背景色と文字色については最後に触れていきますが、基本的には決まったパターンがあるので、それを使用しておけば心配はありません。では、まずベースカラーを決めていきましょう。
ブログのベースカラーの選び方
ブログの配色の決め方は何通りかありますが、まず始めに決めるべきはベースカラーです。このベースカラーから青を選ぶことによって、ブログ全体のイメージや雰囲気を決め、その他の色を選ぶ基盤にもなります。
ベースカラーを何色にしようか迷っている場合、最もベーシックなのは青系の色を使うことです。青は男女共に人気の高い色であり、知的な印象を与えることができるカラーです。実際、皆さんが見るサイトでも青をベースにしているサイトは多いのではないかと思います。また、濃くしていくと、より知的な印象や先進的なイメージが追加されます。一方で薄くしていくと、少し柔らかい印象が追加されていきます。
青系
青のような寒色系の色は、知的なイメージや冷静さ、誠実さを示すのに有効と言われています。一方で冷たい印象を与えてしまうため、専門的な情報やテクノロジーのようなテーマで発信していく場合に特におすすめです。逆に人との触れ合いをテーマにするようなコミュニケーションや温かみを重視するようなテーマの場合には、寒色系は使わない方が良いです。このような温もりの印象を与えるカラーは暖色系になりますので、そのようなテーマのブログの配色を考える場合は、オレンジをベースに考えていくのがオススメです。
暖色系
真っ赤をベース色に選ぶときつい印象を与えてしまうことがあるため、オレンジをベースにすることで、その印象を和らげることができます。その結果、オレンジが持つ温もりや元気な印象を活かしたサイトを作成することができます。
中間色
その他、中間色として緑系統を選ぶのもおすすめです。緑は自然を彷彿とさせるイメージがあり、自然に関するテーマや生活、健康などのブログに適しています。
色の濃さ
まず、ベースカラーの大まかな色の系統を決定しましょう。色の系統が決まったら、次にその色の中でも濃い色を使うのか、薄い色を使うのかを決定していきます。白をベースにしてシンプルなサイトを作成し、比較的薄い色でブログを構築する場合、柔らかい印象を与えることができます。一方で濃い色を使う場合には、特にタイトルなどの白文字が際立ち、やや固めの印象になります。自分のブログの特性に応じて、色の濃さを選択しましょう。
飲食関連のテーマを選ぶ場合は、ベースとなるカラーと同じ系統の濃い色と薄い色の両方を選ぶと良いです。
アクセントカラーの決め方
ベースカラーが決まったら、次にアクセントカラーを選定します。アクセントカラーは文字や要素を強調するための色です。一つか二つを選びます。一つを選ぶ場合、基本的にはベースカラーの補色を選ぶと良いでしょう。補色とは、その色と真逆の色を指します。その結果、選んだ色が強調されます。例えば、青の場合、補色は黄色や赤になります。
二つのアクセントカラーを選ぶ場合、分割補色の組み合わせを利用するのがおすすめです。分割補色は、色相環から少し離れた位置にある左右の二つの色を選ぶ方法です。これによって、ベースカラーと対照的で目立つ色を選ぶことができます。
配色を決めるためのツール
配色選びには、Adobeのカラーツールを使用することをおすすめします。以下のサイトからアクセスできます。
Adobeのカラーを選ぶツール
アクセントカラーを選ぶ際、1色か2色かを考えましょう。
1色の場合は補色を選んで片方をベースカラーに設定します。この時の反対側の色がアクセントカラーです。
2色アクセントカラーを選ぶ場合、分割補色を選択して、選んでいきます。
ベースカラーが下に延びる1本のラインの色になるように設定し、（画像の例は紫系の青）左右にある色がアクセントカラーになります。この角度は調節可能ですので、好みに合わせて調整しましょう。
最後に微調整を行います。特に明度を調節することで、サイトの印象を大きく変えることができます。カラーコードを使用して適切なカラーを選ぶことで、ベースカラーの系統、濃い色と薄い色、そしてアクセントカラーを知ることができます。
例えばこのブログは、
– ベース #073678
– 薄い色 #7B9BC7
– アクセント1 #E36F24
– アクセント2 #F07D29
で主に構成しています。
背景と文字
背景色と文字色については、基本的なパターンが存在します。背景色には白または白に近い灰色を選び、文字色は黒に近い色を使用します。ただし、真っ黒ではなく、やや明るい色を選ぶことをおすすめします。
まとめ
今回はブログの配色を決める方法を紹介しました。基本的なルールに従って配色を決めることで、分かりやすく、かっこいいサイトを作成することができます。配色を決定する際には、少し時間をかけて慎重に考えることをおすすめします。また、この配色をブログのテーマに設定する方法として、ブロガーのクープというテンプレートを使用する場合の手順も記事で紹介していますので、ぜひ参考にしてみてください。
