視認性・可読性・判読性の違いとは?文字の伝わりやすさを3つの視点で解説

視認性・可読性・判読性の違いの基本

まずは3つの言葉がそれぞれ何を表しているのかと、その関係を整理しましょう。

3つの言葉は「見える・読める・正しく分かる」

視認性・可読性・判読性は、文字が「見える」か、「読める」か、「正しく分かる」かという、文字の伝わりやすさを3つの視点に分けたものです。

3つを分けて考えると、「読みにくい」と感じたときに、どこに原因があるのかを具体的に探せるようになります。

言葉	確かめること	主に関係する要素	特に大切な場面
視認性	パッと見たときに、文字が目に入り、見えるか	文字サイズ、太さ、背景との明るさの差	看板、バナー、ボタン、見出し
可読性	文章として、疲れずにすらすら読み続けられるか	書体、行間、行の長さ、字間	記事の本文、説明文
判読性	1文字ずつを、読み間違えずに正しく見分けられるか	文字の形(字形)、似た文字の区別、区切り方	数字、記号、型番、パスワード

英語では、視認性はvisibility、可読性はreadability、判読性はlegibilityにおおむね対応します。

ただし、これらの言葉の定義や訳し方は資料によって少しずつ違うため、厳密な用語として覚えるより、「見える・読める・正しく分かる」の3つの視点として使うのがおすすめです。

たとえばフォントメーカーのモリサワも、UDフォント(年齢や環境を問わず多くの人が読みやすいよう配慮したユニバーサルデザインのフォント)のコンセプトとして、「文字のかたちがわかりやすい」「文章が読みやすい」「読み間違えにくい」の3つを挙げています(モリサワ:UD書体)。

3つの違いは、うまくいかなかったときの例とセットで覚えると混同しにくくなります。

• 視認性が低い:文字が背景に溶け込んでいて、そもそも文字があることに気づかない
• 可読性が低い:読めるけれど文字が詰まっていて目が疲れ、途中で読むのをやめてしまう
• 判読性が低い:パスワードの「O(オー)」と「0(ゼロ)」を取り違えて、ログインに失敗する

視認性:パッと見て文字が目に入るか

視認性とは、文字がどれだけ「見えやすいか」、つまり一瞬見ただけで目に入るかどうかを表します。

看板やバナー、ボタンのように、じっくり読まれずに一瞬で判断される文字ほど、視認性が重要になります。

左の見本は、文字が小さく細いうえに薄いグレーなので、目を凝らさないと何が書いてあるか分かりません。

右の見本は、文字サイズ・太さ・背景との明るさの差をしっかり確保しているので、一瞬で目に入ります。

背景と文字の明るさの差は、コントラスト比という数値で確かめられます。

可読性:文章として楽に読み続けられるか

可読性とは、文章をどれだけ「読みやすいか」、つまり疲れずにすらすら読み続けられるかを表します。

1文字ずつは見えていても、行が詰まっていたり、文章全体が太字だったりすると、長く読むうちに目が疲れてしまうからです。

左の見本は、すべてが太く詰まっているため、文章を目で追うのに力が要ります。

右の見本は、標準の太さと広めの行間で読み進めやすく、太字の部分だけがきちんと強調として伝わります。

可読性を高める本文全体の整え方は読みやすい本文の記事で、行間や行の長さの決め方は行間と行長の記事で詳しく解説しています。

判読性:読み間違えずに正しく分かるか

判読性とは、1文字ずつを読み間違えずに、正しく見分けられるかどうかを表します。

文字がはっきり見えて、文章もすらすら読めても、似た形の文字を取り違えてしまえば、間違った情報が伝わってしまうからです。

欧文では「I(大文字のアイ)・l(小文字のエル)・1(数字のいち)」や「O(大文字のオー)・0(数字のゼロ)」、日本語では「シ」と「ツ」、「ソ」と「ン」などがよく取り違えられる例です。

左上の見本は、一般的なサンセリフ体(文字の端に「セリフ」と呼ばれる小さな飾りがない欧文書体で、日本語のゴシック体にあたるもの)です。
書体の種類はフォントと書体の記事で解説しています。

サンセリフ体は線がシンプルな分、多くの環境で「I」と「l」がほとんど同じ縦棒に見え、「O」と「0」の区別もつきにくくなります。

右上の見本はプログラミングなどで使われる等幅フォント(すべての文字が同じ幅のフォント)で、「0」に斜線や点を入れたり、「I」の上下に横棒をつけたりと、似た文字の形の違いが大きく作られているものが多いため、見分けやすくなります(表示される書体はお使いの環境によって変わります)。

下段の電話番号のように、書体を変えなくても、桁をハイフンで区切るだけで読み間違いや読み飛ばしを減らせます。

