可読性とは?読みやすいデザインを文字・色・レイアウトの3つの目線で解説

可読性の基本

まずは可読性という言葉の意味と、似た言葉との違い、そして可読性がどのように決まるのかを押さえましょう。

可読性とは何か

可読性とは、文章をどれだけ楽に、疲れずに読み続けられるかの度合いのことです。

「読める」かどうかではなく、「無理なく読み進められる」かどうかを表す言葉だと考えると分かりやすくなります。

可読性が低いと、読者は内容を理解する前に目や頭が疲れてしまい、記事や説明文を最後まで読んでもらえなくなります。

反対に可読性が高いデザインは、読者が「読みやすい」と意識することすらなく、内容だけに集中できる状態を作ります。

視認性・判読性との違い

可読性とよく一緒に使われる言葉に、視認性と判読性があります。

3つとも「文字の伝わりやすさ」に関わる言葉ですが、見ているポイントが違います。

言葉	何を表すか	特に大切な場面
視認性	ぱっと見て、すぐに目に入るか	看板、見出し、ボタン
判読性	1文字ずつ、読み間違えずに見分けられるか	数字、記号、パスワード、型番
可読性	文章を楽に読み続けられるか	記事の本文、説明文

身近な例で言うと、遠くからでも「SALE」の文字がぱっと目に飛び込んでくるのが視認性、パスワードの「1(数字のイチ)」「l(小文字のエル)」「I(大文字のアイ)」を見間違えないのが判読性、ブログや本の本文を疲れずにすらすら読めるのが可読性です。

ただし、これらの言葉の使い方は本や分野によって少しずつ違い、まとめて「読みやすさ」と呼ばれることもあります。

この記事では、主に長い文章の読みやすさという意味で可読性を扱います。

3つの言葉の違いと使い分けは、視認性・可読性・判読性の違いの記事で詳しく解説しています。

可読性は「文字・色・レイアウト」の組み合わせで決まる

可読性は、1つの要素だけで決まるものではありません。

文字の大きさや行間、文字と背景の色、余白や揃え方といった複数の要素が組み合わさって、読みやすさが決まります。

下の2つの見本は、まったく同じ文章を、デザインだけ変えて並べたものです。

同じ文章でも、文字・色・レイアウトの扱い方で読みやすさが大きく変わる

左の見本(NG)は、文字が小さく色が薄いうえに、行間が詰まっていて中央揃えなので、どこから次の行を読めばいいのか目が迷います。

右の見本(OK)は、文字を大きく濃くし、行間と段落の区切りにゆとりを持たせて左揃えにしたことで、すっと読み進められます。

どれか1つの要素だけが悪くても、全体の読みやすさは下がってしまうので、3つの目線を順番に確かめることが大切です。

可読性を左右する3つの目線

ここでは、可読性を左右する要素を「文字」「色」「レイアウト」の3つの目線に分けて、要点と小さな見本で紹介します。

気になった目線は、それぞれの詳しい記事で確認してください。

文字の目線:書体・サイズ・行間・行長

1つめは、文字そのものの扱い方から読みやすさを考える目線です。

本文の読みやすさに特に関わるのは、次の4つです。

• 書体:
  文字のデザインの種類のことです。
  本文には、装飾の少ない、クセの弱い書体を選ぶのが基本です。
• サイズ:
  Webの本文は、多くのブラウザーで標準の文字サイズになっている16pxを出発点にすると、小さすぎる失敗を防げます。
• 行間:
  行と行の間の空きのことです。
  詰まりすぎると次の行を見失いやすく、空きすぎると文章のまとまりが崩れます。
• 行長:
  1行の長さのことです。
  長すぎると、行の終わりから次の行の頭へ目を戻すのが大変になり、どの行を読んでいたのか迷子になりやすくなります。
  そのため、本文の幅には上限を設けます。

たとえば行間だけを変えても、読みやすさははっきり変わります。

文字の大きさと色は同じまま、行間だけを変えた見本

左の見本は行と行がくっついて窮屈に見え、右の見本は1行ずつが区切られて、目で追いやすくなっています。

Webアクセシビリティの国際的なガイドラインであるWCAGでも、最高レベル(AAA)の達成基準1.4.8で、1行の幅は全角40字以内、行送り(行の高さ)は1.5文字分以上といった目安が挙げられています(WCAG 2.2 達成基準 1.4.8 視覚的提示、WAICによる日本語訳)。

