読みやすい文字サイズの決め方｜サイズ・行間・1行の文字数を数値で揃える

「文字が小さくて読みにくい」という指摘に対して、サイズだけを上げても改善しないことがあります。読みやすさは文字サイズ、行間、1行の文字数の3つで決まるためです。サイズを上げた結果、1行の文字数が減りすぎて改行だらけになる、という例は珍しくありません。

この3つは互いに影響します。文字を大きくすれば1行に入る文字数は減り、行間も相対的に狭く見えます。したがって、1つだけを変えるのではなく、3つをまとめて決める必要があります。

この記事では、3つの数値の決め方、業種や客層による調整、スマートフォンでの確認方法、そして小さい文字が使われがちな箇所の点検を扱います。

読みやすさを決める3つの数値

実務で最も見落とされるのは3行目です。文字サイズと行間は指定するのに、本文の領域に最大幅を設けていないサイトが多くあります。その結果、大きな画面では1行が長くなりすぎ、行の頭に戻る動きが負担になります。

感覚的な目安として、日本語の本文は1行あたり35〜45文字程度に収まると読みやすくなります。この範囲に入るように本文の最大幅を決めてください。

本文の文字サイズを決める基準

数値の正解は業種と客層で変わります。ただし判断の基準は共通です。

1. ブラウザの既定サイズを下回らない：既定より小さくする理由がない限り、下げない
2. 実機で腕を伸ばした距離から読めるか：パソコンの画面での印象は当てにならない
3. 客層の年齢を考慮する：40代以上が中心なら大きめに寄せる
4. 読ませたい量で調整する：長文を読ませるページは大きめ、一覧は標準

2番目が最も確実な確認方法です。制作している人はパソコンの大きな画面を至近距離で見ているため、実際の閲覧環境と条件が違います。スマートフォンに表示して、普段スマートフォンを持つ距離で読めるかを確認してください。

3番目については、客層の年齢が高い業種（医療、介護、住宅、士業など）では、標準より一段大きくする判断が有効です。読みやすさが問い合わせ率に直結します。

行間と1行の文字数

1行目の目安が幅を持つのは、1行の文字数と連動するためです。1行が長いページほど、行間を広く取らないと次の行の頭を見失います。逆に1行が短ければ、行間は狭めでも追えます。

2行目は見落とされがちです。見出しの行間を本文と同じにすると、2行になったときに別々の見出しに見えます。見出しは本文より狭くしてください。

小さい文字が使われがちな箇所

本文のサイズを整えても、次の箇所が小さいままだと「読みにくいサイト」という印象は残ります。

2行目は表示上の問題にもつながります。価格を打ち出しながら、その適用条件が実質的に読めない大きさになっている状態は避けてください。

3行目と4行目はフォームの完了率に直結します。入力中に文字が読めない、エラーの内容が分からないという状態は、そのまま離脱になります。フォームの改善は入力フォームの離脱率を改善するデザインの工夫で扱っています。

実機で確認する手順

1. スマートフォンで主要ページを開く：トップ、サービス、料金、問い合わせ
2. 普段持つ距離で読む：顔に近づけない
3. 本文以外も読む：注釈、フッター、フォーム、エラー表示
4. 屋外や明るい場所でも見る：コントラストの問題が見える
5. 客層に近い人に見てもらう：年齢が離れている場合は特に

5番目が最も確実です。制作している側と閲覧する側の年齢が離れているほど、判断がずれます。実際の顧客層に近い人に、その場で読んでもらってください。

4番目では、文字サイズとは別に色の薄さが問題になることがあります。背景との明暗の差が足りているかは配色のコントラスト比の基準｜WCAGの数値と、実務での使い方で扱っています。

他の要素との順序

デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。

よくある失敗

文字サイズだけを大きくする

1行の文字数が減りすぎて改行だらけになります。3つの数値をまとめて調整してください。

本文の最大幅を設けない

大きな画面で1行が長くなり、行の頭に戻る動きが負担になります。1行35〜45文字程度に収まる幅を設定してください。

注釈を極端に小さくする

読めない注釈は、書いていないのと同じです。価格の条件については表示上の問題にもなります。

パソコンの画面だけで確認する

実際の閲覧環境と距離が違います。スマートフォンで、普段持つ距離から確認してください。

見出しの行間を本文と同じにする

見出しが2行になったときに、別々の見出しに見えます。見出しは本文より狭くしてください。

よくある質問

推奨される具体的な数値はありますか

一律の正解はありません。判断の基準は、ブラウザの既定サイズを下回らないこと、実機で普段の距離から読めること、1行が長くなりすぎないことの3つです。この条件を満たす範囲で、客層に合わせて調整してください。

高齢の顧客が多い業種では何を変えますか

文字サイズを一段大きくし、行間も広めに取ってください。あわせて文字色を濃くし、背景との明暗の差を確保すると効果が上がります。サイズだけでは不十分です。

情報量が多いページでは小さくしてもよいですか

小さくするより、情報を分割することを先に検討してください。読めない情報は載っていないのと同じです。ページを分ける、折りたたむといった対応のほうが結果的に伝わります。

フォントの種類によって読みやすさは変わりますか

変わります。同じサイズでも書体によって見た目の大きさが異なります。選定の基準はWebフォントの選び方｜与える印象の違いと業種別の選定基準を参照してください。

アクセシビリティの基準に合わせる必要がありますか

どこまで対応するかは事業の状況で決まります。ただし文字サイズと明暗の差は、対応の中でも費用が小さく効果が大きい項目です。優先順位の考え方はWebアクセシビリティ対応はどこまでやるべきか｜優先順位の決め方で扱っています。

まとめ

読みやすさは文字サイズだけで決まりません。サイズ、行間、1行の文字数の3つがそろって初めて読みやすくなります。サイズだけを上げると1行の文字数が減りすぎ、改行だらけで逆に読みにくくなることがあります。

特に見落とされるのが1行の文字数です。本文の領域に最大幅を設けていないと、大きな画面では1行が長くなりすぎ、行の頭に戻る動きが負担になります。日本語の本文は1行あたり35〜45文字程度に収まる幅を目安にしてください。

確認はパソコンの画面ではなく、スマートフォンで普段持つ距離から行ってください。制作している側は大きな画面を至近距離で見ているため、実際の閲覧環境と条件が違います。客層と年齢が離れている場合は、近い人に読んでもらうのが最も確実です。あわせて注釈、フォームの入力欄、エラー表示など、小さくなりがちな箇所も点検してください。

当社ではホームページ制作において、読みやすさを含めた設計からご相談を承っています。自社サイトの点検を進めたい場合は、資料をダウンロードのうえご活用ください。