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

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

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

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

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

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

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

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

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

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

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

YahooとMSNを比較

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

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

YahooとMSNを比較

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

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

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

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

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

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

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

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

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

行間・段落

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

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

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

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

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

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

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

文字色・装飾・画像

文字の色

文字の色は、むやみやたらと色を使うと、クオリティが低いような感じがします。また、ごちゃごちゃして読みにくくなります。

文字の色は、基本の1色、リンク（青）の1色、注目させたい場合の1色の合計3色くらいを使うと、ごちゃごちゃした感じがなくなり、読みやすくなります。

文中の強調したい部分は、赤色にするだけでなく、太文字にする方法もあるのでうまく使い分けましょう。

装飾

必要な部分をまとめるのに使う装飾（線の囲い、背景色、リスト）も色を分けすぎないようにしましょう。

文字色と合わせる必要はありませんが、こちらも3色くらいで使い分けるようにした方が見やすくなります。

画像

また、「hタグ」は大きく内容がかわるのが分かるように必要な装飾をして分かりやすくしましょう。

「画像」は書いている内容をイメージできる画像を、大項目（h2タグなど）の区切りがよいところで使うと、一息つけて読みやすくなります。

まとめ

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

年齢や個人で、一概にこれがベスト！とは言い切れませんが、比較的読みやすくなると思います。

当サイトも上記を意識してCSSを修正したので、もし、読みやすいと感じてもらえたら幸いです。

内容をまとめると下記のようになります。

• 1行の文字数：40文字程度
• 文字の大きさ（フォントサイズ）：17px程度
• 画面の幅：1行の文字数と文字の大きさで調整
• 行間：1.8～2em
• 段落：50～60px
• フォント：おすすめ「Roboto」
• 文字装飾：1色・太文字、hタグはわかるように装飾
• 画像：主要なhタグにつける