MENU
ぱぴー
ブロガー
・40代サラリーマン
・妻子持ち、子育て世代
・2022年ブログ開始
・1日1時間で月3万の副業収入達成
・ゆるーく稼げるブログの方法

【危険】配色を決めずにブログは始めるな!役立つおすすめ配色サイト

相談者

とりあえず、ブログを作って頑張るか

ぱぴー

ちょっとまって!配色はちゃんと決めた?

これから、ブログを始めようとしているあなた。

ブログに使う色、決めましたか?

配色を決めずにブログを開始してしまうと、後々大変なことになりますよ。

筆者も、配色を決めずにブログを始めてしまい、修正で苦労しました……

当記事では、筆者の失敗をふまえながら、配色を決める方法や、役立つ配色サイトを紹介しています。

ぱぴー

著者経歴

  • 1日1時間で月3万円到達
  • 月3万円の不労所得継続中
  • 開設~運営までの情報発信中
  • 限られた時間で稼ぐ方法
  • 平凡リーマンが稼げた方法

ブログ配色を決めずに、ブログを始めようとしていた人は、ぜひ参考にしてみて下さい。

当記事の結論

ジャンル、ペルソナに合った配色を選ぼう

ブログ配色のポイント
  • 配色は同系列で合わせる
  • 配色バランスは【70:25:5】
  • 文字は少し淡い黒を使う
  • リンクは青色
初心者が間違いやすいポイント
  • 色を使いすぎる
  • 原色を使う

迷った時は、配色サイトや他ブログを丸パクリでOK

ぱぴー

全部理解できていたら、ブログを開設しよう!

≫ブログの開設方法はこちら

目次

ブログ配色のパターン

ブログ配色にはいくつかの王道パターンが存在します。

  • 配色は同系列で揃える
  • 70:25:5の比率を意識する
  • 文字色は黒を使わない
  • リンク色は青にする
ぱぴー

初心者ほど、間違いやすいから注意!

配色は同系統で揃える

配色は、同系列で合わせる統一感のあるキレイなブログに仕上がります。

原色大辞典より引用
ぱぴー

見た目もスッキリして読者に見やすい印象を与えられるよ

70:25:5の比率を意識する

ブログには、配色の黄金比率があります。

配色の黄金比率【70:25:5】

  • ベースカラー…背景・余白に使用
  • メインカラー…見出し・枠色に使用
  • アクセントカラー…強調部分に使用

ベースカラー

ベースカラーは、ブログの背景や余白に利用します。

70%を占めるので、白や黒に近い淡い色で形成してみましょう。

ぱぴー

濃い色を使うと目が疲れちゃうかも

メインカラー

メインカラーは、ブログのイメージを決める色になります。

各色には、以下のようなイメージが想像される場合が多いです。

  • 赤…積極的、注意
  • 青…知性、誠実
  • 黄…明るい、希望
  • 緑…自然、健康
  • 茶…落ち着き、古い
  • 桃…可愛い、若い
  • 白…清潔、無垢
  • 黒…強さ、信頼
ぱぴー

ブログの方向性を決める重要なカラー!

アクセントカラー

アクセントカラーは、注意を惹きけたい、目立たせたい場所に利用します。

アンダーラインや、強調文字などに使いましょう。

ぱぴー

目立たせたいので、濃いめの色を選ぼう

文字色は黒を使わない

ブログの文字色を、デフォルトの黒で使い続ける人がいます。

実は、デフォルトの真っ黒よりも、少し淡い黒を使った方がブログは見やすくなります。

  • テスト『#000000』
  • テスト『#333333』

上の真っ黒な文字は、文字数が増えると画面を窮屈に感じさせてしまう。

下の少し淡い文字であれば、文字数が増えても画面を窮屈に感じさせにくくなるので、読者も見やすい。

ぱぴー

ちょっとした違いだけど、効果はあるからやってみよう

奇抜な色は、シンプルに読みにくいからやめよう

リンク色は青にする

ブログで、他の記事を紹介したい場合に、下記のようなリンク機能を使うかと思います。

