テキストの読みやすさって、ブログやWebページでとても大事な要素だと思うんですよね。
ブログやWebページを見ていて、読みやすいページとそうでないページがあるのは、なんとなーく理解していたんですね。
ただ、何がその優劣に影響しているのかがあんまり理解していなかったのです。
今回、一部ではありますが影響する要素について整理がついたのでシェアします。
今回わかったのは以下の4つの要素です。
- フォントの大きさ
- 行間
- 文字間
- 文字色, 背景色と文字色のコントラスト
1つずつ解説していきます。
フォントの大きさ
これはみなさんも認識されている要素ではないでしょうか?
私もこれはあるかなと思ってました。
16px以上を推奨、とのことです。
確かに読みやすくなりました。
しかし、同じページをスマホで見ると、フォントが小さかったんですよね。
こちらについては追加で調査が必要かなと思ってます。
行間
数値のみの設定で、1.5〜2.0が推奨だそうです。
私は1.5にしました。
単位は、無しが最も推奨とのこと。
「行間なんてそんなに読みやすさに関係あるん?(；・∀・)」
と思っていたのですが、比べてみると一目瞭然でしたね。
狭すぎると文字が詰まってしまって読みにくいし、
かと言って広すぎると間延びしてこれまた読みにくかったです。
文字間
0.05em~0.1emが推奨だそうです。
これも行間同様、影響するんか?!
と思っていたのですが、影響するんですねー。
あ、em ってのは1文字の大きさで、0.1em だと、1文字の10分の1だけ、文字間が空けられるという意味です。
文字色, 背景色と文字色のコントラスト
今回調べてびっくりしたんですが、
多くのWebページの文字色は黒ではない
のです。
ビミョーに、グレーな色なんですね。
理由は、黒だと白とのコントラストが強すぎて目に負担がかかるから。
それを知ってから他のWebページを見ると、たしかに真っ黒のフォント色は使われていませんでした。
びっくりです。
そして、背景色とのコントラストも、考慮に入れる必要があるとのことです。
なるほどー。
テキストの見やすさを工夫した成果
で、成果がこちら。
上が何の整形もしていないもの。
下が、整形したものです。
かなーり読みやすくなっていると思います。
Web制作の奥深さと有益性を再認識
テキスト一つでこれだけの要素があるのは驚きでした。
Web制作は奥が深いです。
と同時に、有益性も感じました。
整形してあげるだけで、内容が同じなのに読みやすさって劇的に変わるんですよね。
ということは、世の人々に認知してもらえる可能性もそれだけ上がるということだと思うのです。
「文章を読まれやすくする」というのは価値になると思います。
最近よく思うのは、お金を稼ぐというのは、
いかに価値を提供できるか?
というシンプルな要素にかかっている事です。
当たり前の話なのですが、強く自分の中で腹落ちできてきているなぁと感じます。
Web制作の技術というのは、とても多くの価値を提供できるものだなと実感できたので、これからもコツコツ学習していきたいと思います！( •̀ᴗ•́ )
今回、よくお世話になったのはこのサルワカです。
前々から、良いサイトとは聞いていたのですが今回その価値がとてもよくわかりました。
ありがとうございました。m(_ _)m
