読みやすい本文とは?長文を最後まで読ませる文字サイズ・行間・行長の基本

ブログ記事やサービス紹介のページを作ったのに、「文章が読みにくい」「途中で読むのをやめてしまう」と言われたことはありませんか。

長い文章を最後まで読んでもらうには、文章の中身だけでなく、文字の大きさや行の間隔といった「読みやすい本文」の設計が欠かせません。

この記事では、文字を「読む」ためのデザインとは何かと、本文の文字サイズ・行間・行長・段落の区切りを整える基本を、見本を使いながら初心者向けに解説します。

読みやすい本文デザインの基本

まずは「読むためのデザイン」という考え方と、本文の読みやすさを左右する4つの要素を押さえましょう。

文字を「読む」ためのデザインとは

文字を「読む」ためのデザインとは、文字を飾りとしてではなく、ユーザーが実際に読んで理解するための道具として設計するという考え方です。

Webサイトを訪れる人は、何かを知りたい、何かをしたいという目的を持って文章を読みます。

そのため、見た目がおしゃれでも内容が読み取りにくければ、デザインとしては目的を果たせていないことになります。

「かっこいいか」ではなく「読んだ人に伝わるか」を判断の基準にすると、迷ったときに選ぶべき答えがはっきりします。

文字で「伝える」ための設計全体については、タイポグラフィとはで解説しています。

なお、この記事で扱う「文章を疲れずに読み続けられるか」は「可読性」と呼ばれます。似た言葉の視認性・判読性との違いは、視認性・可読性・判読性の違いの記事で解説しています。

本文の読みやすさを決める4つの要素

長い文章の読みやすさは、主に次の4つの要素で決まります。

要素	意味	考え方の目安
本文の文字サイズ	本文の文字の大きさ	Webでは16px前後を出発点にする
行間	行と行のあいだの空き	文字サイズの1.5倍以上の行の高さ
行長	1行に並ぶ文字数	日本語なら全角40字程度までに収める
段落の区切り	話のまとまりごとの改行と空き	段落の間を行間より広く空ける

ここに挙げた数値は絶対のルールではなく、書体や画面の大きさに合わせて調整するための出発点です。

なお、pxは画面上の大きさを表す単位で、16pxはブラウザが何も指定されていないときに使う標準の文字サイズです。

行間の「1.5倍」は文字サイズに対する倍率で、16pxの文字なら1行の高さを24px以上にする、という意味になります。

次の比較は、同じ文章をこの4つの要素だけ変えて並べたものです。

文章を最後まで読んでもらうには、内容だけでなく見た目の読みやすさも大切です。文字が小さく、行と行が詰まっていると、読者はどこまで読んだか分からなくなり、目が疲れてしまいます。段落の区切りもないと、どこで話が変わったのかもつかめません。

NG:12px・行間なし・段落の区切りなし

文章を最後まで読んでもらうには、内容だけでなく見た目の読みやすさも大切です。

文字が小さく、行と行が詰まっていると、読者はどこまで読んだか分からなくなり、目が疲れてしまいます。

段落の区切りもないと、どこで話が変わったのかもつかめません。

OK:16px・行の高さ1.8倍・段落ごとに空きを入れた

左の見本は文字が小さく行が詰まっているため、一目で「読むのが大変そう」と感じてしまいます。

右の見本は文字サイズと行間にゆとりがあり、段落ごとに空きがあるので、同じ文章でも抵抗なく読み始められます。

読みやすい本文を作る4つのコツ

ここからは、4つの要素をそれぞれどう決めればよいかを、順番に見ていきます。

本文の文字サイズは16px前後から考える

Webの本文サイズに迷ったら、まずは16px前後から考えるのがおすすめです。

多くのブラウザでは、何も指定しないときの標準の文字サイズが16pxになっており(MDN:font-size)、この大きさで読むことに慣れている人が多いからです。

デザインツールで見ると16pxは少し大きく感じるかもしれませんが、スマートフォンで長い文章を読むときには、これより小さいと読みづらく感じやすくなります。

本文を小さくしすぎるより、まず読みやすい大きさを確保してから、見出しとの差でメリハリをつけるほうが失敗しにくいです。

行間は文字サイズの1.5倍以上を目安にする

行間(行と行のあいだの空き)は、行の高さが文字サイズの1.5倍以上になるようにするのが目安です。

行間が狭いと、行の終わりから次の行の頭へ目を移すときに、隣の行と見間違えやすくなるためです。

MDNも、本文の段落では行の高さを表すCSSのline-heightを1.5以上にすることを、弱視の人や認知に障害のある人のために推奨しています(MDN:line-height)。

日本語の本文では、漢字やかなが詰まって見えやすいため、1.7〜1.9倍くらいまで広げると読みやすく感じることも多いです。

行間の詳しい決め方は、行間と行長の記事で解説しています。

1行の長さ(行長)は全角40字程度までに抑える

1行に並ぶ文字数(行長)は、長すぎても短すぎても読みにくくなります。

行が長すぎると次の行の頭を探すのに迷い、短すぎると改行が多くなって視線が何度も行き来するためです。