≫1日1時間1年で月3万円を稼ぐブログ術

リンクは、昔から青色を利用するのが一般的です。

他の色でリンクを貼ると、リンクと気づかれない危険があるので、やめましょう。

ぱぴー

読者が、他の記事を見てくれるチャンスを逃すかも!

ブログ配色の決め方

相談者

どんな配色をえらべばいいの?

ぱぴー

ペルソナやジャンルに合わせよう

※ペルソナ=読者の想像図

ペルソナに合った配色を選ぶ

ブログを見にきてくれるペルソナが想定できていたら、ペルソナに合わせた配色を選ぼう。

ペルソナに合わせた配色例

  • 年配男性…茶色
  • 年配女性…あずき色
  • 中年男性…紺、グレー
  • 中年女性…淡いピンク
  • 若い男性…青
  • 若い女性…濃いめのピンク

年配男性向けのブログに、ピンクを選んでも合わないよね!

ぱぴー

年代や性別を意識して選んでみよう

ジャンルに合った配色を選ぶ

ジャンルに合わせた配色選びも需要です。

ジャンルに合わせた配色例

  • 就職・転職…青
  • ショッピング…赤
  • 健康…緑
  • アウトドア…緑
  • 子育て…黄
  • ファッション…グレー

健康食品のブログに、黄や赤は合わないよね!

ぱぴー

ジャンルのイメージに合った配色を選ぼう

ブログ配色で気を付けるポイント

  • 色を使いすぎない
  • 原色のまま使わない
ぱぴー

ブログ配色で、初心者がやってしまいがちな間違いポイントだよ

色を使いすぎない

色は多くても4色まで

アンダーラインの色、文字色、吹き出しの色など、多くの色を使わないように注意しましょう。

多くの色を使いすぎると、ゴチャゴチャした印象になってしまいます。

はじめまして、40-blogの管理人。

pappy-bloggerと申します。

当ブログは【1日1時間1年で月3万】のブログ術を公開中!

始め方、記事の書き方、モチベーションの保ち方など、様々な情報を発信しています。

すべて、筆者自身の経験談ですので、これからブログを始める人は参考にして下さい。

はじめまして、40-blogの管理人。

pappy-bloggerと申します。

当ブログは【1日1時間1年で月3万】のブログ術を公開中!

始め方、記事の書き方、モチベーションの保ち方など、様々な情報を発信しています。

すべて、筆者自身の経験談ですので、これからブログを始める人は参考にして下さい。

ぱぴー

下の方が読みやすいよね!

当ブログの色設定は、WordPressテーマ【SWELL】を使用しています。

マーカー色や、文字色、吹き出し色などを、簡単に設定したいならSWELLがオススメ。

≫様々な色を簡単に設定できるSWELLについて

原色のまま使わない

使う色は、原色のまま使わない

ブログデザインなどを、原色のまま利用すると初心者感が出てしまいます。

ぱぴー

左より右の方が、初心者感がなくていい感じ

原色より、少し薄めに色を利用することを心がけましょう。

参考になる配色サイト

ぱぴー

配色で悩んだときは、見本となる配色サイトを参考にしよう

使いやすい、日本のサイトを紹介します。

便利な配色サイト

他のブログ配色を参考にする

相談者

配色サイトを見たけど、何色を選べばいいかわからない

ぱぴー

配色に迷った時は、TOPブロガーの配色を参考に

配色に迷った時は、いろいろなブログを見て回り参考にしよう。

特に、TOPブロガーが作っているブログは配色も整っているので、非常に参考になります。

利用する素材も合わせる

配色を統一する重要性は、理解できたかと思います。

配色の他に、素材の雰囲気も統一することで、ブログの統一感がより一層深まります。

  • 写真とイラストを混合させない
  • 想定したペルソナが好みそうな素材を使う
  • ジャンルに合った素材を使う
  • 配色に合った素材を使う

≫ブログに使えるフリー素材サイト6選

まとめ

ブログの配色について解説してきました。

どんな配色にするか決まったら、ブログを開設してみましょう!

≫ブログの開設方法はこちら

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次