BLOG

ブログの文字は黒を使ってはダメ!?実はグレーを使うのがベストです!

ブログ 文字色

ブログの文字の色って何色?と聞いたら、多くの方が「黒」とお答えすると思います。

でも、実はブログで利用したい文字色は、黒ではなくグレーなんです。

もうお気づきだと思いましが、当サイトでも文字色(フォントカラー)はグレー(#545454)を利用していて、他のサイトと比較するとかなり薄い文字になっていると思います。

mocca
初めは薄いかな?と思うかも知れませんが、慣れたら疲れなくって良いでしょ?(*'▽'*)

皆さんのサイトの背景色が白(#ffffff)だとした場合、文字色が黒(#000000)だとしたら、コントラストが強すぎるかも?

折角サイトを訪れて頂いたユーザーが目が疲れてしまい、サイト離脱率が上がったり、再訪問率が下がってしまう可能性を高めてしまいます。

私のブログでのオススメの文字色(フォントカラー)は、少し薄いかな?と思うくらいがちょうど良いと思っています。

大手サイトの文字色(フォントカラー)を比較してみよう!

大手サイトの文字色を確認

ブログの文字色(フォントカラー)はグレーと言っても、どのカラーが良いのか迷ってしまうかと思いますので、大手サイトのフォントカラーを調べて見ましょう!

Googleの検索結果の文字色

Googleの検索結果の文字色

Googleの検索結果で表示されている文字色(フォントカラー)

  • color: #4d5156

薄いグレーが特徴です。

サイト内の文字色は統一されてはいない様ですが、「#5F6367」などが利用されていました。少し黒っぽい文字でも「#414141」となっていました。

Yahooの検索結果の文字色

Yahooの検索結果の文字色

Yahooの検索結果で表示されている文字色(フォントカラー)

  • color: #4d5156

Googleと同じ文字色で薄いグレーでした。もう少し濃く見えたので意外な結果でした。

尚、記事内の文字色は「#4E4E4E」となっていました。

(調べるのが面倒になって、Chromeの拡張ツール「ColorPick Eyedropper」を導入したのは秘密です。。)

ざっと他のサイトを調べた結果

  • 日経新聞:#333333
  • アメブロ:#333333
  • 朝日新聞:#0A0A03
  • gooニュース:#000000

カラーコードの考え方

mocca
折角なので、簡単にカラーコードの考え方を調べてみました。

黒だとした場合、カラーコードは以下の様に認識すると解り易いです!

  • 濃い黒「0」>「1」>「2」>「3」....「9」>「a」>「b」....「f」白

まとめ

背景は基本的にどのサイトも白(#ffffff)が多く、利用している文字フォントにより、文字色を変えている傾向にありそうだという事が解りました。

どうやら明朝体っぽい文字を利用しているニュース系サイトは、文字色が濃い黒へよっている印象です。

後は皆さんの好みだと思いますので、色々と試して読み易い文字色を見つけて下さいね(*'▽'*)

-BLOG

© 2020 Mocca