BTC:--
ETH:--
BCH:--
XRP:--

PCサイトでの文字の読みやすさ徹底分析

PCサイトでの文字の読みやすさ徹底分析

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

読みやすさは、大きく2つに分けることができます。

1つは、記事内容自体の構成や言葉遣い、句読点などです。そして、もう1つは、文字の大きさや行間など見た目の構成です。

後者をニュースサイト大手のYahooとMSNで比較して、ウェブ上での読みやすさは、何に依存しているのかを分析して、UIを考えてみます。

Yahooのテキスト構成

Yahoo MSN
記事ページ
横幅
約591px 約781px
1行の文字数 40文字 40文字
フォントカラー #333 #333
フォント メイリオ
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
フォントサイズ 16px 20px
行間 1.8em 1.667em

※ここでの横幅は1行の始まり文字から、1行終わり文字までの幅です。

YahooとMSNの構成を比較

YahooとMSNどちらが見やすいかというと、どちらかというとYahooではないかと思います。

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

MSNは、横幅が長い分、文字サイズを大きくして、文字数を調整しています。
横に長いと、いくら文字を大きくしても、視線を移動しないといけなくなります。この視線の移動が、読みやすい読みにくいに影響していると考えられます。ゆっくり読む分には、文字が大きい方が読みやすいと思いますが、ウェブのように流し読みをする場合は、この一度に目に入ることが大切です。

MSNサイトはリキッドデザインのため、ブラウザの横幅を縮めると表示している横幅が短くなります。
この時の横幅は、618pxです。1行の文字数は、31文字ですが、Yahooと同じように読みやすくなります。

年齢やその人によって、この視覚の範囲が異なると考えられ、一概にこの横幅がよいとは言い切れませんが、UI作成時の目安にはなると思います。

理想のUI構成

これを踏まえて読みやすい構成を考えると、
・横幅は、600px~650px
・フォントサイズは、16px程度
・行間は、1.7~1.8em
です。

このサイトの横幅も長いので、ブラウザを縮めるとちょうどよいサイズになるかもしれません。

メニューを閉じる