本文へ移動

視認性・可読性・判読性の違いと、文字を直す優先順位

第4章 文字とタイポグラフィ 読了目安 6分

INDEX目次

    「なんか読みにくい」とフィードバックをもらったとき、どこを直せばいいか分からなくて手が止まる。文字まわりでいちばん多い悩みです。

    読みにくさは、実は3種類に分けられます。視認性・可読性・判読性の3つです。分けて考えると「今つまずいているのはどれか」がはっきりして、直す場所が1つに決まります。

    このレッスンでは、3つの違い、それぞれの上げ方、媒体ごとの優先順位を説明します。最後に、街の掲示物を3つの指標で採点する練習をつけました。これができると、他人の作品からも学べるようになりますよ。

    もくじ

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

    まず一言で押さえます。

    指標問う内容読み手の状態
    視認性目に入るか、見つけられるかまだ読んでいない
    可読性すらすら読み続けられるか読んでいる最中
    判読性読み違えずに区別できるか1文字ずつ確かめている

    順番があります。視認性 → 可読性 → 判読性。目に入らない文字は読まれません。読み続けられない文章は最後まで届きません。そして最後に、電話番号や日付を読み違えないかを確かめます。

    だから直す順番も同じです。「読みにくい」と言われたら、まず視認性から見てください。いきなり書体を替えても、たいてい解決しません◎

    視認性・可読性・判読性の違いを並べた分類図。目に入るか、読み続けられるか、読み違えないかの順に確認することを示す

    視認性を上げる:目に入るかどうか

    視認性は、遠くから、一瞬で、その文字を見つけられるかどうかです。看板、バナー、駅の案内表示で最優先になります。

    視認性を上げる5項目
    • 背景との明るさの差をつける:色の違いではなく明るさの差。白背景に黄色の文字は、色は違っても明るさが近いので見えません
    • 写真の上に直接置かない:置くなら写真を暗くするか、文字の下に帯を敷きます
    • まわりに余白を取る:文字を大きくするより、まわりを空けるほうが効くことがあります
    • 要素を減らす:目立たせたいものが3つあると、どれも目立ちません
    • 太いウェイト(同じ書体の太い版)を使う:細い文字は遠くで線が消えます

    確認方法は簡単です。画面から3歩下がって見る。目を細めて見る。スマホなら手を伸ばして見る。それで最初に目に入った文字が、いま視認性の一番高い場所です。そこが主役と一致していれば成功です。

    視認性のBefore/After。白背景に黄色の文字は明るさが近くて見えず、文字を濃くすると明るさの差がついて目に入ることを示した図

    可読性を上げる:読み続けられるかどうか

    可読性は、長い文章を疲れずに最後まで読めるかどうかです。記事、資料、説明文で最優先になります。

    可読性を上げる6項目
    • 行間:本文は文字サイズの1.7〜1.9倍。狭いと次の行に目線が移れません
    • 1行の長さ:日本語は30〜40文字が目安。長いと行の頭に戻れなくなります
    • 書体:クセの少ないもの。画面ならゴシック体、紙の長文なら明朝体
    • 揃え方:本文は左揃え。中央揃えは行の頭がずれて読みにくくなります
    • 文字サイズ:本文は16px以上。スマホでも同じ
    • 段落を分ける:3〜4行で改行を入れる。かたまりが大きいほど読む気が減ります

    可読性でいちばん効くのは行間です。書体を替えるより、行間を1.5倍から1.8倍にするほうが変化が大きい。まずそこを触ってください💡

    コントラストを上げすぎるのも読み疲れの原因になります。真っ白の背景に真っ黒の文字は、長文だと目が疲れます。本文の文字色を少し薄いグレー(#333あたり)にすると読み続けやすくなります。ただし薄くしすぎると視認性が落ちるので、#666より薄くはしないでください。

    身近な実例で確かめられます。よく使うアプリの本文を拡大して見ると、文字色は真っ黒ではなく濃いグレーのことが多いです。長く読ませる画面ほど、明るさの差を少しだけ落としてあります。

    判読性を上げる:読み違えないかどうか

    判読性は、1文字ずつ正確に区別できるかどうかです。日付、電話番号、価格、住所、氏名など、間違えたら困る情報で最優先になります。

    判読性のチェック項目
    • 紛らわしい文字を確認する:数字の1と小文字のl、0と大文字のO、6と8、ソとン、シとツ
    • 装飾を減らす:影、縁取り、斜体、極端に細い線は、形をあいまいにします
    • 詰めすぎない:文字が接すると別の字に見えます
    • 数字は素直な書体で:デコラティブ書体の数字は、値段の読み違えにつながります
    • 全角と半角を揃える:混ざると桁の区切りが読みにくくなります

    判読性の確認は、声に出して読むのが確実です。電話番号を1桁ずつ、日付を「2026年8月13日」と読み上げる。詰まったところが、読み手も詰まる場所です。

    手元にある実例では、宅配便の伝票や役所の書類が分かりやすいです。数字は装飾のない書体で、影も縁取りもありません。読み違えが事故になる場所ほど、飾りを削ってあります。

    どれを優先するかは、媒体で決まる

    3つを同時に最大にはできません。文字を大きく太くすれば視認性は上がりますが、入る文字数が減って説明が削られます。優先順位は作るものごとに変えてください。

    作るもの1番目2番目
    バナー広告・看板視認性判読性
    ブログ記事・説明文可読性視認性
    チラシの申込欄・料金表判読性可読性
    プレゼン資料視認性可読性
    電車内の広告視認性可読性

    作りはじめる前に「この作品でいちばん大事なのはどれか」を1つ決めておくと、途中で迷いません。バナーなら視認性、記事なら可読性。決めた指標を落とす変更は却下する、と考えると判断が速くなります。

    「読みにくい」を直すときの見る順番

    指摘をもらったら、上から順に確認してください。

    上から順に見る7項目
    1. 3歩下がって見たとき、主役の文字が最初に目に入るか(視認性)
    2. 背景と文字の明るさの差が十分あるか(視認性)
    3. 本文の行間が1.7倍以上あるか(可読性)
    4. 1行が40文字を超えていないか(可読性)
    5. 本文が左揃えになっているか(可読性)
    6. 数字と英字を声に出して読めるか(判読性)
    7. 影や縁取りで形があいまいになっていないか(判読性)

    この7つで、読みにくさの原因はほぼ見つかります。上から順に見るのが大事です。下から直すと、原因ではない場所を触り続けることになります。

    ミニ実践:掲示物を3指標で採点する

    外に出たときにできる練習です。道具は要りません。5分で終わります。

    1. 電車内の広告、駅の案内、店の貼り紙のどれかを3つ選ぶ
    2. それぞれを視認性・可読性・判読性の3つで5点満点で採点する
    3. 点数の低かった指標について「なぜ低いか」を1文で書く(例:背景の写真と文字の明るさが近い)
    4. 「自分ならどこを直すか」を1つだけ決める
    5. 3つを比べて、いちばん点数の高かったものが何をしているか書き出す

    3番と4番を飛ばさないでください。「見にくい」で止めず、どの指標が落ちているかまで言葉にする。これができると、自分の作品でも同じ判断ができるようになります。

    電車内の広告は特にいい教材です。数メートル離れた場所から、揺れる車内で、数秒だけ見られる。視認性を最優先で設計した実例が並んでいます。

    よくある質問

    視認性と可読性の違いは何ですか?

    視認性は「目に入るか、見つけられるか」、可読性は「すらすら読み続けられるか」です。読み手の状態が違います。視認性はまだ読んでいない人、可読性は読んでいる最中の人が相手です。看板は視認性、記事は可読性を優先します。

    判読性はどんなときに気にすればいいですか?

    間違えたら困る情報を載せるときです。日付、時間、電話番号、価格、住所、氏名。ここでは装飾を減らして、数字の形が素直な書体を選んでください。確認は声に出して読むのが確実です。1桁ずつ読んで詰まったら、読み手も詰まります。

    3つとも高くすることはできますか?

    同時に最大にはできません。文字を大きく太くすると視認性は上がりますが、入る文字数が減って説明を削ることになります。装飾を足すと目立ちますが判読性が落ちます。作るものごとに1番目と2番目を決めて、3番目は許容できる線まで下げる、と考えてください。

    「読みにくい」と言われました。何から直しますか?

    視認性からです。3歩下がって、主役の文字が最初に目に入るか見てください。次に本文の行間を1.7倍以上に、1行を40文字以内にします。書体を替えるのは最後で構いません。原因は書体より、明るさの差と行間にあることが多いです。

    次に学ぶこと

    整理します。視認性は見つけられるか、可読性は読み続けられるか、判読性は読み違えないか。直す順番も見る順番も、視認性 → 可読性 → 判読性。作るものごとに、優先する指標を1つ決めておく。ここまでが文字とタイポグラフィの章です。

    次の章は装飾です。文字が読める状態になったら、そこに雰囲気を足していきます。あしらいの引き出しで、飾りの種類と使いどころを増やしてください。

    文字の間隔がまだ気になる方は、文字詰めの基本に戻ると、視認性の話とつながります。学ぶ順番はデザインの基本コースで確認できます。

    第4章 文字とタイポグラフィ の他のレッスン

    前後のレッスン

    ← コースの目次へ戻る

    目次

      \ スクールが気になったら、まずはLINEで /

      公式LINE登録で、3大特典をプレゼント

      無料相談(Zoom・30分)の予約もLINEから。勧誘なし・ブロックはいつでもOKです。

      FOR BUSINESS

      法人向け「AI×デザイン」研修

      生成AIを取り入れた制作ワークフローを、半日〜2日のカスタム研修でチームに導入。デザイナー以外の職種の方にも対応します。

      研修について相談する

      オンライン・対面どちらも可 / お見積り無料

      LINE登録で3大特典
      LINE登録で3大特典スクール詳細
      PR バナー
      公式LINEで無料相談 + ロードマップPDFプレゼント中 LINE友だち追加