なぜWebの長文は読まれないのか
Webのテキストは、印刷物と比べて圧倒的に読み飛ばされやすい。
理由は単純だ。
スクロールという動作が「読む」ではなく「探す」行動と結びついているからだ。
読者は画面の前で、無意識にスキャンモードに入っている。
その脳に「読書モードに切り替えてもらう」——それが長文設計の本質的な課題だ。
「読む気にさせる」のは内容だけではない。文字の大きさ、行間、余白——それ自体が「ここは読む場所だ」というシグナルになる。
Obsidian Web Clipperのリーディングモード、note.comの1カラム構成、Substackのシンプルなレイアウト。
これらが採用する構造には、明確な認知的根拠がある。
02
1カラムが機能する理由
横幅が広いと、行末から行頭への視線移動距離が長くなる。
次の行頭を見失う——これを「迷子現象」と呼ぶ。
サイドバーや複数カラムは、視覚的な注意を分割する。
分割された注意は「読む」ではなく「処理する」モードを引き起こす。
ポイント
モバイルは必然的に1カラムだ。デスクトップも1カラムにすることで、読書体験がデバイスをまたいで一貫する。読者の脳は「1カラム＝読書モード」として条件付けられている可能性がある。
実装参照値
| サービス | コンテンツ幅 | フォント | 行間 |
|---|---|---|---|
| note.com | 640px | 18px | 1.9 |
| Medium | 680px | 20px | 1.6 |
| Substack | 640px | 18px | 1.7 |
| Obsidian Reader | 720px | 16px | 1.6 |
03
フォントサイズ・行間・カラム幅の最適値
日本語の長文には、欧文タイポグラフィの推奨値をそのまま使えない。
漢字は画数が多く、字面が正方形に近いため、密度が英数字より高い。
それを踏まえた推奨値はこうなる。
| 要素 | 推奨値 | 理由 |
|---|---|---|
| フォントサイズ | 18px | 漢字の画数が多く16pxでは詰まって見える |
| 行間 | 1.85 | かな・漢字混在で字の密度が高いため広めが必要 |
| カラム幅 | 680px / 65ch | 1行40〜45文字が日本語の適正範囲 |
| 字間 | 0.02em | 微量の字開けで読みやすさが上がる |
| 段落間 | 1.75em | 行間だけでは段落の区切りが不明瞭になる |
余白を「削れる無駄」と見ると、読みやすさが破綻する。余白は認知負荷を下げるための積極的な設計要素だ。
04
印刷の「字詰め」はWebで再現できるか
印刷では句読点・括弧の余白を、個々の文字ペアごとに光学的に調整する。
これが「字詰め」だ。
Webの letter-spacing は全文字に一律で加減するだけで、ペア単位の調整はできない。
一律に「詰める」と、むしろ読みにくくなる。
解決策
font-feature-settings: "palt" 1 — プロポーショナル字形を有効にする。句読点・括弧前後の余白が詰まり、印刷に近い密度感になる。ヒラギノ・Noto Sans JP で特に効果が高い。
.article-body {
max-width: 680px;
margin: 0 auto;
font-size: 18px;
line-height: 1.85;
letter-spacing: 0.02em;
font-feature-settings: "palt" 1; /* 約物字詰め */
}05
一文を短く。段落を細かく。
長い一文は、途中で意味を見失わせる。
短文で切ることで、認知負荷が下がる。
そして一文ごとに段落を分ける（pタグ1文）——これが、行間だけでは作れない「読むリズム」を生む。
note.comやSubstackが長文でも読まれるのは、この構造を採用しているからだ。
注意
ただし、文章の性質に依存する。会話調・感情的な文章では効果的だが、論文・技術文書では段落をある程度まとめた方が論理の流れを保ちやすい。
06
図・写真以外のビジュアルフック
読み続けてもらうには、内容的フックと視覚的フックが両輪になる。
図や写真は強力だが、それだけではない。
テキスト自体を変容させる手法がある。
❝ プルクォート
本文の一文を大きく抜き出して表示。スキャン中の目を止め、「その根拠は？」と続きを読む動機になる。
Ａ ドロップキャップ
セクション冒頭の1文字を大きく。章の始まりを視覚的に示し、「新しいパートが始まる」と脳に伝える。
🖍 カラーハイライト
キーフレーズに背景色をつける。蛍光ペン的な効果でスキャン中でも重要箇所が目に入る。
📌 コールアウトボックス
「ポイント」「注意」「Tips」をボックスで囲む。意外な数字・事実で認知的不協和を作ると効果的。
01 セクション番号
「全部で何個あるか」が見えると読み続ける動機になる。「あとどのくらいか」がわかる安心感も生む。
━ 読書進捗バー
画面上部に現在位置を表示（このページの上部にある赤いバー）。「あとこれだけ」が続読動機になる。
ビジュアルフックは「目を止める」だけだ。「読み続けさせる」のは、その先にある内容の力だ。
まとめ
「読む気にさせる」は設計できる
長文が読まれないのは、内容の問題だけではない。
読者が「読む気になれる環境」を作れていないことが大半だ。
1カラム・18px・行間1.85・680pxのカラム幅——これらは美学ではなく、認知科学に基づく仕様だ。
そこに内容的フックとビジュアルフックを組み合わせることで、はじめて「読まれる長文」が成立する。
「どう書くか」と同時に「どう見せるか」を設計すること——それが、Webの長文コミュニケーションの核心だ。