結論から言うと、見やすい記事は「オシャレなフォントを当てた記事」ではない。開いた瞬間に何の記事か分かり、途中で注意が飛んでも戻れて、文字を大きくしても壊れず、言語が変わっても自然に読める記事だ。読者は記事を攻略しに来ていない。記事側が道案内をしろ、という話である。
先に3行でまとめると：
- 本文は17〜18px前後、行間1.7〜1.9、長すぎない1行幅を実務上の開始点にすると扱いやすい。これは万能な法律ではない。
- WCAG 2.2では、コントラスト、200%文字拡大、320 CSS pxでのリフロー、Text Spacing上書き、キーボード操作などを壊さないことが重要だ。[R1-R8]
- 12言語は「同じCSSを12回コピペ」ではなく、共通アクセシビリティ基盤＋文字体系ごとの調整にする。[R10-R13]
1. 読みやすさはセンスではなく、3層の設計
読みやすさには少なくとも3層ある。文字が見えること、文章を追えること、ページを操作できることだ。18pxでも文章が壁ならつらい。文章が簡単でもボタンが小さすぎればつらい。つまり「フォントサイズだけ直して完成」は、家の表札だけ磨いて階段を撤去するようなものだ。
2. 読者は最初から全文を読まない。だから4段階で読めるようにする
Webでは拾い読みが普通に起きる。そこで記事を、5秒＝タイトルと冒頭、30秒＝H2と太字、3分＝要点、深掘り＝全文の4段階で読めるようにする。これは短文しか書くなという意味ではない。長文でも途中駅を大量に作れ、という意味だ。
H2だけ並べても話が通り、各節の最初に小さな結論があり、表や箇条書きで比較が拾える。こうすると「全部読む人」と「答えだけ欲しい人」を同じページで共存させられる。
3. 本文の文字サイズは17〜18px前後から始める
Web本文に絶対の最適値はない。ただし、小さすぎる文字は視認性を落とし、実ページを使った視線研究でもフォントサイズの増加は固定時間の短縮と関連した。[R14] 実務では本文17〜18px前後を開始点にし、remなど拡大しやすい単位で組むと扱いやすい。
重要なのは「18pxにしたからアクセシブル」ではないこと。WCAG 2.2 AAのResize Textは、200%まで拡大しても内容や機能を失わないことを求める。[R3] 読者が大きくした瞬間にメニューが消えるなら、18pxの美しい初期画面はただの記念写真である。
4. 行間・段落間・1行幅は「文字の交通量」を減らす
本文の開始値として行間1.7〜1.9程度は、長文Web記事で余裕を作りやすい。段落間にも明確な空白を置く。1段落1テーマを基本にし、改行ゼロの巨大ブロックを避ける。[R9]
欧文では55文字程度の中程度の行長が有効だった研究があり、実務では55〜70文字前後を開始点にしやすい。[R15] WCAG AAAのVisual Presentationは、変更可能な表示として80文字以下、CJKは40字以下を示す。[R8] ここでも「55が宇宙の真理」ではない。画面、言語、文字サイズで調整する。
本文の両端揃えは、単語間の空白が暴れやすい。特にWebでは基本的に片側揃えでよい。[R8]
5. フォントは魔法の杖ではない。普通に読めるものを速く出せ
セリフ体かサンセリフ体かに万能の勝者はいない。制御実験では読書速度に大きなセリフ効果が見られなかった。[R16] さらに2026年のメタ分析では、OpenDyslexicなどの「ディスレクシア向け特殊フォント」が標準フォントより一貫して読書成績を改善する証拠は確認されなかった。[R17]
つまり、障害対応＝特殊フォント強制、ではない。十分なサイズ、余白、自然な文字形、正しい文字収録、ユーザーが拡大できることのほうが土台になる。本文は端末のシステムフォントや各言語向けの一般的なフォントを優先すると、巨大なWebフォントを読み込まずに済む。
6. 背景色とコントラスト：薄いグレー文字は「オシャレ税」が高い
WCAG 2.2 AAでは通常文字4.5:1、大きな文字3:1以上のコントラストが基準になる。[R2] 「なんとなく高級そう」な薄灰色を白背景に置き、読者の目にデバフをかける必要はない。
研究では、暗い文字を明るい背景に置く正極性表示が、校正や小さい文字の視認で有利になる結果が複数ある。[R18] したがって一般向けの初期値はライトテーマが無難。ただしダークモードを好む人もいるので選択肢は残す。「真っ白より必ずオフホワイトが健康に良い」まで断言できる強い根拠はない。
7. H1・H2・H3は飾りではなく、記事の道路標識
H1はページの主題。H2は大きな論点。H3はその内訳。見た目だけ太字にして見出しのふりをするのではなく、HTMLの見出し構造として意味を持たせる。スクリーンリーダー利用者は見出しを使ってページ内を移動するため、見出しは視覚デザインとナビゲーションを兼ねる。[R7][R9]
良いテストは簡単だ。H2だけ抜き出しても記事の筋が分かるか。 分からなければ、見出しが「第2章」「続き」「もっと詳しく」みたいな迷子製造機になっている可能性が高い。
8. 太字・箇条書き・表・結論ボックスは「情報標識」として使う
太字は重要語。箇条書きは並列情報。表は比較。結論ボックスは判断の着地点。全部に役割を与える。全文を太字にしたら、警告灯を100個同時に点灯させるのと同じで、結局どれも目立たない。
リンクは色だけで区別せず、下線など別の手掛かりを持たせる。重要情報も「赤だから危険です」で終わらせず、文字やアイコンでも意味を示す。
9. 「ドパガキ」モードを前提にする。ただし人類の注意力8秒説には乗らない
ここでいう「ドパガキ」は医学用語ではない。通知→ショート動画→別タブ→戻る→『どこ読んでた？』という現代Webの散漫状態をネタ化した呼び名である。世代や障害をまとめて罵る言葉として使う話ではない。
対策は記事を全部ショート動画化することではない。短い段落、具体的な見出し、節ごとの小結論、必要なら目次、戻ってきても文脈を復元できる固有名詞を書くこと。自動再生、無関係なカルーセル、読んでいる途中に画面を占領するポップアップは、読者の集中に椅子を投げる行為なので減らす。[R9]
10. 障害アクセシビリティは「特別モード」ではなく標準装備にする
基礎はWCAG 2.2 AAを狙う。代表的には、200%文字拡大、320 CSS px相当で横往復しないリフロー、4.5:1コントラスト、24×24 CSS px以上のポインタ対象または十分な間隔、キーボード操作、見えるフォーカス、繰り返し部分を飛ばす仕組みなどだ。[R1-R7]
Text Spacingの「行間1.5、段落後2、字間0.12em、単語間0.16em」は初期CSSをその値にしろという命令ではない。利用者がその値へ上書きしても、文字が重なったり消えたり機能が壊れたりしないことがAA要件である。[R5]
実務上は主要ボタンを44px前後まで大きくすると押しやすいが、WCAG 2.2 AAの最低基準そのものは例外条件を含む24×24 CSS pxだ。[R6]
11. 12言語は同じデザインシステムを共有し、同じ組版を強制しない
共通化するのは、コントラスト、見出し階層、拡大、リフロー、余白、操作性、アクセシブルネームなどの土台。言語ごとに変えるのは、フォント、改行、ハイフネーション、句読点、行高などの文字体系依存部分だ。[R10-R13]
lang属性も重要。zh-Hans、zh-Hant、pt-BRのような情報を勝手にzhやptへ丸めない。ブラウザ、読み上げ、ハイフネーション、フォント選択の手掛かりになる。
12. 言語別の実務開始値
| グループ | 開始値の考え方 |
|---|---|
| 日本語 | 17〜18px、行間1.8前後、1行30〜40字程度から。不要な字間拡張を強制しない。日本語組版を尊重。[R10] |
| 簡体字・繁体字中国語 | CJK向けフォントを分け、禁則や句読点を壊さない。zh-Hansとzh-Hantを分離。[R11] |
| 韓国語 | Hangul向けフォントを使い、不自然な字間を入れない。韓国語組版の行分割を確認。[R12] |
| タイ語 | 正しいシェーピングと語境界・改行を壊さない。行高はやや広めが安全。word-break: break-allを雑に使わない。[R13] |
| ベトナム語 | ダイアクリティカルマークを完全収録するフォントを使い、固定高さで上下面を切らない。 |
| en/es/pt-BR/id/fr/de | 55〜70字程度を開始点にし、正しいlangとhyphens:autoを検討。ドイツ語の長い複合語などでオーバーフローを確認。 |
13. スマホでは「読める」だけでなく「すぐ出る」が重要
12言語全部に巨大なWebフォントを積むと、文字が出る前に読者が帰る。web.devはWebフォントがFCP/LCPを遅らせ、フォント入れ替えがCLSを起こしうると説明している。[R19] 本文はシステムフォント優先、ブランドフォントは必要箇所だけ、が堅い。
Core Web Vitalsの良好目標は現在、p75でLCP 2.5秒以下、INP 200ms以下、CLS 0.1以下。[R20] 読んでいる途中で広告やフォントのせいで段落がズドンと下へ落ちるサイトは、内容以前に「指で本を押さえていたら店員が机を動かした」状態になる。
14. 継続利用される記事は、毎回同じ場所に同じものがある
再訪を増やす土台は、派手な演出より予測可能性だ。見出しの見た目、リンクの見た目、目次、記事幅、言語切替、検索結果、関連記事の位置が毎回ほぼ同じなら、読者は操作を学習できる。
文字サイズ・行間・テーマを変える「Aa」設定を用意するなら、その選択を保存するのもよい。アクセシビリティは毎回「障害者モードをONにしてください」ではなく、初期状態から壊れにくく、必要な人だけ調整できる形が扱いやすい。
15. やってはいけない「読者耐久テスト」
避けたい代表例は、12px級の本文、薄い灰色、100文字超の長い行、両端揃え、1画面を埋める段落、見出し階層の飛び、全部太字、色だけで意味を表すUI、自動再生、閉じにくいポップアップ、本文を画像にする、拡大すると横スクロール地獄、巨大Webフォント、意味のないアニメーションである。
読者は「このサイトを読み切れる知能と動体視力があるか」を受験しに来たわけではない。
16. 迷ったらこの基準値から始める
| 項目 | 実務上の開始値 | 備考 |
|---|---|---|
| 本文 | 17〜18px | 絶対値ではない。拡大可能にする |
| 本文行間 | 1.7〜1.9 | 言語・フォントで調整 |
| 欧文1行 | 約55〜70文字 | 研究と実務の開始点。長すぎを避ける[R15] |
| CJK1行 | 約30〜40字 | 40はWCAG AAA Visual Presentationの目安にも対応[R8] |
| H1 | 約32〜40px | 本文との差を明確に |
| H2 | 約25〜30px | H2だけでも流れを理解可能に |
| H3 | 約21〜24px | H2との差を残す |
| 通常文字コントラスト | 4.5:1以上 | WCAG 2.2 AA[R2] |
| 大きな文字 | 3:1以上 | WCAG 2.2 AA[R2] |
| ポインタ対象 | 24×24 CSS px以上が基準 | 例外あり。実務では44px前後も検討[R6] |
| 文字拡大 | 200% | 内容・機能を失わない[R3] |
| リフロー | 320 CSS px | 原則2方向スクロール不要[R4] |
17. 品質ゲートを作る。「気をつけます」は品質保証ではない
記事工場やCMSなら、可読性を人間の記憶だけに任せない。静的検査でlang、H1、見出し順、画像alt、アクセシブルネーム、禁止CSSを見て、実ブラウザ検査で320px、200%拡大、Text Spacing上書き、キーボード、フォーカス、横スクロールを確認する。
安全に直せるものは自動修正してよい。たとえば欠けたlangや共通CSSの適用。ただし文章の意味、翻訳、altの内容など意味を変える修正は勝手に捏造しない。直せないならFAILにして人へ回す。品質ゲートは「怒る先生」ではなく「壊れた商品を出荷しない改札」である。
18. まとめ：良い記事は読者を試験しない
見やすい記事の本質は、文字を巨大化することでも、余白をオシャレにすることでもない。どこを読めばいいか分かる、途中で戻れる、拡大できる、押せる、読み上げられる、言語ごとに自然、そして速い。 これらを同じ設計システムにすることだ。
普通の成人には自然で、注意が散りやすい人、視力が弱い人、読字が苦手な人、キーボードや支援技術を使う人にも壊れにくい。それが一番強い。「アクセシブル版」を別室に作るより、最初から玄関を広くしておけばいい。
