iscle [イズクル] - あなたの生活に役立つネタを!

ブログの文字色は黒じゃダメ!?大手サイトの文字色比較

竹中文人
執筆者:
[最終更新日]2016/07/02
[カテゴリ]Web・IT

ブログのフォントカラー

あなたのWebサイト/ブログの文字色(テキストカラー・フォントカラー)は何色にしているでしょうか?多くの方が「黒色」とお答えになるのではないでしょうか。もし文字色が“真っ黒”である場合は、色を見なおしたほうが良いかもしれません。

まず多くのサイトの背景色は白色です。白い紙に黒いペンで文字が書かれるように、背景色が白色で文字色が黒色であることが一般的であり、サイトを観覧し文章を読むのにも違和感がありません。しかし「白色」でもオフホワイトに近かったり、逆に「黒色」でも微妙にグレーが入っていたりと幅があります。

さて、あなたのサイトの背景色と文字色を確認してほしいのですが、何色になっているでしょうか?
真っ白は16進数で「#ffffff」となっています。真っ黒の場合は「#000000」です。もし背景色が「#ffffff」で文字色が「#000000」の場合は色の見直しをお勧めします。

スポンサーリンク

真っ黒はNG

特にブログやニュースサイトのようなユーザーに文章を読んでもらうことが重要なサイトでは、背景色が「#ffffff」で文字色が「#000000」の場合、コントラストが強すぎて目に負担がかかります。つまり目が疲れやすく、文章を読んでもらうには適切ではない(ユーザーに優しくない)のです。

ですからコントラストを少しだけでも弱くするために、文字色を真っ黒から少しだけグレーに近づけたり、背景色を真っ白からオフホワイトに近づけたりするのがお勧めです。当サイトでは背景色は「#ffffff」ですが、文字色は「#333333」でグレーに近づけています。

せっかくですから、大手サイトでは背景色と文字色はどうなっているのか検証してみたいと思います。

大手サイトの背景色と文字色比較

Amazonの商品ページ

font-color-01

【背景】#ffffff
【文字】#111111~#333333

ベースの文字色は「#111111」と黒に近いですが、「商品の説明」の部分は「#333333」でした。

PS.お勧めの書籍【ブログ飯 個性を収入に変える生き方】はこちら

楽天市場トップページ

font-color-02

【背景】#ffffff 【文字】#333333

楽天の商品ページは、ショップオーナーがデザインのカスタマイズによって色を変更できるため、楽天のトップページを調べました。

Google検索結果

font-color-03

【背景】#ffffff 【文字】#545454

テキストベースのGoogleの検索結果では、文字色(スニペット部分)が「#545454」とグレーに近く、かなりコントラストを抑えている。アンカーテキスト部分は青ベースの「#1a0dab」、URLは緑ベースの「#006621」です。

Google+

Google+の文字色

【背景】#ffffff
【文字】#5f5f5f~#212121

Google+の場合、検索結果ほどではありませんがグレーに近い文字色です(太文字は黒に近い)。

Facebookの投稿

font-color-05

【背景】#ffffff
【文字】#141823~#4e5665

少し青色が入った黒~グレーが使用されています。Facebookのカラーが青だからかは分かりませんが、青色が少し入ることでコントラストも抑えられ目に優しいです。

Yahoo!ニュース

font-color-06

【背景】#ffffff 【文字】#333333

日本経済新聞

font-color-07

【背景】#ffffff 【文字】#333333

Yahoo!ニュースも日本経済新聞も文字色は「#333333」。その他の新聞社のページでも同様の色にしているケースが多く、文字色に「#333333」はよく使われているようです。また文字色だけでなくフォントサイズ(文字の大きさ)も、適度に大きく読みやすくなっているサイトが多かったです。

font-color-08

文字色を変えることですぐにサイトの回遊率が高まったり滞在時間が伸びると言えるかは分かりません。しかしユーザーにとって使いやすく優しいサイトにしていくことは、長期的に考えても大切ではないでしょうか?