ここから先のコードは、実際にWebサイトを組み立てる(コーディングする)人向けの内容です。デザインを学び始めたばかりなら、「文字サイズ・行間・1行の幅は、数値で指定できる」とだけ知っておけば十分です。

CSSでは、本文の段落に文字サイズと行間を指定し、本文を入れる箱の幅を制限して行長を整えます。

.article-body {
  max-width: 40em;  /* 1行がおよそ全角40字以内に収まる幅 */
}

.article-body p {
  font-size: 16px;
  line-height: 1.9; /* 文字サイズの1.9倍の行の高さ */
}

emはその要素の文字サイズを1とする単位で、全角文字はおよそ1文字が1emの幅なので、40emでおよそ全角40字分の幅になります。

書体の種類はフォントと書体の種類の知識、行間と行長の決め方は行間と行長の黄金ルール、文字の太さはフォントの太さ(ウェイト)の記事で詳しく解説しています。

長い本文を最後まで読ませるための文字サイズ・行間・行長の目安は、読みやすい本文の記事でも紹介しています。

色の目線:文字と背景の明るさの差

2つめは、文字の色と背景の色の組み合わせから読みやすさを考える目線です。

色の目線で一番大切なのは、文字と背景の明るさの差(明度差)をしっかり取ることです。

文字の輪郭がはっきり見えるかどうかには、色みの違いよりも明るさの違いが大きく効くので、明るさの差が小さいと、色みが違っていても文字がぼやけて見えるからです。

背景は同じ白で、文字色の明るさだけを変えた見本

左の見本(NG)は文字と背景の明るさの差が小さく、右の見本(OK)は差が大きいため、はっきり読めます。

この明るさの差は「コントラスト比」という数値で確かめられ、WCAGでは本文の文字で4.5:1以上、大きな文字で3:1以上を最低限の基準にしています(WCAG 2.2 達成基準 1.4.3 コントラスト(最低限)、WAICによる日本語訳)。

色の目線では、明るさの差のほかに、鮮やかな色同士がぶつかってチカチカする現象や、柄や写真の上に文字を置くときの工夫も読みやすさに関わります。

色で読みやすさが決まる仕組みは、配色と可読性とは?で詳しく解説しています。

コントラスト比の基準はコントラスト比とは?、背景色と文字色の決め方は背景色と文字色の組み合わせとは?、写真の上の文字は写真と文字色の組み合わせとは?で解説しています。

レイアウトの目線:余白・揃え方・まとまり

3つめは、文章をページの上にどう並べるかから読みやすさを考える目線です。

文字や色が整っていても、文章のかたまりの区切りや揃え方が乱れていると、どこから読めばいいのか迷ってしまうからです。

• 余白:
  段落と段落の間、見出しの上下に空きを取ると、話のまとまりがひと目で分かります。
• 揃え方:
  横書きの長い文章は左揃えが基本です。
  中央揃えは行の頭の位置が毎行ずれるので、短い見出しやキャッチコピー向きです。
  横書きの文章を読むとき、目は行の終わりから次の行の頭へ戻るたびに、左端という決まった位置を目印にしています。中央揃えだと行の頭が毎行変わるため、次の行の始まりを毎回探し直すことになり、長い文章では疲れやすくなります。
• まとまり(情報の階層):
  「情報の階層」とは、「タイトル(大)>見出し(中)>本文(小)」のように、情報の重要度に合わせて文字の大きさや太さに強弱をつけることです。
  見出し・本文・補足の大きさや太さに差をつけると、読者は全体の構造をつかんでから読み始められます。

同じ文章を、余白と揃え方、見出しとの差だけ変えて並べた見本

左の見本(NG)は見出しと本文がひとかたまりに見え、行の頭もそろっていないので、読み始めの位置が定まりません。

右の見本(OK)は、見出しが目立ち、話題ごとに段落が分かれて左にそろっているので、内容のまとまりがすぐに分かります。

見出し・本文・補足の差のつけ方は情報の階層を作るタイポグラフィ術、読む順番を導く配置は視線誘導とは?、余白の学び方は余白学習ロードマップで紹介しています。

左揃え・中央揃えなどの使い分けは、文字の揃え方を詳しく解説する別の記事で紹介します。

