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

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

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

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

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

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」などを指定します。

文字装飾・画像

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

できるだけ1色利用を心掛けましょう。リンク(青)を含めて2色になるので、ごちゃごちゃした感じがなくなり、読みやすくなります。

文中の強調したい部分は赤を使わずに、段落をまるごと太文字にします。

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

「画像」は書いている内容にあうイメージ画像を、主要なhタグにつけると、途中で一息つけるので読みやすくなります。

まとめ

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

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

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

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

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

スポンサード