ブログの色の組み合わせは2〜3色がおしゃれ！【簡単おすすめ色の決め方】

ブログをおしゃれデザインにしたいけど、どうすればいいのかお悩みの方へ。

ブログを簡単におしゃれにする一つの方法は「相性のいい色の組み合わせ2色〜3色でまとめる」ことです。

ブログをオシャレにするのには、色を変えるのが一番簡単で効果的。

 

カラフルな色づかいも素敵ですが、カラフルな色づかいは使い方を間違うと、全体のまとまりがなくなり、結局伝えたい情報が伝わらないブログに仕上がる可能性があります。

実は、カラフルな色づかいをしているブログ・サイトは計算しつくして色を使ってます。

 

簡単で効果的ですが、悩ましいですよね。。

ブログの色づかい。

 

そこで一番簡単な色の使い方としては、ブログの基本色（メイン色）を2〜3色で決めることです。

相性のいい色の組み合わせ2色〜3色でまとめるだけで、一気におしゃれブログに変身。

 

現役デザイナー歴15年以上の自分がブログの色について簡単にまとめてみました。

すこしでも参考になれば嬉しいです。

 

 

そもそも色とは何？

実は色って、とても奥が深いもの。

色で、さまざまな影響を無意識の中で働きかけることができます。

色を効果的に使いこなすための基本を説明します。

 

色の基本となる「色の3属性」とは？

色の基本となるのは「色の3属性」です。

「色の3属性」とは「色相」「明度」「彩度」の3つのことをいい、「色の3属性」の性質で、全ての色を分類したり表示したりすることができます。

 

色相とは？

「色相」とは、「色み（色あい）の違い」を表すことで、赤・黄・緑・青などといった色味を表すのが色相です。たくさんの色をおおまかに分類するときは、「青系のグループ」といったように、色相の違いによってまとめられるのが一般的。

 

明度とは？

「明度」とは、「色の明るさ」の度合いを明度と呼びます。明度は高低で表され、明るい色ほど高くて白に近づいていき、暗い色ほど低くて黒に近づいていきます。

 

彩度とは？

「彩度」とは、「色の鮮やかさ」の度合いを彩度と呼びます。彩度は色味が近づいていき、色味が弱くおだやかな色ほど低く、無彩色に近づいていきます。

出典：色の事典 色彩の基礎・配色・使い方より

 

これが基本的な色の考え方です。色相・明度・彩度の組み合わせで色を決めていきます。

 

色が人にあたえるイメージとは？

色は昔から歴史的背景などから、人にいろいろな影響をあたえています。

色で知らず知らずのうちに、物事のイメージを左右されることは多くあります。

そのため色を使う時は、あたえるイメージを考えながら使用していきます。

「赤色」があたえるイメージ

「オレンジ色」があたえるイメージ

「黄色」があたえるイメージ

「緑色」があたえるイメージ

「青色」があたえるイメージ

「紫色」があたえるイメージ

「白色」があたえるイメージ

「グレー色」があたえるイメージ

「黒色」があたえるイメージ

出典：色の事典 色彩の基礎・配色・使い方より

 

ブログイメージにあわせて色を決める

色のことを、いろいろいわれても正直難しいのが本音。

そこで、自分が運営するブログにあわせたイメージに色をあわせると上手くいきます。

そこで、イメージにあわせて色をセレクトしました。

（ブログ色オススメです。）

可愛いいブログイメージの色3選

可愛いイメージは基本、淡い色合いでまとめます。

ピンク系の薄い色、濃い色でまとめるか、プラスポイントとして「ブルーグリーン」「黄色」でアクセントをつけると可愛くまとまります。

【可愛い色イメージのAパターン】

【可愛い色イメージのBパターン】

【可愛い色イメージのCパターン】

 

かっこいいブログイメージの色3選

かっこよくするには、「青色」「濃いグレー」などの濃い色を入れるとキリッとしたイメージに。

「薄い青」「濃い青」、もしくは「薄いグレー」「濃いグレー」でまとめて、ポイント色として「オレンジ色」「少し濃いめの赤」を入れても、かっこよくまとまります。

画像引用元：REALATION

【かっこいい色イメージのAパターン】

【かっこいい色イメージのBパターン】

【かっこいい色イメージのCパターン】

 

優しいブログイメージの色3選

同系色または同じような色合いでまとめると優しいイメージになります。