書体を選び直さなくてもできる工夫には、ほかに次のようなものがあります。

• 金額は3桁ごとにカンマを入れ、単位を添える(10000→10,000円)
• 会員番号やクーポンコードなどの長い番号は、数桁ごとにハイフンやスペースで区切る
• IDなど1文字も間違えられない部分だけ、等幅フォントで表示する(CSSならfont-family: monospace;)

視認性・可読性・判読性の使い分け

3つの視点は、どれか1つだけを高めればよいわけではなく、文字の役割によってどれを優先するかが変わります。

文字の役割ごとに優先する視点を決める

デザインする文字が「一瞬で見せる文字」なのか、「じっくり読ませる文字」なのか、「正確に伝える文字」なのかを最初に考えましょう。

役割によって、効いてくる要素が違うからです。

文字の役割	例	優先する視点	工夫の例
一瞬で見せる	バナーのキャッチコピー、ボタン、案内表示	視認性	大きく太く、背景との明るさの差を大きくする
じっくり読ませる	記事の本文、商品の説明文	可読性	癖の少ない書体、ゆとりのある行間、長すぎない行
正確に伝える	電話番号、料金、日付、型番、パスワード	判読性	似た文字を見分けやすい書体、桁の区切り、装飾を控える

たとえばバナーなら、キャッチコピーは視認性、下に添える説明文は可読性、キャンペーンの期限や価格は判読性を意識すると、1枚の中でも文字ごとに適切な調整ができます。

「見える→読める→正しく分かる」の順に確認する

デザインを見直すときは、「見える→読める→正しく分かる」の順番でチェックすると、抜け漏れを防げます。

そもそも文字が見えなければ読めず、読めなければ正しく理解することもできないからです。

1. 視認性:スマートフォンを少し離して持ったときでも、大事な文字が目に入るか
2. 可読性:本文を数段落読んでも、途中で行を見失ったり目が疲れたりしないか
3. 判読性:数字・記号・英字を、ほかの人が読み上げても正しく読めるか

特に判読性は自分では気づきにくいので、電話番号や価格などは第三者に読み上げてもらうと確実です。

実践のポイント

3つの視点を意識するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目のおしゃれさを優先して個性的な書体を選び、数字や記号が読み間違えられやすくなっていることに気づかないことがあります。
  手書き風などの装飾的な書体を使うときは、特に数字が正しく読めるかを確認しましょう。
• 視認性と可読性は気にしていても、判読性(読み間違いの起こりやすさ)をチェックする項目を持っていないことがあります。
  料金・日付・番号などの「間違えると困る文字」には、判読性の確認を必ず入れましょう。
• 目立たせようとして本文まで太く大きくすると、視認性は上がっても可読性が下がってしまいます。
  太く大きな文字は一瞬で目に入る反面、長く続くと圧迫感があり、線が太い分だけ文字の中のすきまがつぶれて、画数の多い漢字ほど見分けにくくなるためです。
  大きな声で長い話を聞かされると疲れてしまうのと同じで、すべてを強調するとどこが大事なのかも伝わりません。
  目立たせる文字と読ませる文字を分けて考えましょう。

よくある質問

• Q. 「読みやすい」と言いたいときは、どの言葉を使えばいい?
  A. 文章をすらすら読めることを言いたいなら「可読性」、遠くからでも目に入ることなら「視認性」、読み間違えにくいことなら「判読性」が合います。
  迷ったときは、言葉を選ぶより「何が見えにくいのか、何が読みにくいのか」を具体的に説明するほうが、相手に正確に伝わります。
• Q. 3つすべてを高くするにはどうすればいい?
  A. 十分な文字サイズと背景との明るさの差、ゆとりのある行間、癖の少ない書体を選ぶことが共通の土台になります。
  そのうえで、文字の役割に合わせて優先する視点を決めましょう。
  文字のサイズ・太さ・間隔・配置といった基本はタイポグラフィとはで、書体の太さの使い分けはウェイトの使い方で解説しています。
• Q. UDフォントを使えば問題は解決する?
  A. UDフォントは読み間違えにくさなどに配慮して作られているので、判読性を高めるのに役立ちます。
  ただし、文字サイズが小さすぎたり、背景との差が足りなかったりすれば読みにくくなるため、サイズや配色の確認は別に必要です。

まとめ

視認性は「見えるか」、可読性は「読み続けられるか」、判読性は「読み間違えずに正しく分かるか」を表す、文字の伝わりやすさの3つの視点です。

見せる文字は視認性、読ませる文字は可読性、正確に伝える文字は判読性と、文字の役割ごとに優先する視点を決めると、デザインの判断がぶれにくくなります。

まずは自分のデザインから電話番号や価格などの「間違えると困る文字」を1つ選び、似た文字と取り違えずに読めるかを確かめてみてください。