可読性の高いデザインにするための確認手順

3つの目線が分かったら、自分のデザインの可読性を実際に確かめてみましょう。

3つの目線で順番にチェックする

読みにくさの原因は、文字・色・レイアウトの順に確かめると見つけやすくなります。

1. 文字:本文が16px前後あるか、行間が詰まりすぎていないか、1行が長すぎないかを見ます。
2. 色:本文・リンク・ボタンの文字と背景のコントラスト比を、WebAIM Contrast Checkerなどのツールで測ります。
3. レイアウト:段落の区切りに余白があるか、長い文章が左揃えになっているか、見出しと本文の差がはっきりしているかを見ます。
4. 実際に読む:パソコンとスマートフォンの両方で、本文を数段落、声に出さずに読んでみて、途中で目が迷う箇所がないかを確かめます。
   指やマウスのカーソルで文字を追わずに、目だけでなめらかに読み進められるかがポイントです。

コントラスト比の問題は、Googleの無料ツールLighthouseでもまとめて見つけられます(使い方はGoogle Lighthouseとは?で解説しています)。

学ぶ順番に迷ったら

文字と色は、それぞれ学ぶ範囲が広いので、学習ロードマップに沿って進めると迷いにくくなります。

文字についてはタイポグラフィ学習ロードマップ、色についてはカラー学習ロードマップで、学ぶ順番をまとめています。

どれから読めばいいか迷ったら、まずはタイポグラフィ学習ロードマップを開き、その順番に沿って進めるのがおすすめです。可読性を左右する要素の多くは、書体・サイズ・行間・行長といった文字の扱い方に関わるからです。

実践のポイント

可読性を意識してデザインするときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目のおしゃれさを優先して、本文を薄いグレーや小さな文字にしてしまうことがあります。
  本文は「読ませる」ための文字なので、雰囲気づくりは見出しや写真に任せ、本文は濃く、十分な大きさにしましょう。
• 文字サイズだけを大きくして、行間や1行の長さを見直さないことがあります。
  文字・色・レイアウトはつながっているので、1つを変えたらほかの要素とのバランスも確かめましょう。
• パソコンの画面だけで確認し、スマートフォンでは1行が短すぎたり文字が小さすぎたりすることに気づかないことがあります。
  たとえば幅の狭い画面で文字を大きくしすぎたり、左右の余白を広く取りすぎたりすると、1行に入る文字数が少なくなり、目が左右に細かく行き来するうえ、言葉の途中で改行されることが増えて、文章が細切れに感じられます。
  必ず実際の端末でも読んで確かめましょう。

よくある質問

• Q. 可読性と「読みやすさ」は同じ意味?
  A. ほぼ同じ意味で使われます。
  デザインの分野では、文字がぱっと目に入るか(視認性)、読み間違えないか(判読性)と区別して、文章を楽に読み続けられるかを指して可読性と呼ぶことが多いです。
• Q. 可読性の高いフォントを選べば、それで十分?
  A. 十分ではありません。
  読みやすい書体を選んでも、文字が小さすぎたり、背景との明るさの差が足りなかったり、行間が詰まっていたりすれば読みにくくなります。
  書体選びは、3つの目線のうち「文字」の一部と考えましょう。
• Q. 可読性とアクセシビリティは関係がある?
  A. 深く関係しています。
  アクセシビリティとは、障害の有無や年齢、利用環境にかかわらず誰もが情報を利用できることで、文字の大きさやコントラストの確保は、その基本的な取り組みの1つです。
  可読性を高めることは、多くの人にとって読みやすいデザインにつながります。
  アクセシビリティの全体像はアクセシビリティとは?で解説しています。

まとめ

可読性とは、文章をどれだけ楽に、疲れずに読み続けられるかの度合いで、ぱっと目に入るかを表す視認性や、読み間違えないかを表す判読性とは見ているポイントが違います。

可読性は、文字(書体・サイズ・行間・行長)、色(文字と背景の明るさの差)、レイアウト(余白・揃え方・まとまり)の3つの目線の組み合わせで決まり、どれか1つが欠けても読みにくくなります。

まずは自分のサイトやブログの記事を1つ開き、本文の文字サイズと行間、文字色と背景のコントラスト比、段落の区切りの3点を確かめてみましょう。