「薄いベーシュ」「やさしいオレンジ」「薄めの茶色」、もしくは「すごく薄いピンク」「薄いピンク」「ボルドー系」でまとめると、優しいけどメリハリがある色合いになります。

画像引用元：くわざわ

【優しい色イメージのAパターン】

【優しい色イメージのBパターン】

【優しい色イメージのBパターン】

 

爽やかなブログイメージの色3選

爽やかなイメージは、薄い青系の色でまとめます。

全部薄いと、ぼやけたイメージになるので、ポイントの色として「派手ではない濃い青色」「グレー色」をいれると、全体的に引き締まります。

画像引用元：泡おもい

【爽やか色イメージのAパターン】

【爽やか色イメージのBパターン】

【爽やか色イメージのCパターン】

 

ナチュラルブログイメージの色3選

ナチュラルなイメージにするのには、自然の色合いにします。

同系色（同じような色合い）で薄い、中薄い、濃い色で作成するのがベスト。

ポイントの色として、ナチュラルな色を1色入れても素敵です。

画像引用元：緑の森どうぶつ病院

【ナチュラルイメージのAパターン】

【ナチュラルイメージのBパターン】

【ナチュラルイメージのCパターン】

 

スタイリッシュブログイメージの色3選

スタイリッシュにするのには、都会的な色とされているグレー系の色でまとめます。

青系でも、少しグレーが入ったような色のパターンに。

またポイントの色として、オレンジ色、濃い赤色などが入っても素敵です。

画像引用元：Custo

【スタイリッシュイメージのAパターン】

【スタイリッシュイメージのBパターン】

【スタイリッシュイメージのCパターン】

 

ビジネス向けブログイメージの色3選

ビジネス向けはカッチリとしたイメージに仕上げます。

「白に近いグレー」「濃いグレー」「黒色」などでまとめます。

ポイントの色として、「濃いグレー」を「濃い青色」にしたり、プラス色として「赤色」を入れるのもいいですね。

すこしやさしいビジネス向けであれば、ベージュ系の同系色（同じような色合い）でまとめます。

画像引用元：MT-planning.ltd

【ビジネス向けイメージのAパターン】

【ビジネス向けイメージのBパターン】

【ビジネス向けイメージのCパターン】

 

 

ブログを読む性別・年齢層にあわせて色を決める

記事を読まれるであろう性別（女性・男性など）、または年齢層にあわせた色づかいをするのも、広告の世界ではよく使う手法です。

女性向けのブログイメージの色

女性向けの場合、やわらかなイメージの色を使うと上手くいきます。

緑ベース、ピンクベース、ちょっと落ち着いたベージュピンクベースなど。

画像引用元：MARNON

【女性向け色イメージのAパターン】

【女性向け色イメージのBパターン】

【女性向け色イメージのCパターン】

 

男性向けのブログイメージの色

男性向けは、濃いグレー系、紺系、黒系をベースに考えると上手くいきます。

ポイントの色として、黄色、ダーク赤色をいれてもオシャレになります。

画像引用元：Social Capital Production Inc.

【男性向け色イメージのBパターン】

【男性向け色イメージのCパターン】

 

20代〜30代向けのブログイメージの色

20代〜30代向けは、パステル系のやさしい色づかいで仕上げます。

ただし、パステル系だけでまとめるとブログ全体がぼやっとしたイメージになるので、一番濃い色にはパステル系の濃い色を使うとまとまります。

画像引用元：YUKO SUGAMOTO OFFICIAL SITE

【20〜30代向け色イメージのAパターン】

【20〜30代向け色イメージのBパターン】

【20〜30代向け色イメージのCパターン】

 

40代〜50代向けのブログイメージの色

40代〜50代向けのブログの色は、少し落ち着いた色が好まれます。

どちらかというとナチュラル系に近い色です。

ベージュ系、紫色系、緑色系、または落ち着いたピンク系などの同系色（同じような色合い）でまとめると、素敵なイメージに。

画像引用元：Rum

【40〜50代向け色イメージのAパターン】

【40〜50代向け色イメージのBパターン】

【40〜50代向け色イメージのCパターン】

 

60代〜向けのブログイメージの色

60代〜向けは、少し落ち着いた色をセレクトにします。

濃い色は、色を付けた文字でも良く見えるように、できるだけ濃いめの色を選びます。

とはいえ、今は60代〜も元気な時代。「年寄りだから」というイメージではなく、年配の方にもすがすがしく見てもらえるような色を選択をします。

