- ブログの文字色は黒じゃダメって聞くけど、本当なの?
- 黒がダメなら何色が良いの?
すもベビ
その疑問にすもベビが答えます。
「ブログの文字色は黒一択」だと思い込んでいる人が多いですが、実は文字色を黒にするのはNGです。
この記事では、ブログの文字色に黒がNGな理由と、文字色を変更する方法について解説します。
目次
ブログの文字色に黒がNGな理由
白のベースカラー(背景色)に黒の文字だと目が疲れる
ブログの文字色に黒がNGな理由はこれに尽きます。
ブログの背景色が白(#ffffff)、文字色は黒(#000000)だと、コントラストが強すぎてユーザーの目に負担がかかります。
記事を読むとすぐ目が疲れてしまうというのは、ユーザビリティーの点から大きな問題です。
いくら記事の内容が面白くても、目が疲れるとユーザーは早々に離脱してしまいます。
離脱率(直帰率)が高い状態が継続すると、Googleの検索エンジンの評価が下がって検索順位が落ちるリスクがあります。
つまり、ブログの文字色を黒にするのは、ユーザビリティーとSEOの両方でNGです。
すもベビ
ベースカラー(背景色)を調節して文字色を黒にしておくのはOKです。
ベースカラーを含むブログの色については、下の記事で詳しく解説しています。
企業サイトも黒は使っていない
大手企業のサイトで使われている文字色を確認してみました。
Amazon
- 背景色:#ffffff
- 文字色:#111111~#333333
楽天市場
- 背景色:#ffffff
- 文字色:#333333
Google検索結果
- 背景色:#ffffff
- 文字色:#545454
Yahoo!ニュース
- 背景色:#ffffff
- 文字色:#333333
すもベビ
その他の大手企業サイトや各種SNSでも黒(#000000)を使っているところはありません。
ブログの文字色はグレーが読みやすい
結論から書くと、ベースカラー(背景色)が白(#ffffff)の場合に読みやすい文字色はグレーです。
グレーと言ってもたくさんの色がありますが、ブログの文字色として使いやすいのは次の5つです。
- #323232
- #333333
- #353535
- #383838
- #393939
いずれも濃いグレーで限りなく黒に近いです。
でも、黒(#000000)と比べると白とのコントラストが弱まり、文章を読んだときの目の負担が軽くなります。
その他の目が疲れにくい色
上に書いたのは私が本業ブログで使うことの多い色です。
本業のコンサル生に聞いてみたところ、他にも様々な色を使っていることが分かったので参考に書いておきます。
- #23282D(SANGOのデフォルト)
- #3E3E3E
- #1D2129
- #545B63(STORKのデフォルト)
- #333333
- #444444
- #545454(Googleの検索結果)
- #545464
WordPressブログの文字色を変更する方法
WordPressブログの文字色を変更する方法について書いていきます。
文字色を確認する
実はブログの文字色は、テーマによって黒以外が使われていることがあります。
例えば、WordPress有料テーマ「STORK」の場合、本文の文字色はグレー(#545B63)がデフォルトです。
そのため、まずは使用中のテーマに設定されている文字色を確認します。
文字色の確認にはGoogle Chromeの「ColorPick Eyedropper」という拡張機能を使います。
ColorPick Eyedropperのページに移動し、「Chromeに追加」を押します。
すると「ColorPick Eyedropperを追加しますか」という表示が出るので、「拡張機能を追加」を押します。
アドレス欄の横に色相マークが表示されれば完了です。
色相マークをクリックすると、下の画像のような表示が出てきます。
この状態でマウスの「←(カーソル)」を文字に合わせると、文字色が表示されます。
すもベビ
すもブロでは、本文の文字色が黒ではなくグレー(#23282D)になっていることが分かります。
WordPressブログの文字色を変更する
①外観→②カスタマイズと進みます。
カスタマイズ画面が開くので、③「追加CSS」を開きます。
(使用しているテーマによって「追加CSS」の位置は異なります。)
④任意のカラーコードを入力して「公開」を押します。
任意のカラーコードを入力するときのコードは次のとおりです(コピペOK)。
body{ color: 【任意のカラーコード】; }
ブログの文字色のまとめ
ブログの文字色は、ベースカラー(背景色)が白(#ffffff)の場合は黒(#000000)はNGです。
コントラストで文字が読みにくくなるからです。
濃いグレーに変更することで読みやすさが向上し、ユーザーにとって居心地の良いブログになります。
WordPressブログなら簡単なコードをコピペするだけで文字色を変更できるので、使用中のテーマの文字色が黒なら早めに変更しておきましょう。
もし、ベースカラー(背景色)を白以外にする場合は、コントラストの問題がなければ黒でもOKです。
ただし、実際に記事を読んでみて目が疲れたり読みにくかったりする場合は、読みやすいように調節することが大切です。