可読性とは？視認性・判別性・誘目性の違いとフォントの選び方

可読性とは、文章の読みやすさのこと。フォントの形だけでなく、文字サイズや太さ、行間、背景とのコントラストでも変わります。

フォントを選ぶ際には書体の持つ印象だけでなく、文字本来の役割である「伝える」ことを意識して選ぶ必要があります。

文字を選ぶときは、文章の読みやすさ・文字の見分けやすさ・目に止まりやすさの3つに注目してみましょう。

文字の読みやすさに関わる3つの要素

それぞれの意味と、フォントを選ぶときに見るポイントは以下のとおりです。

用語	意味	見るところ
可読性	文章を読み進めやすい	文字サイズ・太さ・行間
判別性	似た文字を見分けやすい	Oと0、Iとlと1などの字形
誘目性	視線を引きつける	本文と見出しの大きさ・太さ・余白の差

ポイントは、「目立つけれど読みにくい」「読めるけれど数字を間違えやすい」を区別すること。読みやすさ・見分けやすさ・目立ちやすさを、具体的な図解とともに比較して見ていきましょう。

フォントの種類が知りたい人は書体の種類と違いを解説の記事を、フォントがあたえる印象についてはフォントが与える印象と選び方をご覧ください。

可読性：文章の読みやすさ

可読性を高めるには、文章を無理なく読み進められる文字の形と組み方を選びます。

一文字だけを拡大して見るのではなく、実際のサイズで数行組んでみると行の追いやすさや文字の詰まり方がわかります。

書籍の本文には明朝体を候補にする

小説や新書など、縦書きの文章をじっくり読む書籍には明朝体がおすすめ。上の図のように、同じ文章を組んで線の強弱や行の流れを比べてみましょう。

ただし、明朝体の細い横線が小さな画面でかすれるなら、文字の太さ（ウェイト）やサイズを少し上げます。横線が太めに設計された明朝体やゴシック体へ変えるのも一つの方法です。

案内・資料・画面表示にはゴシック体が使いやすい

上の図は短文・長文での使い分けを示していますが、読みやすさは文章の長さだけで決まるわけではありません。

プレゼン、アプリ、テロップ、資料など、短い時間で情報をつかみたい場面にはゴシック体が使いやすいです。小さな表示でも線が見え、形をつかみやすい書体を選びましょう。

本文の太さ・文字サイズ・行間を整える

上の図は本文全体を太くした比較です。本文をすべて太字にすると文字の密度が上がり、強調したい部分との差もつけにくくなります。

必要な語句だけを太字にする強調とは分けて考えましょう。

本文は標準的な太さから選び、細い線が消えるなら太く、文字の内側が潰れるなら細くするのが基本。細字にも太字にも、それぞれ読みにくくなる条件があります。

文字そのものが小さくて読みにくいならサイズを上げます。次の行を見失うなら、行間を広げるか一行を短くすると追いやすくなります。

参考：デザイン4原則 対比

背景色と文字色のコントラストが低いと可読性が下がる

明度の高い背景に明度の高い文字色を利用してしまうと文字が読みにくくなってしまいます。

背景と文字の色味を変えるだけでなく、明るさの差を確保すると形をつかみやすくなります。淡い背景なら文字を濃くし、暗い背景なら文字を明るくするのが基本です。

フォントを変える前に、配色、文字サイズ、余白も見直してみましょう。背景に埋もれるなら明暗差を、文字が詰まるなら字間や行間を調整すると、今の書体でも読みやすくできます。

配色については以下の記事をご覧ください。

装飾書体は短い見出しやタイトルに使う

個性的な装飾フォントは、ロゴや短いタイトルで印象をつくるのに向いています。一方、形を大きく崩した書体で本文を組むと、一文字ずつ読み取る負担が増えてしまいます。

長い説明はシンプルな明朝体・ゴシック体で組み、装飾書体は目立たせたい短い言葉に使うと、雰囲気と読みやすさを両立しやすいですよ。

判別性：誤認しにくさ、間違えにくさ

判別性は、似た形の文字を読み間違えずに見分けられるかということ。

文章なら前後の文脈で補えても、IDや型番の英数字は一文字違うだけで別の情報になってしまいます。

フォント名や分類だけで選ばず、実際に使う文字を並べて、形の違いが残るものを選びましょう。

特に注意したい、判別しにくい文字形状

特に気をつけたいのが、上の図のようなIDやパスワードの英数字です。日本語も含め、次のような組み合わせは見間違えやすいですね。

また、漢字は多くの共通字形である「部首」を多用するので判別性が低いと別の字と間違える可能性が上がってきます。

しっかり見ればわかるものでも、いくつかの条件が重なると誤認しやすくなってしまいます。

案内板なら実際に読む距離、書類なら印刷する文字サイズで見比べます。色で区別する場合も、色の見え方の違いに備えて、字形やラベルでも見分けられるようにしましょう。

書体の分類より、実際に使う字形を比べる

たとえば「Oと0」の幅に差があるか、「Iとlと1」に端の飾りや曲がりなどの違いがあるかを見ると、判別しやすさを比べられます。

明朝体だから、装飾書体だから見分けやすいとは限りません。上の比較も個々の字形の例として見て、使用する文字で次の点を比べましょう。

