【2021年】人気WordPress 無料・有料テーマ比較

ブログの配色は心理学で考えると悩まない|カラーコード付き

ブログの配色

  • ブログの配色に悩みっぱなし
  • ブログの配色が納得いかない
  • ブログの配色が悪いと言われた
  • ブログの離脱率が高すぎるから改善したい

ブログを運営する上において配色ほど大事なものはないと言ってよいかもしれません。

配色ひとつで印象が変わってしまうので、あらゆるデザイン物は配色が非常に重要です。

ブログの配色は心理学で考えると悩まない

カラースキーム

ブログは誰でも書くことができます。

個人や企業に関わらず多くの人がブログを検索してアクセスします。

プロがデザインした企業メディアもライバルになりますし、個人ブログだって素敵な配色のものはたくさんあります。

ブログ初心者が適当に作ったブログではほぼ勝ち目はないです。

勝てるブログを作るには、この記事を参考にするだけでOKです。

配色設定を適切に行えば、ユーザーに無意識のうちに好印象を持ってもらえます。

memo
  • 即離脱されるようなきつい配色にしない
  • 淡い色を使う
  • メインカラーは3色までにする
  • キャッチーなアクセント色を入れる

NGな配色

カラースキーム
NGな配色
  • 黒背景は基本的にNG(とても目が疲れます)
  • 目が痛くなるようなきつい配色
  • 背景色と同化して読めない文字の色
わーぷれ
わーぷれ

ブログ初心者のブログやアイキャッチでよくみかけるにゃ。

秒で離脱したくなるにゃ。

強い色を使いすぎると非常にうるさくなるんだにゃ。

ビビッドなはっきりした色は一見するとかっこいいかもしれませんがダサくなりがちです。

ブログ全面に強い色を使っていると、長時間読むのが疲れるので離脱率が高くなります。

いくら好きな色でも、配色バランスを考えると使いすぎると逆効果になる場合もあります。

チラシ広告と違い、何度も読んでもらいたいブログの場合は特に気をつける必要があります。

離脱率を下げて、何ページも読んでもらうには「心地よい」と感じてもらえるやさしい配色にする必要があります。

ブログの配色・テーマカラーの決め方

テーマカラーの決め方
  • 配色は3色までに決めてそれ以外の色は極力使わない
  • 3色とは「キーカラー」「アクセントカラー」「アクセントカラー2」の3種類
  • 文字色に黒ベタ(#000000)以外を使うと、全体的にお洒落になるし文字が読みやすくなる
中の人
中の人

こういう色構造で色を決めると格段に好印象の配色を作ることができます。

キーカラーが決まれば、その他の色も自然と決まります。

色の組み合わせで人の印象が変わる|色彩心理学

人間心理を理解すれば配色パターンで悩まない

人間は色によって無自覚に印象を抱きます。

明るい気持ちになったり、爽やかな気持ちになったり、元気になったり、興奮したり、恐怖を感じたり、不安を感じたりします。

色だけで匂いを感じる場合もあります。

現代広の心理技術101」の306ページにも書かれている通り、消費者が一番好む色の結果が出ています。

詳しく知りたい人は本を読んでみるとよいでしょう。

そのほかにもブログに役立つ消費者心理が学べます。

あなたの好きな色はなんですか?

青?

赤?

緑?

黄色?

オレンジ?

紫?

次の配色スキームは最も好まれる組み合わせです。

カラースキーム

これはこのブログの配色スキームです。

一般的に最も好まれる配色パターンを使っています。

アクセントカラーがあることで、魅力的な配色構成を作ることができます。

アクセントカラーの選択をミスるとブログの魅力が半減してしまうので慎重に選びたいところです。

迷わない配色サンプル、マネするだけ

配色スキームの例を用意しました。

ブログの色をカスタムするときにカラーコードをコピペして設定すればOKです。

1:基本は軽いブルーカラー

カラースキーム

青はもっとも好まれる色です。

ブログ初心者は青を基調にした配色にするとよいでしょう。

#42A0FF

#A9DAFF

#81D0CB

#FFDC5D

#3C3C3C

SANGOテーマのベースカラーがブルーになっているのも、もっとも好まれる色がブルーだからだと思います。

SANGOテーマ メリット・デメリットWordPressテーマSANGOの評判|初心者が使いやすい有料テーマ

2:イエローとレッド系をアクセントカラーに

カラースキーム

キーカラーはブルー

アクセントカラーを強めにイエローとレッド系を配色しました。

#42A0FF

#A9DAFF

#FFDC5D

#E37A60

#3C3C3C

3:さわやかなミントカラー

カラースキーム

さわやかさや清潔感を出したい人へ。

イエローのアクセントカラーとの相性もバッチリです。

#81D0CB

#B6E6E3

#FFDC5D

#A9DAFF

#3C3C3C

4:ヘルシーなグリーン

カラースキーム

ヘルシー系の情報ブログで。

元気の出るイエローをアクセントに。

#96C23D

#C9E265

#FFDC5D

#91DBEF

#3C3C3C

5:元気がでるイエロー

カラースキーム

イエローはパワフルです。

エクササイズや健康食品系の情報ブログに合う配色です。

アクセントカラーの淡いブルーが爽やかさを感じさせます。

#FBC60E

#FFDC5D

#FFB36B

#A9DAFF

#3C3C3C

6:元気が出るオレンジ

カラースキーム

オレンジ系も元気が出る色です。

イエローと淡いブルーとのバランスもバッチリです。

#FFB36B

#F6CAA1

#FFDE59

#A9DAFF

#3C3C3C

ブログに最適な配色パターンは実はあまりないです。

常にいろんなものの配色パターンを研究しておくと参考になります。

「サルワカ配色」からブログ配色を選ぶ

サルワカというサイトに配色パターンをプレビューできるツールのようなものがあります。

スマホ画面のイメージプレビューがでるので、具体的にイメージしやすいです。

》サルワカ配色|配色パターン見本40選

まとめ ブログの配色は心理学で考えると悩まない

ブログ初心者はブログの配色で失敗している場合が多いです。

自分の好みで適当に配色するのは危険です。

一般的に心地よい配色に設定しておけば、印象もよくなり離脱率は下がります。

結果的にアクセス数が上がり収益アップも期待できます。

タイプで選ぶWordPressテーマ

心地よさを追求したデザインのWordPressテーマ

「稼ぐ」に特化したWordPressテーマ

国内最速レンタルサーバーConoHa