スマートフォンやパソコンで読みやすい記事、長文のデザイン、レイアウトについてのメモ。
ある案件で「記事詳細ページの文章をより読みやすくする」というプロジェクトに関わった。改善の方向性として、スマホのフォントサイズや行間（line-height）を何ピクセルにするのが最適か議論になった。
現状の課題
そのサイトの記事詳細ページは文字数も多く、ページングもあるなど長文になっている。ターゲットユーザーも年齢層高め（30〜50代）なので、既存のスマホフォントサイズ15pxだと小さくて読みづらい（老眼世代ｗ）という課題があった。
議論になったポイント
フォントサイズを大きくするのは合意していたけど、行間については意見が分かれた。
慎重派：「行間が広すぎると1画面に入る文字数が減り、文章量が減ってわかりづらいのでは？ファーストビューはより情報量が多いほうがよいのでは？」
行間を狭くするメリット・デメリット
メリット：
- 文字数と文章量を多く表示できる
- ファーストビューの文字量が稼げる
- タイトル・リード・本文冒頭をまとめて表示できる
デメリット：
- 文章全体に塊感が出て読み飛ばされがち
- 本文が読みづらく迷子になりやすい
スマホUXの考慮点
スマホはスクロールにそこまでストレスがないため、ファーストビューの表示領域にこだわるよりも、スクロール中の読みやすさ、文章の把握のしやすさを優先すべき。
最終的な結論
- スマホ：文字サイズ 15px→16px、行間 1.6→1.8
- パソコン：文字サイズ 16px、行間 2.0（変更なし）
読みやすい文章のためのコツ
文字サイズ：
- スマホ：16pxが最適
- パソコン：16px、読みやすさ重視なら18px
- 参考：noteのパソコン版は18px
行間：
- スマホ：文字16pxなら行間1.8が最適
- パソコン：2.0が読みやすい
- デバイスで行間数値が違っても問題なし（画面幅の違いによる）
その他のポイント：
- スマホでは1文（1センテンス）は3行以内に押さえる
- 限界は5行まで（それ以上は塊になり視線が止まらない）
今日の気づき：読みやすさとファーストビューの情報量はトレードオフの関係。スマホ時代は「とにかく詰め込む」よりも「ゆとりを持たせて読みやすくする」方が重要だ。フォントサイズを大きくする際は必ず行間も検討すべき。
参考サイト：
