サイトを見た目で読みやすくする方法【読みやすくなる要素とポイントを紹介】

記事の読みやすさは、ウェブサイトの命です。

文章の構成、文章力などももちろん必要なのですが、見た目もとても重要です。

「どうすれば、文字を読みやすくできるのかわからない・・・」
ということはありませんか？

WordPressの無料テンプレートを利用していると、「読みやすさまでは配慮されていない」ことがあるので修正が必要になる場合があります。

文章の構成、文章力はある程度ブログを書かないと身についてきません。

ここでは、サイトを見た目で読みやすくするための要素と改善方法について紹介します。

サイトを見た目で読みやすくする方法

「読みやすさ」を分解していくと、読みやすさを構成しているいくつかの要素が見えてきます。

サイトを読みやすくするための要素

1行の文字数
画面の幅
文字の大きさ（フォントサイズ）
行間
段落
フォント
文字装飾
画像

細かく説明する前に大手ニュースサイトのYahooとMSNをみてみましょう。

YahooとMSNを比較

ニュースサイト大手のYahooとMSNは、どちらも徹底的にユーザー目線の読みやすさを追求して作られています。

ウェブ上での読みやすさは、二つを調べて比較すると分かってきます。

YahooとMSNを比較

	Yahoo	MSN
記事ページ横幅	約591px	約781px
1行の文字数	40文字	40文字
フォントサイズ	16px	20px
行間	1.8em	1.667em
フォント	メイリオ Hiragino Kaku Gothic Pro Meiryo ヒラギノ角ゴ Pro W3 MS PGothic MS UI Gothic Helvetica Arial sans-serif	segoe ui meiryo yu gothic hiragino kaku gothic pron sans-serif
フォントカラー	#333	#333

※ここでの横幅は文章1行の始めから終わりまでの幅を指しています。

見た目で読みやすくするポイント

YahooとMSNどちらが見やすいかというと、個人差があるかもしれませんが、どちらかというとYahooだと思います。

1行の文字数・文字の大きさ（フォントサイズ）・画面の幅

1行の文字数は同じなので、文字が大きいMSNの方が見やすいように思えますが、やや読みにくい感じがします。

それは、MSNは横幅が長い分、文字サイズを大きくして、文字数を調整しているからです。

横に長いと、いくら文字を大きくしても視線を移動しないといけなくなるため、読みにくくなります。

この結果をふまえると「文字の大きさ（フォントサイズ）17px程度」で「1行40文字程度」になるように「画面の幅」を調整すると読みやすくなります。

画面の幅を調整できない場合は、文字の大きさを優先します。

行間・段落

行間は、横幅と調整が必要ですが、1.8～2emであれば詰まった感じがなくなります。
※ここでいう行間はCSSのline-heightです。

横幅が広ければ、行間を狭くしても大丈夫です。

emは、親要素の文字サイズに合わせて変動する単位です。親要素が17pxだったら、1emは17pxになります。

そして、もうひとつ重要なのが段落と段落の間のスペースです。段落同士の間隔は50～60pxくらいとります。

広く感じますが、詰まった感じが一気になくなり、読みやすくなります。段落分けは積極的に使った方がいいです。

フォント・フォントカラー

フォントは「ゴシック」を使います。「Roboto」は見やすくておすすめです。

おすすめのフォントファミリー
font-family: Roboto,'Droid Sans','Meiryo','メイリオ','Yu Gothic','游ゴシック','HiraKakuProN-W3','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', sans-serif;

フォントの色は、真っ黒（#000）だと目が疲れるので、少し色を薄くした「#333」などを指定します。