「せっかく書いた記事なのに、なぜかすぐ離脱されてしまう。」
内容が良くても、文字が詰まっていたり行間が狭かったりすると、読者はあっという間にページを閉じてしまいます。
読みにくいブログ記事の問題は、コンテンツの質ではなく「見た目」にあることが多いです。
フォントサイズ・行間・1行あたりの文字数といったレイアウト設定が、読者の滞在時間を大きく左右しています。
この記事では、Yahoo! JAPANの大規模実験データを含む最新研究に基づき、読みやすさを数値で改善するための設定と技法を具体的に解説します。
この記事で分かること
- Yahoo! JAPANの実験で フォント17px × 行間1.6em が最適と実証
- 適切な行間・余白だけで読書疲労を25%削減
- 1行の文字数を45〜75字に収めると読みやすさが32%向上
- ブログ読者の約80%はスマホで閲覧しており、PC最適化だけでは不十分
目次
なぜブログの「見た目」で読者は離脱するのか？
ブログをスマートフォンで読む人も多くなってきています。
スマホ画面ではフォントが小さすぎると目が疲れ、行間が狭ければ読む気がなくなります。
文字がぎっしり詰まったページは、内容を評価する前に離脱されます。
よくあるのが次のような問題です。
- フォントが小さすぎて目が疲れる（14px以下）
- 行間が狭く、どの行を読んでいるか分からなくなる
- 1行が長すぎて視線の移動が大きくなる
- 段落が長すぎて「読む量が多い」と感じさせてしまう
まずは「見た目」を整えて、本文を読む前にユーザーが離脱してしまうのを防ぎましょう！
Yahoo! JAPANの研究チームが2023年に実施した検証では、まずフォントサイズ17px・行間1.6（または1.8）に設定した実験で、10秒未満の「読み飛ばし」を最大23%削減することに成功しました。
参考URL：Yahoo! JAPAN Tech Blog, 2023
フォント・文字サイズ・行間の最適値はどこか？
フォントサイズを16〜18pxに設定すると、12pxと比較して読解速度が25%向上し、情報定着率が19%改善するという研究結果があります（Worldmetrics, 2026）。
ただし「大きければいい」わけではなく、行間とのバランスが重要です。
文字サイズの推奨値
スマホ・PC両対応での推奨は「16〜17px」です。
Googleもベースフォントサイズとして16px以上を推奨しており、主要ブラウザのデフォルト値でもあります。
このブログでは17pxに設定して、見やすさを重視しています。
| フォントサイズ | 向いている場面 |
|---|---|
| 14px以下 | 注記・キャプション限定 |
| 16px | PC向けの標準値 |
| 17px | PC・スマホ両対応の推奨値 |
| 18px以上 | シニア向け・アクセシビリティ重視 |
行間の設定方法
WCAG 2.2（W3C WCAG 2.2、SC 1.4.12）では、行間をフォントサイズの 1.5倍以上 確保することを要件として定めています。
Yahoo! JAPANの実験では、1.6emが最もKPIへの貢献が高い結果となりました。
ただし行間を広げすぎると「間延び」した印象になりますので、1.4〜1.7の範囲に収めましょう。
フォントの選び方
ブログのWebフォントは、ゴシック体（サンセリフ体）を使いましょう。
明朝体は印刷向けに設計されており、ディスプレイ表示では細い縦線が潰れて読みにくくなります。
日本語ブログで広く使われているフォントスタックは以下のとおりです。
font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic", Meiryo, sans-serif;
ブログを読みやすくする8つの方法
フォント設定に加えて、以下の8つを取り入れることで、読者が最後まで読んでくれる記事になります。
1. 見出しで記事を「ナビゲート」する
H2見出しは、記事全体のロードマップになります。
読者はまず見出しをざっと眺めて「この記事に答えがあるか」を判断しています。
見出しが曖昧だと、内容を確認する前に離脱されてしまいますので注意しましょう。
見出しのつけ方も「〇〇の方法」より「〇〇を3ステップで改善する方法」のほうが、読者の期待を具体的に示せます。
2. 改行と段落を使い分ける
1つの段落は3〜4文、150字以内を目安にしましょう。
それ以上続くと視覚的に重くなり、読者の目が止まってしまいます。
僕は「1段落1メッセージ」を意識しています。
一つの段落に複数の内容を詰め込むと、後で読み返したときに理解しにくくなります。
3. 箇条書きで情報を整理する
3つ以上の項目が並ぶときは、箇条書きに切り替えましょう。
文章で続けると情報の境界が曖昧になり、読者が「いくつあるの？」と迷ってしまいます。
ただし箇条書きを使いすぎると文章がバラバラな印象になるので、文と合わせて、バランスよく使いましょう。
箇条書きのメリット
- 一覧性がよくなる
- 情報を整理して伝えることができる
- 直感で理解しやすくなる
- 記憶に残りやすい
4. ひらがなと漢字のバランスを整える
「漢字30%・ひらがな70%」が一般的な目安です。
漢字が多すぎると文章が固くなり、ひらがなが多すぎると幼稚な印象になります。
漢字よりもひらがなの方が読みやすい場合もあるので使い分けが必要です。
ひらがなのほうが読みやすい
- なぜ（何故）
- など（等）
- ころ（頃）
- できる（出来る）
- ため（為）
- おおむね（概ね）
- しきりに（頻りに）
- しばらく（暫く）
また、カタカナが混じる場合は「漢字20%・ひらがな70%・カタカナ10%」程度を意識しましょう。
漢字は視覚的なアンカーポイントになり、読者が重要な単語を拾い読みするときの手がかりになります。
ひらがなが多すぎると目が滑りやすくなるので、漢字を使って大事な情報に目がいくようにしましょう。
5. 文字装飾は「強調」のためだけに使う
太字は本当に重要な箇所だけに絞りましょう。
1段落に太字が3か所以上あると、どこが重要か分からなくなってしまいます。
色付き文字は2色まで。
色を増やすほど「チカチカする」原因になり、逆に読みにくくなります。
6. 画像で「視線の休憩場所」を作る
長文が続く箇所に画像を挿入すると、読者の目が休まります。
画像の役割は「説明補助」よりも「リズム調整」に近いです。
500〜700字ごとに1枚を目安にしましょう。
画像のない記事は文字の壁になりやすいので注意しましょう。
7. 句読点で「読み上げたときのテンポ」を作る
句読点は、声に出して読んだときに「息継ぎするポイント」になります。
長い文章に読点が1つもないと、読み手の頭が追いつきません。
一方、読点が多すぎると文章がぶつ切りになってしまいます。
声に出して読んでみて、自然に区切れる場所に句読点を置きましょう。
8. 色数は3色以内に収める
本文色・見出し色・強調色の3色が基本です。
色が多いと、どの色に意味があるのか読者が理解できなくなります。
配色に迷ったら、
- 本文はほぼ黒（#333〜#444）
- 見出しはやや濃いめ（#111〜#222）
- 強調はサイトのアクセントカラー1色
という構成がシンプルでおすすめです。
主要メディアのレイアウト設定から学ぶ最適値
主要なニュースサイトは「読まれるためのデザイン」を徹底的に最適化しています。
各サイトのフォントサイズと行間を確認すると、共通のパターンが見えてきます。
フォントサイズは16〜17px、行間は1.6〜1.9が主流になっています。
| サイト | フォントサイズ | 行間 | 本文の最大幅 |
|---|---|---|---|
| Yahoo! ニュース | 17px | 1.6em | 約650px |
| NHK Web | 16px | 1.75em | 約680px |
| 朝日新聞デジタル | 17px | 1.7em | 約660px |
| note | 16px | 1.9em | 約620px |
共通しているのは「大きめのフォント・ゆったりとした行間・読み幅を制限したレイアウト」です。
横幅が広すぎると視線の移動が増えて疲れやすくなるため、読み幅の制限は重要です。
WordPressで今すぐ実装できるCSS設定
WordPressテーマによって、フォントの変更箇所が異なります。
AFFINGERとSWELLは以下の場所で変更できます。
「AFFINGER」テーマでフォントや行間を変更する場合
AFFINGERを使っている場合は、「AFFINGER管理」＞「全体設定」の中にある「フォントのサイズ」で変更できます。
「SWELL」テーマでフォントや行間を変更する場合
SWELLを使っている場合は、「外観」＞「カスタマイズ」＞「サイト全体決定」＞「基本デザイン」＞「フォント設定」で変更できます。
細かい調整を行いたい場合は、追加CSSで上書きしましょう。
設定後の確認ポイント
設定変更後はスマホ表示で確認しましょう。
PCでは問題なく見えても、スマホでは文字が小さすぎたり行間が詰まりすぎたりするケースがあります。
Chromeの開発者ツールでモバイル表示にすれば、実機を想定した画面確認が可能です。
Chromeの開発者ツールでモバイル確認する方法
- 開発者ツールを表示（Ctrl＋Shift＋i）
- Dimensions（機種選択）を表示（Ctrl＋Shift＋m）
- Dimensionsをプルダウンから選択（iPhone XRなど）
- 表示された画面で表示イメージを確認
よくある質問
ブログのフォントサイズは何pxが最適ですか？
16〜17px が推奨。
Yahoo! JAPANの2023年実験では17pxが最もパフォーマンスが高く、Googleも16px以上を推奨しています。
14px以下は読みにくく、18px以上は見出しとの区別がつきにくくなります。
行間（line-height）の推奨値はどれくらいですか？
1.5〜1.7 の範囲が推奨
WCAG 2.2では最低1.5、Yahoo! JAPANの実験では1.6が最もKPIへの効果が高い結果でした。
スマホでは1.7まで広げると読みやすくなります。
1行あたりの文字数はどれくらいが適切ですか？
全角で 約30〜40字（半角換算60〜80文字）が目安です。
W3C（Web技術の国際標準化団体）のガイドラインでは、日本語・中国語・韓国語（CJK）は1行あたり最大 40文字 までとなっています（Understanding Success Criterion 1.4.8: Visual Presentation | WAI - W3C）。
ゴシック体と明朝体、ブログにはどちらが向いていますか？
ブログには ゴシック体（サンセリフ体） を使いましょう。
明朝体は印刷向けのデザインで、ディスプレイ表示では細い縦線が潰れて読みにくくなります。
Noto Sans JP・Hiragino Kaku Gothic ProN・Yu Gothicが定番です。
漢字とひらがなの比率はどれくらいが読みやすいですか？
漢字30%・ひらがな70% が一般的な目安です。
カタカナが混じる場合は「漢字20%・ひらがな70%・カタカナ10%」を意識すると、自然で読みやすい文章になります。
漢字が多すぎると堅くなり、少なすぎると幼稚な印象になります。
まとめ：読みやすいブログに変えるための3つの優先アクション
読みやすいブログを作るには、「書き方」と「見た目の設定」の両方が必要です。
設定面では、Yahoo! JAPANの実験で実証された フォント17px × 行間1.6em がおすすめです。
設定後はスマホでの見え方もチェックしておきましょう。
「1段落1メッセージ」「漢字30%」「文字装飾は控えめ」の3つを守るだけでも、読みやすさが改善します。
今すぐできること（優先順位順）
- 追加CSSでフォントを17px・行間1.6emに設定する
- 既存記事の段落を見直し、150字を超えるものを分割する
- 記事をスマホ実機で読んでみて、読みにくい箇所を特定する
見た目の読みやすさを整えたら、次は「書き方」のレベルを上げていきましょう。
文章表現の改善方法については「分かりやすい文章の書き方：例文付きで17の法則を紹介」、記事構成の作り方については「ブログの記事構成の作り方：テンプレートを使って質の高い記事を書こう！」でそれぞれ詳しく解説しています。
