![カエルくん](https://sho-chanblog.com/wp-content/uploads/2020/11/c_choju56_0026_s256_choju56_0026_0.png)
ブログ読んでると目が疲れるんだよなー
![しょーちゃん](https://sho-chanblog.com/wp-content/uploads/2020/08/s1-1.png)
文字色と背景色とのコントラストで、目が疲れてしまうんだ!
読み疲れて離脱されないように、文字色にも気遣いが必要だよ。
ブログの文字色は、デフォルト設定のままだと真っ黒の「#000000」になっている可能性が高く、これに背景色「#ffffff(白)」の組み合わせは、目が疲れるためオススメできない設定です。
大手企業のサイトを見ると、一見文字色が黒に見えますが、実はグレーに近い黒の文字色に設定されています。
少しでも読みやすい文字色で記事を読者さんに提供できるように、ここで設定を見直しましょう。
大手企業のサイトは文字色に真っ黒など使わない
大手企業のサイトは、文字色に真っ黒「#000000」ではなく「#333333」などのグレーに近い黒をウェブサイトに使用しています。
多くのサイトは背景色が白「#ffffff」に設定していて、ここに文字色「#000000(真っ黒)」だとコントラストが強すぎて、読んでいて目が疲れる配色になってしまうのです。
この逆も一緒で、背景色「真っ黒」と文字色「真っ白」の組み合わせも、一見すると背景色が黒なので、読みやすいと思いきや目が疲れる配色になっています。
以上の理由から大手企業のサイトは、文字色に「#000000」は使わず「#333333」などの優しい黒色に設定されています。
大手企業サイトから学ぶおすすめの文字色
大手企業のサイトは、お金をかけて作られているので、文字色もユーザーに配慮された色が使用されています。
どんな色が使用されているのか確認した結果おすすめの文字色は「#333333」です。
1.Googleの文字色「#202124」
![Googleの文字色](https://sho-chanblog.com/wp-content/uploads/2020/11/character-color1-800x419.png)
Googleの場合、決まった文字色ではなく、サイトごと文字色を使い分けていました。
2.Googleストアの文字色「#423F3F」
![Googleストアで使用されている文字色](https://sho-chanblog.com/wp-content/uploads/2020/11/character-color2-800x489.png)
Googleストアで使用されている文字色は「#423F3F」でかなりグレーに近い文字色でした。
3.Yahoo!ニュースの文字色「#333333」
![Yahoo!ニュースの文字色](https://sho-chanblog.com/wp-content/uploads/2020/11/character-color3-800x511.png)
Yahoo!ニュースの記事に使われている文字色「#333333」は、楽天・アメブロなど多くのところで使用されている文字色でした。
4.Amazonの文字色「#0F1111」
![Amazonの商品説明に使われる文字色](https://sho-chanblog.com/wp-content/uploads/2020/11/character-color4-800x256.png)
Amazonの商品説明に使われている文字色は「#0F1111」でした。
どれも単体で見るとみんな一緒の黒に見えますが、並べて見ると色の違いがよく分かります。
![文字色の違いを確認する画像](https://sho-chanblog.com/wp-content/uploads/2020/11/mojiirotest.png)
いかに真っ黒の「#000000」が黒く、大手企業のサイトで使われる色がグレーに近い黒色を使用していることがよく分かりますね。
この結果からブログにおすすめな文字色は、Yahoo!ニュースなどで使われる「#333333」がおすすめです。
ニュースは文字を読む媒体ですので、ブログでも記事を読む目的が同じことから「#333333」がおすすめとしました。
当ブログでも文字色は「#333333」を使用しています。
WordPress:文字色の変更方法
文字色の変更方法は使用しているテーマによって、設定方法が異なると思いますが、文字色の設定項目が用意されているはずです。
ここからは無料テーマで人気のCocoonを使用している場合の変更方法を紹介します。
![WordPressの文字色を設定する方法](https://sho-chanblog.com/wp-content/uploads/2020/11/character-color5-800x215.png)
1.「Cocoon設定」をクリック
2.「全体」をクリック
![文字色を「#333333」と入力して保存する](https://sho-chanblog.com/wp-content/uploads/2020/11/character-color6-800x578.png)
1.文字色の「色を選択」をクリック
2.「#333333」もしくは、お好みの色を入力する
3.ページ下の「変更をまとめて保存」をクリックで完了です。
他にも文字色を設定する項目「ヘッダー」「通知エリア」「フッター」に文字色の設定項目がありますので、必要に応じて変更してください。
以上、細かな気遣い設定でした。
コメント