ブログの色:ベースカラー(背景色)・メインカラー・アクセントカラーの決め方

ブログの色

  • ブログの背景色って何色が良いの?
  • メインカラーとアクセントカラーってどうやって決めるの?

すもベビ

その疑問にすもベビが答えます。

ブログ設定で初心者を悩ませるのが「色(カラー)」です。

  • 文字色
  • リンクカラー
  • メインカラー
  • アクセントカラー
  • ベースカラー(背景色)

 

色はブログのデザインを決める重要な要素で、次のような効果があります。

  • ブログのイメージを決定づける
  • 見やすさや読みやすさに影響する
  • アフィリエイト広告のクリック率に影響する

特に重要なのが、ブログのイメージに影響するメインカラー、アクセントカラー、ベースカラー(背景色)の3つです。

この記事では、3つの色の決め方と役立つツールを紹介します。

 

ブログに使われる3つの色

ブログの色はメイン・ベース・アクセントの3つ

ブログのデザインに使う主な色は3つ。

  • ベースカラー(背景色)
  • メインカラー
  • アクセントカラー

ブログの3つの色

 

すもベビ

ブログの場合、ベースカラー:メインカラー:アクセントカラー=70%:25%:5%が最も居心地の良い配色になると言われています。

 

ベースカラー(背景色)

ベースカラー(背景色)とは、ブログの背景や余白などに使う色です。

配色比率は70%くらいが丁度良いとされます。

ベースカラー単体では目立ちませんが、メインカラーやアクセントカラーを引き立てる「縁の下の力持ち」になる色です。

 

メインカラー

メインカラーとは、ヘッダーや見出しなど重要な部分に使用してブログのイメージを決める色です。

配色比率は25%くらいが理想的と言われています。

メインカラーを何色にするかでブログのイメージや好き嫌いが決まるので、最も慎重に決めるべき色です。

 

アクセントカラー

アクセントカラーとは、強調したいところなどに使う最も目立つ色です。

配色比率は5%前後と少なめですが、ユーザーの注意を引くという重要な役割を果たします。

 

ベースカラー(背景色)、メインカラー、アクセントカラーの決め方

ブログの3つの色の決め方

それでは、ベースカラー(背景色)、メインカラー、アクセントカラーの決め方を解説します。

3つの色は次の順番で決めるのが一般的です。

  1. メインカラー
  2. ベースカラー(背景色)
  3. アクセントカラー

 

まず、ブログのイメージを決定づけるメインカラーを決めます。

それからメインカラーを引き立てるベースカラー(背景色)を選び、2つの色と並べたときに目立つ色をアクセントカラーにします。

 

メインカラー

メインカラーは、ブログのイメージを決める重要な色です。

色が人に与える印象を理解したうえで、ブログのターゲット(読んでほしいユーザー)に好まれる色を選ぶことが大切になります。

 

すもベビ

色が人に与える印象はあとで書きます。

 

使用しているテーマによって変化することはありますが、一般的には次のような場所で使用します。

  • ヘッダーの背景色
  • フッターの背景色
  • 記事タイトルの背景色
  • 記事見出し(h2、h3など)
  • ウィジェットタイトルの背景色

ヘッダー・フッターや記事タイトルなど、テキストを入れる部分の背景として使うことが多いことが分かります。

そのため、明度を低くした色が適しています。

 

また、ブログにロゴを使用する場合は、ロゴの色とメインカラーを同じにすると統一性が出ます。

 

メインカラーを決めるときのポイント
  • ブログのターゲットに好まれる色を選ぶ
  • 明度を低くした色を選ぶ
  • ロゴと同じ色を選ぶ

 

ベースカラー(背景色)

一般的にベースカラーとして使うことが多いのは3色です。

  • グレー

ベースカラーに白を使っているブログが大半ですが、ジャンルやコンテンツによっては黒やグレーが映えることもあります。

 

ベースカラーは、次のような場所で使います。

  • 背景
  • 文字の余白
  • コンテンツ間の余白

そのため、明度が高くて淡い色にするとユーザーが見やすくなり、ブログ全体も居心地の良い感じになります。

 

ベースカラーを決めるときのポイント
  • 白、黒、グレーが基本
  • 明度が高く淡い色を選ぶ

 

アクセントカラー

アクセントカラーは、ユーザーの目を引きたいところで使うので、メインカラーやベースカラー(背景色)より目立つ色を選びます。

複数のアクセントカラーを使っているブログも見かけますが、アクセントカラーが増えるほど扱いが難しくなります。

そのため、基本的には1色に絞りましょう。

 

すもベビ

アフィリエイトリンクのボタンをアクセントカラーにすると効果が高くなるジャンルもあります。

 

アクセントカラーを決めるときのポイント
  • ブログで最も目立つ色を選ぶ
  • 1色に絞る
  • ロゴと同じ色を選ぶ

 

色(カラー)が人に与える印象

色がユーザーに与える印象

ブログの配色を効果的にするには、色が人に与える印象を理解しておくことが大切です。

 

暖色・中性色・寒色

この記事では、ブログでよく使う8色が人に与える印象を書いていきます。

色の分類(色相) 具体的な色
暖色 赤、オレンジ、黄色
中性色 緑、紫、グレー、黒
寒色
  • 暖色:暖かさを感じさせる色
  • 中性色:暖色にも寒色にも属さない色
  • 寒色:冷たさを感じさせる色

 

「暖かそう」「冷たそう」というのは「温度」の寒暖だけではありません。

「包み込まれるような暖かさ」や「冷静でクール」といった人間的な暖かさや冷たさも含まれます。

 

