HTMLやCSSを使い、Webサイトの更新・修正は一通りできるようになった。そこからもう一段できることを増やしたい、そんな方に向けた本連載。今回は「Webページのテキストを読みやすくするためのテクニック」。多くの人が快適に読めるページにするには、どんな表示がよいのでしょうか。書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野 祐東さんが解説します。
読みやすいテキストはどう表示する？
テキストの読みやすさを決める要因はいくつかあります。その中でもフォントサイズ、行間、コントラストの3つはとくに重要です。既存のWebサイトを更新するときは勝手にデザインを変更できないかもしれませんが、読みづらい原因を探る基礎的な知識はあったほうが実務でも役に立ちます。
1.テキストの読みやすさに影響するポイント
2.フォントサイズは適切か
3.行間は適切か
4.コントラストは十分か
さいごに
1. テキストの読みやすさに影響するポイント
Webサイトにとって、テキストの読みやすさは重要です。検索してせっかくサイトに来てくれても、読みづらくてページを離れてしまったら意味がありません。もちろん、視覚的なインパクトも大事ですが、情報を伝えるには、あくまでテキストが読みやすいサイトを作ることが重要です。 この記事では、読みやすいテキストにするためのデザイン上のテクニックを解説します。とくに、既存のサイトにも比較的簡単に導入できる改善手法を紹介します。
■テキストの読みやすさに影響する3つのポイント
デザイン上、読みやすさを改善できる重要なポイントは主に3つあります。
- フォントサイズが適切か
- 行間は適切か
- 背景と文字のコントラストは十分か
一つひとつ詳しく見ていきましょう。
2. フォントサイズは適切か
読みやすさを決める3つのポイントのうち、もっともわかりやすいのはフォントサイズの違いでしょう。小さすぎれば見づらくなることは直感的にわかるとしても、大きければよい、というものでもありません。
本文に設定するフォントサイズによって、読みやすさに違いがあるかどうか見てみましょう。次の図では、フォントサイズを10px、16px、20pxに設定した3つのボックスを並べています。
▲キャプション異なるフォントサイズで見え方が変わる
人によって感じ方は違うかもしれませんが、10pxだと少し小さいと感じ、20pxだと大きくて読みづらいと感じる人が多いのではないでしょうか。
「フォントサイズを○○に設定するとよい」という確実な答えはありませんが、次の点を考慮しましょう。
■デフォルトのフォントサイズは16px
主要なブラウザ（Google Chrome, Microsoft Edge, Mozilla Firefox, Safari）のデフォルトの設定では、見出しなどを除く本文のフォントサイズは16pxに設定されています。本文のサイズは16pxが基準と考えておくのがよいでしょう。
そこから極端に大きくしたり、小さくしたりすることは避け、デザインやWebサイトの雰囲気などによって数ピクセル調整する程度に留めておくのが無難です。
■年齢が上がるにつれて小さい文字が読みづらくなる
年齢が高くなるにつれ文字が読みづらくなります。対象読者の年齢層が高いことがわかっている場合は、あまりフォントサイズを小さくしないほうがよいでしょう。
■パソコンに比べてスマホでは小さく見える
同じフォントサイズでも、パソコンに比べるとスマホでは文字が小さく見えます。現在はスマホでWebサイトを閲覧する人が多いので、原則としてフォントサイズは、スマホで見たときの印象を第一に考えることをおすすめします。
■フォントサイズを設定する方法
フォントサイズは、CSSのfont-sizeプロパティで変更できます。font-sizeプロパティは継承する（親要素で設定した内容が子要素にも適用される）ので、ページ全体のフォントサイズを設定したいときは、<html>要素にfont-sizeプロパティを適用します。この場合のCSSは次のように書きます。
html {
font-size: 16px;
}
▲ページ全体のフォントサイズを設定する
3. 行間は適切か
行間の空き具合もフォントサイズと同じくらい、読みやすさに大きく影響します。行間の違いによって、読みやすさにどのくらいの違いがあるか見てみましょう。 次の図では行間（1行の高さ）を1行分、1.5行分、2行分に設定しています。
▲行間の違いも読みやすさに影響する
行の高さが1行だと明らかに読みづらく感じます。1.5行分なら不自由はありませんが、もしかしたらもう少し行間が空いていたほうがよいと感じる人がいるかもしれません。2行分になると空きすぎて、文字がまばらに配置されていると感じる人が多いでしょう。
一般的に、本文の行の高さは1.5行から1.7行くらいに設定することが多いのですが、フォントサイズによっても違いがあり、フォントサイズが大きければ、行の高さはそれほど必要ない場合もあります。
本文の行間を設定するときは、1.5行を基本として、数値を少しずつ増減して試してみるのがよいでしょう。
■行間を設定する方法
CSSで行間を設定するにはline-heightプロパティを使います。line-heightプロパティは、正確には「1行の高さ」を決めるもので、値には1文字の高さの倍率を、単位なしで設定します。
▲line-heightプロパティで設定される「行の高さ」
line-heightプロパティも、font-sizeプロパティ同様、継承します。たとえば、ページ全体の行の高さ1.6に統一するには、次のようなCSSを書きます。
html {
line-height: 1.6;
}
▲ページ全体の行の高さを設定する
4. コントラストは十分か
読みやすさに影響する要素としてもう1つ、コントラストがあります。「コントラスト」とは、1番明るい色と、1番暗い色の明るさの違いのことをいいます。
「明るい色」対「暗い色」の比率を「コントラスト比」といい、コントラスト比が高くなると視認性が良くなり、低くなるほうにつれて視認性が悪くなります。
テキストの読みやすさを考えるときは、「文字色 : 背景色」のコントラスト比を十分高くする必要があります。
▲コントラスト比が低い状態（左）と高い状態 （右）
World Wide Web Consortium (W3C)が公開している、ウェブサイトのアクセシビリティを向上するためのガイドライン「WCAGガイドライン」では、最低でも「4.5：1」のコントラスト比があることを推奨しています。（詳しく知りたい方はガイドラインを読んでみて下さい。）
このコントラスト比はテキスト色と背景色の数値から計算で求めるのですが、いちいち計算するのは面倒です。そこで、公開されているツールを使うのが便利です。 いくつかツールがありますが、ここではAdobe社が公開している「コントラストチェッカー」を紹介します。Adobeアカウントを持っていなくても利用できます。
■コントラストチェッカーの使い方
使い方を説明します。ブラウザで次のURLにアクセスし、「カラーコントラストチェッカーアナライザーツール」を開きます。
- カラーコントラストチェッカーアナライザーツール https://color.adobe.com/ja/create/color-contrast-analyzer
▲カラーコントラストチェッカーアナライザーツール
そして……
【1】「アクセシビリティ」メニューが選択されていることを確認します。
【2】「ツール」メニューで、「コントラストチェッカー」を選びます。
▲「アクセシビリティツール」「コントラストチェッカー」を選ぶ
【3】「WCAG 2.1レベル」メニューで、最低限のコントラストを確保したいなら「AA」と、より多くの人が識別できるコントラストにしたいなら「AAA」を選びます。通常のWebサイトであれば「AA」でよいでしょう。
▲「WCAG 2.1 レベル」からAAまたはAAAを選ぶ
【4】「テキストカラー」や「背景色」のスウォッチ（カラーチップ）をクリックしてカラーパレットを開き、色を選びます。下のスライダーで明度を調整することもできます。
もしくは、「#275BBA」などと書かれている色の16進数値を直接入力することもできます。
▲テキスト色、背景色を選ぶ
【5】テキストカラーと背景色を確定すると、「プレビュー」のところに、通常のテキスト、大きなテキスト、グラフィックコンポーネントの3つのプレビューが表示されます。
この3つのプレビューの下を見て、「合格」と表示されていればコントラスト比は基準を満たしています。「不合格」と表示されていれば満たしていません。不合格の場合は色を選び直し、合格するまで調整します。
▲「合格」「不合格」をチェック
上図の色の組み合わせでは、見出しなど大きなテキストは合格していますが、通常のフォントサイズのテキストは不合格で、コントラストが足りていません。
コントラスト比は必ずクリアしなければいけないものではありません。装飾的なテキスト、たとえば写真の上に重なっているキャッチコピーなどはクリアしなくてもよいことになっています。また、デザイン上、クリアできないこともよくあります。
ただ、より多くの人が快適に見られるかどうかを判断する基準にはなります。Webサイトのターゲット読者層に合わせて、コントラストを確保すべきかどうかよく検討しましょう。
さいごに
ページのテキストの読みやすさを左右する視覚的な要因を3つご紹介しました。
この3つの要因は、すべてのページでクリアしなければいけないものではなく、あくまで努力目標です。デザインのかっこよさを優先して、小さいテキストを使いたいときや、コントラストを低くしたいときもあるでしょう。とはいえ、やり過ぎは禁物です。
ある程度の基準が頭に入っていると、「これはちょっとフォントが小さいかな」とか、「コントラストが低すぎるかもしれない」と、デザインを調整すべきかどうかが論理的にわかるようになります。
どうすればテキストを読みやすくできるか、Webデザイナーだけでなく、HTML/CSSエンジニアも少し気にしていると、よりよいページ作りに役立てられるでしょう。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2025年9月時点のものです。