この目安の根拠になっているのが、WCAG(ウェブコンテンツ・アクセシビリティ・ガイドライン)です。

WCAGは、Webの標準を定める団体W3Cがまとめた国際的なガイドラインで、年齢や障害の有無、使う環境にかかわらず、誰でもWebの情報を利用しやすくすること(アクセシビリティ)を目的としています。

難しい規格というより、目が疲れやすい人や、小さなスマートフォンの画面で読む人にも読みやすくするための目安と考えると身近に感じられます。

WCAGでは、最も高いレベル(AAA)の達成基準の中で、1行の幅を80字以下、全角文字なら40字以下にできることを挙げています(WAIC:WCAG 2.1 達成基準 1.4.8 視覚的提示)。

パソコンの広い画面で本文を画面幅いっぱいに広げると、1行が60字や70字を超えてしまうことがあるので注意しましょう。

行が長すぎると、行の終わりまで読んだあとに次の行の頭へ目を戻すのが大変になります。
途中で同じ行をもう一度読んでしまったり、1行飛ばしてしまったりするのは、行が長すぎるサインです。

枠の幅いっぱいに広がる行

1行を全角18字までに抑えた行

パソコンの画面で見ている場合、左の見本は枠の幅いっぱいまで行が伸び、右の見本は1行が18字で折り返されます。

見本は枠が小さいので差が控えめですが、実際のページで本文の幅が広がりすぎていないか確認する感覚をつかんでおきましょう。

段落を区切って「ひと息つける場所」を作る

長い文章では、話のまとまりごとに段落を分け、段落の間を行間より広く空けることが大切です。

文章が切れ目なく続くと、どこで話題が変わったのか分からず、読者は読む前から「長そうだ」と感じて離れてしまうからです。

先ほどのWCAGの達成基準 1.4.8でも、段落の間隔を行送り(1行目の頭から次の行の頭までの距離)の1.5倍以上にできることが挙げられています。

Webでは、1つの段落を2〜4文程度の短めのかたまりにして、段落の間に1行分くらいの空きを入れると、スマートフォンでも読み進めやすくなります。

CSSで本文を整える例

ここまでの4つのコツをCSSで書くと、たとえば次のようになります。

コードを書かない人も心配はいりません。WordPressのブロックエディタやFigma・Canvaなどのツールでも、文字サイズや行間の設定欄に同じ考え方の数値を入れれば整えられます(行間を%で指定するツールなら、1.8倍は180%です)。

.article-body {
  font-size: 1rem;    /* ブラウザ標準なら16px */
  line-height: 1.8;   /* 行の高さを文字サイズの1.8倍に */
  max-width: 40em;    /* 1行を全角40字程度までに */
}

.article-body p {
  margin-bottom: 1.5em; /* 段落の間に空きを入れる */
}

このコードがしているのは、「本文を標準の大きさにする」「行の高さを1.8倍に広げる」「1行が長くなりすぎないよう幅に上限をつける」「段落ごとに空きを入れる」の4つだけです。

emは文字1つ分の大きさを表す単位で、日本語の全角文字はおおむね1文字が1em幅なので、max-width: 40emで1行を全角40字程度に抑えられます。

font-sizeをrem(ページ全体の基準サイズに対する倍率)で指定しておくと、ユーザーがブラウザの文字サイズ設定を大きくしたときにも本文が一緒に大きくなります。

実践のポイント

読みやすい本文を作るときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

手書き風などの装飾的な書体を、本文にまで使ってしまうことがあります。
個性的な書体は見出しなどの短い文字に限り、本文には線が均一で癖の少ない書体を選びましょう。
本文に向くフォントの選び方は見やすいフォントの選び方で解説しています。
デザインツールの大きな画面では読みやすく見えても、スマートフォンの実機では文字が小さく、行も詰まって感じることがあります。
本文は必ず実際の端末で表示して、数段落を通して読んでみましょう。
「おしゃれに見せたい」と本文の文字色を薄いグレーにしすぎて、背景との差が足りなくなることがあります。
本文の文字色と背景の明るさの差(コントラスト比)は、コントラスト比の記事を参考に確認しましょう。

よくある質問

Q. 読みやすいかどうかは、どうやって確かめればいい?
A. 完成したら、実際の端末で本文を声に出して読んでみたり、少し画面から離れて読んでみたりするのがおすすめです。
途中で読む場所を見失ったり、目が疲れたりした箇所があれば、文字サイズ・行間・行長・段落のどれが原因かを見直しましょう。
Q. 行間は広ければ広いほど読みやすい?
A. 広すぎると、行と行がばらばらに見えて文章のつながりが感じにくくなります。
文字サイズの1.5倍以上を確保したうえで、2倍前後までの範囲で、実際に読みながら調整するのがおすすめです。
Q. ユーザーが自分で行間を広げることもある?
A. あります。
WCAGの達成基準 1.4.12 テキストの間隔(レベルAA)では、ユーザーが行の高さを文字サイズの1.5倍、段落の後の間隔を2倍などに広げても、内容が欠けたり重なったりしないことが求められています(WAIC:WCAG 2.1 達成基準 1.4.12)。
本文の入る枠の高さを固定しすぎないようにしておきましょう。