暖色系は交感神経(活動中に機能)に、寒色系は副交感神経(リラックス中に機能)に作用することです。

つまり、ブログに楽しくて活発な印象を与えたいなら暖色系を、冷静で落ち着いた印象を与えたいなら寒色系を使うのが効果的です。

 

赤(暖色)

赤

赤は、三原色の1つを構成する代表的な暖色です。

ブランドカラーとしても人気があり、ユニクロ、Yahoo!、トヨタなど多くの有名企業が採用しています。

赤いモノは身の回りにあふれており、誰でも日常的に目にする馴染みのある色でもあります。

 

アクセントカラーにすると強いインパクトを出すことができます。

 

赤の印象
  • ポジティブ:エネルギッシュ、成功、興奮、情熱、リーダーシップ
  • ネガティブ:怒り、危機、警告

 

黄色(暖色)

黄色

黄色は、色相の中で最も明度が高い暖色です。

黒と組み合わせるとコントラストが強くなり、白と組み合わせるとコントラストが弱くなります。

NikonやLoft、マツモトキヨシなど企業ロゴにも使われています。

 

アクセントカラーとしてもインパクトが強いです。

 

黄色の印象
  • ポジティブ:明るさ、暖かさ、幸せ、親しみやすさ、可愛さ、子供っぽさ
  • ネガティブ:警告、幼稚さ、軽薄さ

 

オレンジ(暖色)

オレンジ

オレンジは、色相で赤と黄色の間に位置する暖色です。

赤や黄色の印象をあわせもつ「良いとこどり」カラーで、ブランドカラーとしても人気があります。

例えば、Amazon、吉野家、auなどを挙げることができます。

 

他の色と比べてネガティブな印象を与えにくいのが、オレンジ最大の魅力です。

 

オレンジの印象
  • ポジティブ:エネルギッシュ、元気、楽しい、にぎやか、子供っぽさ
  • ネガティブ:特になし(強いて言えば大衆的、知的さの欠如)

 

青(寒色)

青

青は、三原色の1つを構成する寒色です。

寒色の中では最もポピュラーで人気があり、ローソン、Asahi、Twitterなど多くの企業がブランドカラーとして採用しています。

落ち着いた印象を与える色として重宝されており、IT系のブログには向いている色と言えます。

 

青の印象
  • ポジティブ:清潔感、爽快感、冷静さ、知的、信頼、誠実さ
  • ネガティブ:冷たさ、不安、憂鬱、陰鬱

 

緑(中性色)

緑

緑は、色相の3原色の1つを構成する中性色です。

日常的に目にする色ですが暖色や寒色ほど刺激がなく、見るとホッとしたり落ち着いた気持ちになったりします。

LINE、スターバックス、LACOSTEなどのブランドカラーとして使われています。

 

緑の印象
  • ポジティブ:穏やかさ、安らぎ、リラックス、若さ、安全
  • ネガティブ:中途半端、平凡、醜さ

 

紫(中性色)

紫

紫は、緑と並ぶ代表的な中性色です。

暖色の赤と寒色の青の間に位置し、見た人に極端な印象を与えやすいので、扱いが難しいところがあります。

イオン、ヤマハ、Gunghoなどブランドカラーとして採用している企業もありますが、他の色と比べると少数派です。

 

紫の印象
  • ポジティブ:高貴さ、女性的、優雅さ、神秘的
  • ネガティブ:品のなさ、不信感、不健康、不良、不安

 

グレー(中性色)

グレー

グレーは、黒と白の中間に位置する中性色(無彩色)です。

濃いグレーと薄いグレーでは印象が大きく異なり、使い方が難しい色の一つとされています。

Apple、SWAROVSKI、NISSANなどのブランドカラーとして使われており、WordPressのロゴにも濃いグレーが含まれます。

グレーの印象
  • ポジティブ:上品さ、大人っぽさ、エレガント、先進的
  • ネガティブ:不安、不信感、退廃、冷たさ

 

黒(中性色)

黒

黒は、最も明度の低い中性色(無彩色)です。

他の色と組み合わせることで、その色が持つ印象を際立たせることができます。

ルイヴィトン、ディズニー、ナイキなどがブランドカラーとして採用しています。

 

黒の印象
  • ポジティブ:権威、気高さ、重厚、先進的、中立性
  • ネガティブ:闇、暗い、冷たさ、寒さ、陰鬱

 

ブログの配色に悩んだら「配色パターン見本」を使う

配色パターン見本

ブログの色の決め方が分かっても、配色に悩むことってありますよね。

そんなときは配色パターン見本を使ってみましょう。

 

配色パターン見本は、ブログの配色のパターンを提案してくれるツールです。

 

私は、WordPressテーマ「SANGO」の開発者であるサルワカさんが作った「配色パターン見本40選」を使っています。

配色パターン見本

一般受けしやすい配色パターンが40も準備されていて、配色プレビューで具体的に確認できる便利なツールです。

使い方は、たったの2ステップ。

  1. 配色パターンをクリック(タップ)
  2. 配色プレビューを確認する

 

配色パターンが確認できるサイトは多いですが、実際にプレビューして確認できるところは限られています。

配色パターン見本40は手順も簡単なので、初心者には特におすすめです。

 

すもベビ

PC版なら画面右、スマホ版なら画面下にプレビュー表示があります。

 

ブログの色のまとめ

色は、ブログを彩る重要な役割を果たします。

どれだけ役に立つコンテンツが多くても、配色がまずいとユーザーはあなたのブログのファンにはなってくれません。

ブログ設定というと機能面に目が向きがちですが、ブログのイメージを決定づける色についても早めに設定しておきましょう。