【今すぐ】ブログの文字色は「#333」がおすすめ!真っ黒はNG!

ブログでおすすめの文字色ブログの作り方
カエルくん
カエルくん

ブログ読んでると目が疲れるんだよなー

しょーちゃん
しょーちゃん

文字色と背景色とのコントラストで、目が疲れてしまうんだ!

読み疲れて離脱されないように、文字色にも気遣いが必要だよ。

ブログの文字色は、デフォルト設定のままだと真っ黒の「#000000」になっている可能性が高く、これに背景色「#ffffff(白)」の組み合わせは、目が疲れるためオススメできない設定です。

大手企業のサイトを見ると、一見文字色が黒に見えますが、実はグレーに近い黒の文字色に設定されています。

少しでも読みやすい文字色で記事を読者さんに提供できるように、ここで設定を見直しましょう。

大手企業のサイトは文字色に真っ黒など使わない

大手企業のサイトは、文字色に真っ黒「#000000」ではなく「#333333」などのグレーに近い黒をウェブサイトに使用しています。

多くのサイトは背景色が白「#ffffff」に設定していて、ここに文字色「#000000(真っ黒)」だとコントラストが強すぎて、読んでいて目が疲れる配色になってしまうのです。

この逆も一緒で、背景色「真っ黒」と文字色「真っ白」の組み合わせも、一見すると背景色が黒なので、読みやすいと思いきや目が疲れる配色になっています。

以上の理由から大手企業のサイトは、文字色に「#000000」は使わず「#333333」などの優しい黒色に設定されています。

大手企業サイトから学ぶおすすめの文字色

大手企業のサイトは、お金をかけて作られているので、文字色もユーザーに配慮された色が使用されています。

どんな色が使用されているのか確認した結果おすすめの文字色は「#333333」です。

1.Googleの文字色「#202124」

Googleの文字色

Googleの場合、決まった文字色ではなく、サイトごと文字色を使い分けていました。

2.Googleストアの文字色「#423F3F」

Googleストアで使用されている文字色

Googleストアで使用されている文字色は「#423F3F」でかなりグレーに近い文字色でした。

3.Yahoo!ニュースの文字色「#333333」

Yahoo!ニュースの文字色

Yahoo!ニュースの記事に使われている文字色「#333333」は、楽天・アメブロなど多くのところで使用されている文字色でした。

4.Amazonの文字色「#0F1111」

Amazonの商品説明に使われる文字色

Amazonの商品説明に使われている文字色は「#0F1111」でした。

どれも単体で見るとみんな一緒の黒に見えますが、並べて見ると色の違いがよく分かります。

文字色の違いを確認する画像

いかに真っ黒の「#000000」が黒く、大手企業のサイトで使われる色がグレーに近い黒色を使用していることがよく分かりますね。

この結果からブログにおすすめな文字色は、Yahoo!ニュースなどで使われる「#333333」がおすすめです。

ニュースは文字を読む媒体ですので、ブログでも記事を読む目的が同じことから「#333333」がおすすめとしました。

当ブログでも文字色は「#333333」を使用しています。

WordPress:文字色の変更方法

文字色の変更方法は使用しているテーマによって、設定方法が異なると思いますが、文字色の設定項目が用意されているはずです。

ここからは無料テーマで人気のCocoonを使用している場合の変更方法を紹介します。

WordPressの文字色を設定する方法

1.「Cocoon設定」をクリック

2.「全体」をクリック

文字色を「#333333」と入力して保存する

1.文字色の「色を選択」をクリック

2.「#333333」もしくは、お好みの色を入力する

3.ページ下の「変更をまとめて保存」をクリックで完了です。

他にも文字色を設定する項目「ヘッダー」「通知エリア」「フッター」に文字色の設定項目がありますので、必要に応じて変更してください。

以上、細かな気遣い設定でした。

ブログの作り方
スポンサーリンク
シェアしてくれると助かります_(._.)_
フォロワー募集中(*´▽`*)
この記事を書いた人
しょっちゃ

可愛いわが子に親は何ができるのか?
【様々な本から子育てに役立つ情報を研究】
子育て本はもちろん
脳科学や心理学の本も大好きです。

少しでも日々の子育てに役に立てれば嬉しいです。

フォロワー募集中(*´▽`*)
子育てハビット

コメント