スマートフォンやパソコンで読みやすい記事、長文のデザイン、レイアウトについてのメモ。
ある案件で、「記事詳細ページの文章をより読みやすくするためにスタイルを調整する」というPJがあり、改善の方向性として、スマホのフォントサイズや行間の余白（line-height）を幾つにするのが最適なのか？という議論があった。
現状、そのサイトの記事詳細ページは文字数も多くページングもあるなどそれなりの長文になっている。さらに、ターゲットユーザーも年齢層高め（30代〜40代、50代も）なので、既存のスマホのフォントサイズ15ピクセルだと小さくて読みづらい（老眼世代ｗ）といった課題感が。
いざ、改善を検討する際に一番議論になったのが、フォントサイズは大きくするとして、行間については広げるかいなか？広げるならどれくらいが適当か？で意見がわかれてしまったことだった。
慎重派の意見としては、行間が広すぎると1画面に入る文字数が減り文章量が減ってしまってわかりづらいのでは？ファーストビューはより情報量が多いほうがよいのでは？というものだった。
行間を狭くするメリットは、確かに文字数と文章量を多く表示できることだ。ファーストビューの文字量も稼げるこし、タイトルとリードと本文の冒頭部分をまとめて表示できるなら、ユーザーにとっても情報の善し悪しを判断する材料が増えることも想定される。
がしかし、読みやすさという観点では文字量が増えると文章全体に塊感が出てしまい、せっかくの情報が読み飛ばされがちになってしまうデメリットがある。本文を読むにあたって読みづらくなり迷子になりがちなことも懸念材料だ。
さらに、スマホのUXを考慮すると、スマホはスクロールにそこまでストレスがないため、ファーストビューの表示領域にこだわるよりは、むしろスクロールするなかでの読みやすさ、文章の把握のしやすさを優先したいところ。
結果、スマホは文字サイズ15ピクセルだったのを、16ピクセルにしてサイズアップ。行間も1.6から、1.8に拡大することで合意できた。パソコンは文字サイズ16ピクセルで行間は2.0のままが望ましい。
やはりスマホを考慮すると、文字サイズは大きめで、ゆとりのある余白が視認性や可読性を保持するベースになってくるので、ここはこだわりたいところ。ただありがちなのが、フォントサイズだけ大きくして終了になることで、同時に行間を検討できるかどうか分水嶺かな。
というわけで、あらためて読みやすい文章のためのコツはフォントサイズと行間の両方にあるなと自分なりにメモ。
文字サイズ
スマホだと16ピクセルが最適。パソコンも同様に16ピクセルが最適だが、より読みやすさを重視するなら、18ピクセルもあり。UI/UXに熱心な、メディアプラットフォーム「note」のパソコンのフォントサイズは18ピクセルだったりする。
行間
文字サイズ16ピクセルなら、スマホの行間は1.8が最適。パソコンは2.0が読みやすい。
パソコンとスマホの行間の数値は揃えたほうがいいのでは？という意見もあるが、パソコンはスマホと比べて横幅が広めなので行間は狭くしない方が見やすい。スマホとパソコンで行間の数値が違うのは問題ないので、それぞれ見やすい数値でよし。
ちなみに、読みやすい文章のコツとして、スマホだと1文（1センテンス）は3行以内に押さえることも重要だったりする。限界で5行までかな。これ以上はもう塊になってしまう。もう視線が止まらない。スルー確実。
あと、下記サイトも参考になった。
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
スマートフォン・PCで読みやすいフォントサイズ＆行間とは？国内のメディアサイトを調べてみた。