小さな文字は開口部や内側の空間を見る

開口部とは、「c」の右側のように線がつながっていない部分です。ここが狭いと、小さな表示や離れた位置では隙間が見えにくくなり、「o」など別の文字と間違えやすくなります。

小さな注釈や遠くから読む案内では、開口部がはっきり見え、文字の内側にも空間が残る書体を選びましょう。線が太すぎて隙間が埋まるときは、サイズやウェイトも調整します。

適切な文字間で判別しやすく

文字間は開きすぎていても、狭すぎていても読みにくくなってしまいます。

文字同士がくっついて見えるなら少し広げ、一つの単語がばらばらに見えるなら詰めます。字間を整えるカーニングでは、見た目の隙間が揃うように調整しましょう。

誘目性：目に止まりやすさ

誘目性は文字に視線を集める効果を期待したもので案内、注意喚起などで取り入れたい要素です。

本文全体を目立たせる必要はありません。見出しや注意点に強弱をつけると、どこから読めばよいかが伝わりやすくなります。

目立たせるには周囲との差をつくる

上の図の右側は、「受付は2階です」だけを赤くしています。こうすると、最初に読んでほしい言葉がわかりやすくなります。

色のほかにも、次のような差をつけられます。

色に限らず、すべてを同じ大きさ・太さで強調すると、目立たせたい箇所が埋もれます。広告でも、ブランドの雰囲気に合わせながら、最初に読んでほしい言葉を決めましょう。

見出しを本文より太くする

見出しを本文より太くすると、文章の区切りが目に入りやすくなります。上の図では、見出しのウェイトだけを変えたときの印象を比べられます。

流し読みでも見出しを拾えるようにしたいときに便利な方法です。繊細な雰囲気を保ちたいデザインなら、太さを抑え、大きさや余白の差で目立たせる方法も使えます。

案内板は線の見えやすい書体を選ぶ

案内板では、目に止まったあとに文字の形を読み取れることも大切です。細い線がかすれにくいゴシック体やサンセリフ体は、離れた場所から読む文字の候補になります。

ゴシック体の太字を起点に、読む距離に合う大きさへ調整しましょう。文字の内側が潰れるほど太くするより、サイズを大きくして形を残すほうが読み取りやすくなります。

また、目線を集めるためには文字の太さだけでなく周囲の余白も重要になります。

視線を集めるためのコツ

見出しと本文の文字サイズの比率を「ジャンプ率」と呼びます。

上の図の右側は、見出しを本文の2倍の大きさにしたもの。見出しが目に入り、文章の区切りを見つけやすくなります。

強調色は見出しや注意点などに絞り、周囲に余白をとります。そのうえで、見出し、図、説明の順に目が動くよう配置すると、目立たせる工夫を読む順番につなげられます。

視線誘導については以下の記事にまとめてあるのでご覧ください。

用途に合わせて読みやすいフォントを選ぶ

フォントを選ぶときは、どこで、何を読んでもらうかから決めると迷いにくくなります。用途ごとに、最初の候補と見るところを押さえましょう。

用途	最初の候補	優先すること
小説・書籍の縦書き本文	本文用の明朝体	行を追いやすく、細線が消えない
Web・アプリ・資料の本文	標準的な太さのゴシック体	小さな画面でも形と行間がわかる
見出し・案内・注意書き	本文より太い書体や大きな文字	周囲との差と、読む距離に合うサイズ
ID・型番・数字の多い書類	似た文字の形を区別した書体	Oと0、Iとlと1を読み間違えにくい

小説のように文章へ集中してもらいたい紙面では、本文用の明朝体が使いやすいですね。写真や図が多い誌面なら、ゴシック体も候補にして、見出しと本文を見分けやすく組みましょう。

読みやすさに配慮したUDフォントを使う

UDフォントは、ユニバーサルデザインの考え方を取り入れ、文字の見分けやすさや文章の読みやすさに配慮して設計された書体です。

公共の案内や通知書など、多くの人に情報を伝える場面で候補にできます。UDフォントでも文字サイズや配色は読みやすさに関わるので、実際に使う大きさで、英数字や記号の形を見て選びましょう。

無料で使えるBIZ UDフォント

モリサワのBIZ UDフォントは、Google Fontsから無料で入手できます。

ゴシック体・明朝体の両方があるので、案内や資料にはゴシック体、落ち着いた本文には明朝体という使い分けもできます。入手先と書体の特徴は、下の記事で紹介しています。

Adobe Fontsで書体を選ぶ

Adobe FontsでもUDフォントを選べます。すでにPhotoshopやIllustratorを使っている人は、契約に含まれるフォントから探すと便利です。

Adobe Fontsは、PhotoshopやIllustratorなどの有料デスクトップアプリプランに含まれ、追加料金なしで利用できます。

モバイル専用・Web専用の有料プランでもフォントの完全ライブラリにアクセスできますが、利用範囲は契約対象のCreative Cloudアプリ内に限られます。PCへフォントを追加して使う条件とは異なります。

フォントとあわせてPhotoshopやIllustratorなども使いたい人は、Adobe CCを安く買う方法も参考にしてください。