ブログが読みにくいのは「フォントの色が黒」だから？

2019-03-13T23:58:00+09:00 2019-03-13T14:58:15Z ブログ運営解決法

当ブログのテーマを変えた後、なんとなーく記事が読みづらい気がしていました。

他のサイトと比べながら調べた結果、原因はデザインでも文字の大きさでも行間の設定でもなく、フォントの色が「黒」だったことにあったようです。

テーマを変えたはいいもののブログの記事が読みにくい気がする

前回の記事でお伝えの通り、当ブログのテーマをvaster2からZeloに変更しました。
デフォルトでは背景がグレー系の色で設定されていたので、背景は完全に白で黒文字、差し色に見出し背景色を水色に設定しました。

※スマホ向けページでいうと、はてなダイアリー的なイメージで白基調にしたかった

さて、ようやくデザインも一段落し、ここからは記事を書きまくるしかないぜーと思いつつ表示の崩れ等ないか過去のページを見返したりしてたところ…

なんか読みづらい。

ただ原因がわからない。なーんか読みづらい気がする、という感覚的なもので、他サイトと比較し、フォントが違うのかな？と試行錯誤。

確かにHelvetica等、他のフォントをしてしているところもあるんですが、同じフォント「メイリオ」を使っていても、他サイト様の方が見やすい。

なぜ？

具体的に何が違うのかわからずに、ただなんとなく見にくい気がする、からスタートしたため、原因究明に手間取ります。

とにかく他サイトさんのソースコードを除き、フォントの設定・文字サイズ・行間等を調べまくります。

具体的にはCSSのフォント設定のうち

です。

これらはブラウザがGoogle Chromeだと簡単に調べられました。

当初はいちいちソースコードを開いて、「font-family」とかで検索していたんですが、非常に非効率的。

というのも、タイトルでの設定・h2見出し用の設定・本文での設定・説明文用の設定等、あちこちにフォントの設定がされているページが大半のため、実際に見たい本文のここに設定されているものは何なのか、がなかなかわからないわけです。

そこで簡単に調べられる方法はないのかと調べたところ、やはりありました。

上記でも少し触れましたが、ブラウザがGoogle Chromeの場合

調べたい文字をドラッグで選択
選択した文字の上で右クリック
「検証」をクリック
「Elements」の中の「Styles」が選択されているのを、一つ右の「Computed」を選択
「font-size」「font-family」などの実際に影響を与えているプロパティが一覧で現れ、かつ一番下に実際に反映されているフォントの種類も表示されます

上記により劇的に調べるのは早くなったのですが、それでもなお原因は不明。

なぜなら大半のフォント設定と大差なく、もはや単純に自身の思いすごしか…？と思い始めていたときに、なにか情報はないかと検索している中で下記のサイトに辿り着き、ようやく原因が特定できました。

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

そ　れ　だ　！！

ようやく理由が判明し、内容も納得行くもので小躍りしました。
上記サイト様は、各大手サイト様のフォントカラーの設定の検証もされており、とても勉強になりました。

ぼく自身、大昔にホームページを作っていた時代の知識から大差がない状態ですので、「背景真っ白(#ffffff)・文字色真っ黒(#000000)は見にくい」というのは完全に盲点でした。

ちなみに、さらに検索すると、超有名な話ではあったみたいです…。はずかしみ…。

というわけで、早速文字色の設定を「#333333」に変更したところ、無事違和感はなくなりました。

ただまぁ、ぼくの文章力のなさでの読みづらさは変わらないのですが…。精進します。

ブログの文字に違和感がある方は、一度設定をご確認されてみてはいかがでしょうか。