画像引用元：minoh-greenvilla

【60代〜向け色イメージのAパターン】

【60代〜向け色イメージのBパターン】

【60代〜向け色イメージのCパターン】

 

 

ワードプレステーマ「アフィンガー6」での色の設定方法

自分おすすめワードプレステーマ「アフィンガー6」での色設定方法を説明します。

アフィンガー6は、あちこちのパーツの色を自在に設定できる優れもの。

とはいえ、アフィンガー6に慣れないうちは、初心者向けの基本設定「全体カラー設定」で色設定をしていきます。

（アフィンガー6に慣れてきたら、それぞれのパーツごとに色を設定していきましょう。楽しいですよ。）

 

 

「アフィンガー6」での色の決め方

ワードプレステーマ「アフィンガー6」で色を設定する時は、キーカラー（一番濃い色）、メインカラー（少し薄い色）、サブカラー（とても薄い色）を設定します。

一番簡単なのは、この3色を同系色（同じような色合い）「濃い色」「少し薄い色」「とても薄い色」にすると、ブログ全体の色がまとまります。

 

アフィンガー6での色設定方法〜「全体カラー設定」

アフィンガー6での色基本設定、「全体カラー設定」での色設定方法です。

ワードプレス左メニューから、「外観」→「カスタマイズ」をクリック。

「全体カラー設定」をクリック。

「全体カラー設定」画面の「キーカラー」「メインカラー」「サブカラー」を変更していきます。

arrow_downward

1つづつ変更していきます。

まずは、サブカラーの「色を選択」をクリック。

色が修正できるようになるので、本記事（nondori.com）の気に入った色コード「#fcf1f0」などをコピー。→サブカラーの色コードにペースト。（「#」も忘れずに。）

3ヶ所色を設定する。

 

画面の下にある「簡単設定を使用する」項目内の、「(1)全体的に反映：〜」を選択する。

 

設定パネル右上にある「公開」ボタンをクリック。

これで、色の変更は完了です。

簡単です。

 

基本設定で色が変わらなかった場合

基本設定で色が変わらなかった場合。

【プロフィールカードの場合】

ワードプレス左メニューから、「外観」→「カスタマイズ」をクリック。

「オプション（その他）」をクリック。→「プロフィールカード」をクリック。

プロフィールカード項目の中の「ボタン上部背景色（プロフィールカード）」「ボタン下部背景色（プロフィールカード）」の色を変更する。

設定パネル右上にある「公開」ボタンをクリック。

で変更できます。

 

まとめ

おしゃれブログにするのには、相性のいい色の組み合わせ2色〜3色でまとめるのがオススメです。

同系色（同じような色合い）で、濃い色、少し濃い色、薄い色でまとめていくと簡単オシャレブログに変身。

また応用編として、同系色でまとめたブログに、ポイントの色として（例えば見だしの端の色や、タグの色などに）違う色を入れると、もっとおしゃれになります！

アレンジを加えて、ぜひお試しください。

 

今回は、ワードプレステーマ「アフィンガー6」での設定の仕方も紹介しましたが、他のテーマを使用していても、相性のいい色、2〜3色（同じような色合い）でまとめるとオシャレになります。

ちなみに、ワードプレステーマ「アフィンガー6」であれば、簡単に設定可能です。

 

AFFINGER6（アフィンガー6）の購入を検討中の方であれば、AFFINGER6本体のみ購入で、追加でお金がかからない「のんどりデザイン限定簡易カード済デザインフォーマット」、「Firsty　シリーズ（4種類）」をのんどりデザイン限定特典としてお渡ししています。

Firstyシリーズ（4種類）を特典としてもらって、色の悩みから解放！

＼のんどりデザイン限定特典付き／
AFFINGER6［ACTION］> >

詳しくは↓

「アフィンガー6はできることがおおい？」3年間使った感想のまとめ［特典付き］

続きを見る

AFFINGER6は初心者には難しいといわれるが本当か？

続きを見る

 

関連記事

AFFINGER6記事作成パーツ一覧まとめ［クラシックエディタ（ブロック）バージョン］

続きを見る

「アフィンガー6はできることがおおい？」3年間使った感想のまとめ［特典付き］

続きを見る

AFFINGER6は初心者には難しいといわれるが本当か？

続きを見る

無料ツールでブログのアイキャッチ画像を5分で作成！［簡単デザインアプリCanba］

続きを見る

 

TOPページに戻る