前提
調査の対象はPCのみとする。(スマホはある程度1行の文字数は固定されるので。)
emやrem指定されているものも、とりあえずpxで調査。(例外あり)
適当にいつも見ているサイトをランダムにピックアップ
Yahooニュース
https://www.yahoo.co.jp/
1行の文字数:37文字
font-size:medium(16px)
line-height: 1.8em(28.8px)
少し文字が大きい印象があるが、全体として読みやすい。幅広い年齢層を意識しているのか。行間も1.8emとしっかりと空いている。
livedoorニュース
http://news.livedoor.com/
1行の文字数:38文字
font-size:16px
Yahooに比べて1文字多いが印象としてはYahooと変わらない。やはり読みやすい。
nikkeiニュース
https://www.nikkei.com/
1行の文字数:39文字
font-size:16px
基本的には問題ない文字数ではあるが、
39文字まで来ると、ディスプレイと目線の距離が近いと横の目線移動が大きく、少し読みづらい印象。
ざっと目を通すような読み方をしないと疲れるかも。
TechCrunch Japan
https://jp.techcrunch.com/
1行の文字数:47文字
font-size:16px
line-height:27px
かなり文字が詰まって見える。1段落の文字数も他のメディアに比べれば多い。
行間も詰まっているので、スクロールが少なくていいのはメリットといえる。ここまで多くする場合は、漢字の比率をある程度抑えるなど、少し工夫したほうがいいかもしれない。
mixiニュース
https://news.mixi.jp/
1行の文字数:45文字
font-size:14px
目線の移動が横に動きすぎて読みづらい印象。文字サイズが小さいので、1行の文字数はtech Crunchよりも少ないが、一見文字数は多く見える。
エンタメ系の記事が多いためか、段落の文字数が少なく、また段落間のマージンもやや広く取られていることで、少し読みやすくなっている。
MERY
https://mery.jp/
1行の文字数:49文字
font-size:14px
20代女性向けメディアの参考として、一時期騒ぎになった後に、復活を果たしたMERYを検証。文字数が49文字とかなり多い。
ただし、1文が49文字書かれているものは少なく、写真が主体となっており、どちらかというと画像のキャプションのような使い方になっている。
文字数が多いわりに読みにくさは一切ない。
アットコスメ
https://www.cosme.net/
1行の文字数:45文字
font-size:14px
line-height:20px
かなり文字が詰まっている。さすがに読みづらい印象が強いが、ぎっちりとしている分、専門性が高く感じる。
とはいえ、若干時代的に古いサイトの印象を持ってしまう。
milieu
http://milieu.ink
1行の文字数:41文字
font-size:1.5rem(15px)
line-height:2(30px)
女性に文章が読みやすいサイトあるか聞いたときに返ってきた答えがこのサイト。1行の文字数は比較的多いが、1文から2文で改行されており、文字が詰まっている印象は受けない。line-heightも30pxとかなり余白をとっている。
結論
調べているとキリがないので、このあたりで調査打ち止め!
個人的にはmilieuが一番読みやすくて好みかな?
あとやはりYahooニュースは安定の読みやすさだった。
今回の読みやすかった文字情報を整理すると。。。
Yahooニュース
1行の文字数:37文字
font-size:16px
line-height:1.8em(28.8px)
miliue
1行の文字数:41文字
font-size:15px
line-height:2(30px)
調査開始時は、1行の文字数とfont-sizeに読みやすさの関係があるかと思っていたが、line-heightもかなり影響があることがわかった。
また、文字が詰まっているときには段落を大きく開けることで、読みにくさを減らす効果もあるようだ。
ニュースサイトのようにしっかりとしたサイトは、文字数が多い方が専門性が高い印象を持てる一方で、
エンタメサイトなどはサクサクスクロールさせることを重視して、段落や行間をしっかりと開けた方が読みやすくなるだろう。
1行の文字数が多ければ多いほど、行間を開けることで読みやすさをコントロールできそうである。
もっと考察できそうな気もするが、眠くなってきたのでこのあたりで寝ます。
情報の表記方法に統一感がなくてすみません。