読みやすいウェブサイトの文字と行 — 大きさ・行間・行の長さ・コントラスト
画面の文字を大きくすると、読みやすさと理解が上がりました。実験では、18pt（CSS換算で約24px）まで、大きくするほど上がり続けました。文字の大きさ・行間・行の長さ・コントラストを、研究と国際的な基準で確かめました。
3行でわかる
- 文字は大きめが読みやすい。実験では18pt（約24px）まで、大きいほど読みやすさと理解が上がった
- 行の長さの正解は、研究ではまだ決まっていない
- 文字と背景のコントラストは4.5:1以上が国際的な基準（WCAG）
確かさ: A 確か＝メタ分析・大規模な再現・長く再現されてきた法則があり、効果があること自体が確か／B 条件しだい＝場面で結果が変わる・争いがある（基準）。
01 使える原則読みやすい文字と行の条件は？
コントラストは国際的な基準がある。文字の大きさは実験があるが、条件しだい（B）。
| 原則 | わかっていること | 確かさ |
|---|---|---|
| 文字は大きめ | 画面の文字を大きくすると、読みやすさと理解が上がった（18ptまで上がり続けた） | B 条件しだい |
| 行間は広すぎなくてよい | 行間を変えても、読みやすさへの影響は文字の大きさより小さかった | B 条件しだい |
| コントラストは4.5:1以上 | 文字と背景の明るさの比は、ふつうの文字で4.5:1以上が国際的な基準 | 基準 |
| 読みやすさは信頼になる | 読みやすい文は、好まれ、正しいと感じられやすい | B 条件しだい |
02 どうやってわかったのかどうやって調べた？
文字の大きさや行間を変えた画面で文章を読ませ、読みやすさと理解を測った。
B 条件しだいRello ほか（2016、CHI）[1]
文字が大きいほど、読みやすさと理解が上がった。18pt（CSS換算で約24px）まで上がり続けた。行間の影響は小さかった。
どうやって: 文字の大きさと行間を変えた文章を読ませ、読みやすさと理解を測った。
03 作るときの当て方どう作ればいい？
本文は大きめに、コントラストは4.5:1以上に。行の長さと行間は慣習の目安で決める。
本文は16px以上、読ませる記事はもっと大きく
スマホでも本文を16px より小さくしない。注釈も12px より小さくしない。
行の長さを決める
じっくり読ませる記事は、日本語で1行35〜40字前後の幅に収める（研究でなく慣習の目安）。
コントラストを測る
文字と背景の比を4.5:1以上に。薄い灰色の文字を白地に置かない。
行間は詰めすぎない
日本語の本文は、行の高さを文字の1.7〜2倍ほどにする（研究でなく慣習の目安。英語の実験では行間の影響は小さかった）。
第一印象・迷わなさの原則は、ウェブサイトに使える10の原則にまとめた。
04 使わない説よく聞くけれど使わないのは？
「読みにくい字のほうが頭に残る」は使わない。
| よく聞く説 | 判定 | 研究では |
|---|---|---|
| 読みにくいフォントのほうが深く考え、問題が解ける | 言い過ぎ | 元の研究と16本の追試をまとめると、効果は出なかった（Meyer ほか 2015） |
| 行の長さには1つの正解がある | 言い過ぎ | 研究で決まった正解はない。よく見る「1行○字が最適」は、慣習の目安 |
05 まだわかっていないことまだわからないのは？
研究の多くは英語の文章。日本語の文字の大きさ・行の長さ・行間の目安は、研究が少ない。
- 行の長さの最適1行の長さが読む速さと理解にどう響くかは研究があるが、結果が一つにまとまっていない。
- 日本語での目安漢字・かなの混ざる日本語で、英語と同じ結果になるかは確かめられていない。上の日本語の目安は、研究でなく慣習によるもの。
- スマホの小さな画面画面が狭いと行が短くなる。スマホでの最適な大きさと行の長さは、まだ研究が少ない。
06よくある質問
ウェブサイトの文字の大きさは何pxが読みやすいですか？
実験では、文字を大きくするほど読みやすさと理解が上がり、18pt（CSS換算で約24px）まで上がり続けました（Rello ほか 2016）。本文は少なくとも16px以上にしましょう。
1行の長さはどれくらいがいいですか？
研究で決まった正解はまだありません。日本語の記事では1行35〜40字前後がよく使われますが、これは慣習の目安です。
文字と背景のコントラストの基準は？
国際的なアクセシビリティの基準（WCAG 2.2）では、ふつうの文字で4.5:1以上、大きな文字で3:1以上です。
出典
- Rello, L., Pielot, M., & Marcos, M.-C. (2016). Make it big! The effect of font size and line spacing on online readability. Proceedings of CHI 2016, 3637–3648. doi:10.1145/2858036.2858204
- W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2, 1.4.3 Contrast (Minimum). https://www.w3.org/TR/WCAG22/#contrast-minimum
- Alter, A. L., & Oppenheimer, D. M. (2009). Uniting the tribes of fluency to form a metacognitive nation. Personality and Social Psychology Review, 13(3), 219–235. doi:10.1177/1088868309341564
- Meyer, A., Frederick, S., Burnham, T. C., et al. (2015). Disfluent fonts don't help people solve math problems. Journal of Experimental Psychology: General, 144(2), e16–e30. doi:10.1037/xge0000049