MENU
ワープレ
【著者プロフィール】
▶︎ WEBマスター歴20年以上/元WEBデザイナー(出版社のHPなど)
▶︎ WordPress構築歴は10年以上
▶︎ 資格:ネットショップ実務士レベル1/基礎心理カウンセラー
▶︎ WordPress構築最適化・テーマの活用方法・アフィリエイトブログの作り方など発信
▶︎ ブログ収入は1000万円以上を達成しています。
▶︎ 掲載しているノウハウ・結果には個人差があり、成果を保証するものではありません
▶︎ 趣味:ブログ・音楽・筋トレなど
レンタルサーバーからWordPress開設まで〜ブログを始めるにはどこがいい?

オシャレなブログデザインの配色パターンは色彩心理学的に設定すると悩まない!

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

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

目次

オシャレな見やすいブログデザインの配色パターン

人は色に感情を抱きます。
色彩心理学の基礎テックニックでブログの配色を決めよう!

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

NGなブログの配色

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

濃い色の背景色に濃い色の文字を載せてしまう・・・
これ、本当に初心者がよくやりがちなミスです。

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

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

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

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

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

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

テーマに合った適切なキーカラーを設定しましょう。

キーカラーとはサイトのメインになる配色でヘッダーやアクセントとなる箇所などに使います。

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

色彩心理学

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

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

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

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

現代広告の心理技術』を学ぶと色彩心理を考えた配色設定ができるようになります。
そのほかにもブログに役立つ消費者心理、セールスライティングが学べます。

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

色も情報を持っており、人間は色を見るだけでさまざまな感情を抱きます。

世の中のデザインやサインは色彩心理が反映されています。

信号や標識などは特にそうです。

『止まれ』は赤、『注意』は黄色です。

お店やネットでは特売品の値段は赤で表示されています。

世の中にあるほとんどのものは人の感情を考えて色の配色が設計されています。

ブロブの配色であまり目立った色使いをしたり色数が多くなると、読んでいる人が受け取る情報が多くなります。

ブログは文章を読んでもらって理解してもらうのが一つの目的なので、それ以外のところで情報を与えすぎるとかえって大事な情報が伝わらなくなります。

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

SWELLのカラー設定箇所はこちらにまとめました。

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

軽いブルーカラーの配色

青は年齢性別関係なく平均的に最も好まれる色です。

配色パターンに迷っているなら、まずこのパターンを設定してみましょう。

#42A0FF
#A9DAFF
#81D0CB
#FFDC5D
#3C3C3C
配色パターン1

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

ブルー基調にイエローとレッド系を配色

ブルーを基調にアクセントカラーにもう少しインパクトが欲しい場合に。

#42A0FF
#A9DAFF
#FFDC5D
#E37A60
#3C3C3C
配色パターン2

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

さわやかなミントカラーな配色

爽やかさ、柔らかさが欲しい場合の配色パターンです。

この配色パターンも結構何にでもあいます。

#81D0CB
#B6E6E3
#FFDC5D
#A9DAFF
#3C3C3C
配色パターン3

4:ヘルシーなグリーン

ヘルシー系グーリンの配色

ヘルシーな印象を与える配色パターンは、生活情報や健康情報ブログに合います。

#96C23D
#C9E265
#FFDC5D
#91DBEF
#3C3C3C
配色パターン4

5:元気がでるイエロー

元気が出るイエロー系の配色

もう少しアクティブな印象を与えたい場合、元気が出るイエロー系の配色がおすすめです。

#FBC60E
#FFDC5D
#FFB36B
#A9DAFF
#3C3C3C
配色パターン5

6:元気が出るオレンジ

元気が出るオレンジ系配色

より明るく元気なオレンジをキーカラーにした配色です。

#FFB36B
#F6CAA1
#FFDE59
#A9DAFF
#3C3C3C
配色パターン6

配色WEBツールを使う

配色例をクリックするとおすすめの配色サンプルを簡単に確認することができます。

6桁のカラーコードも表示されるので、そのまま設定するだけでベストなブログ配色が完成します。

その他の配色パターンもみたい場合は、サルワカの配色ツールを使ってみてください。

オシャレなブログデザインにおすすめのWordPressテーマ

WordPressはデザインテンプレート(WordPressテーマ)を変えるだけで、デザインや機能を変えることができます。

人気のワードプレステーマは次の3つです。

  1. SWELL
  2. SANGO
  3. Coco0n

オシャレに仕上がるWordPressテーマのおすすめは有料テーマならSWELLがおすすめです。

SWELLは現在一番人気のWordPressテーマで実装するだけでもオシャレなWordPressブログが仕上がります。

SWELLは多機能なので価格以上の価値があります!

高機能で人気のテーマ

おしゃれでかわいいブログデザインができるのがSANGOです。

SANGOをオシャレなデザインにするには多少カスタマイズを工夫する必要があります。

SANGOとSWELLを両方実際に使ってみて感じるのは、SWELLの方がカスタマイズがしやすくブログも書きやすいです。

無料テーマで人気のCocoonは、カスタマイズに手間はかかりますが努力すればオシャレなブログに仕上がります。

WordPressブログのカスタマイズに慣れていればおしゃれになりますが、初心者だとかなり難しいのがデメリットです。

まとめ

どんな印象を与えるか?で配色パターン例をまとめました。
まずは参考に設定してみてください。

配色の勉強を特にしたことがなかったり気にしたことがない初心者は、ブログの色設定で失敗している人が多いです。

ブログが醜く不愉快な印象を与えてしまうので、心地よい配色パターンをマネして設定してみてください。

HTMLカラーコードをコピペして設定するだけなので簡単にマネできますね。

ブログのことでわからないことがあれば、是非またYOAKE WEBを読みにきてください。
いつでも待ってます!

Twitterでも「ブログ見ました」と書いていただければ、答えられる範囲で答えます。(@warpressblog

稼ぐブログを始める基本を解説!!

趣味で楽しく稼ぐブログを作って副収入を増やしてみよう!

月5万円ぐらいの副収入を安定して得る方法をまとめました!

ネットで収入を得たいなら必見の動画

ブログを始めて3ヶ月目ぐらいでこの動画講座を知って、それ以降、私はブログで稼ぎ続けることができています。
ブログ初心者必見の内容です。

\ マーケティングがわかる /

※無料コンテンツ後に課金プランあり(課金しなくてもOKです)

  • URLをコピーしました!
目次