公開 更新

guide · 文字・フォント

文字が読みにくいのはなぜ|原因を3群で切り分ける

文字の読みにくさを、背景との見分け、文字サイズと書体、行間・行長・段落の3群へ分けます。症状から点検順を選び、1項目ずつ比較して、見た目と文章の両方から原因を切り分ける方法を解説します。

文字・フォントを学ぶ余白灯舎の場面

まずは同じ文章で、行間だけが違う見本を比べてみましょう。自分の作品は用意しなくて大丈夫です。

見本を比べる / 条件と見方を先に読む

同じ文章で、行間だけを比べる

比較用の架空の案内文です。次の行へ目を移すときの感覚を比べてください。

見本A

駅前の小さな工房で、週末にノートづくりの会を開きます。好きな紙を選び、表紙と中のページを組み合わせて、一冊に仕上げます。道具は会場で用意します。初めての方も、自分のペースで作業できます。完成したノートは、その日のうちに持ち帰れます。

見本B

駅前の小さな工房で、週末にノートづくりの会を開きます。好きな紙を選び、表紙と中のページを組み合わせて、一冊に仕上げます。道具は会場で用意します。初めての方も、自分のペースで作業できます。完成したノートは、その日のうちに持ち帰れます。

変えた条件と、この見本の見方

変えたのは行間だけです。見本Aは文字サイズの1.35倍、見本Bは1.75倍の行高にしています。文章・書体・文字サイズ・太さ・字間・表示幅・色は同じです。この数値は比較の条件であり、いつでも使える正解ではありません。

次の行へ視線を移すときに迷わないか、行同士が詰まって見えないかを比べてください。Bでは行の間が広がりますが、広ければ読みやすい、とは限りません。違いを感じにくいときは、下の3群から別の原因を探せます。

ミナ案内が「読みにくい」と言われたんです。でも、何を直せばいいか分からなくて。
アキラフォントを変えれば直る、と一か所に原因を決めたくなっていない?

読みにくさが起きる原因を3群に分ける

「読みにくい」には複数の原因があります。全体を同時に変えるのではなく、①文字と背景の見分けやすさ、②文字サイズと書体、③行間・行長・段落の組み方、の3群に分けます。

たとえるなら、曇りガラス越しの景色です。何があるか分かっても、細部を追うには余計な力が要ります。文字にも「読めるけれど負担がある」状態があります。ただし、この例が表すのは負担の違いだけです。原因は視力、端末、周囲の明るさ、文章自体にもあるため、利用者と実機で確認します。

症状を聞くときは「読みにくいですか」だけで終えず、どこで何が起きたかを尋ねます。文字を見分けにくいのか、次の行を見失うのか、意味を理解しにくいのかで修正先が変わります。

読者のつまずき 先に見る群 最初の確認
文字が背景へ消える 背景との見分け コントラスト比を測る
似た文字を読み違える サイズと書体 実寸、太さ、字形を比べる
次の行を見失う 行と段落 行長、行間、段落を比べる
読めるが意味が入らない 文章と情報構造 結論、用語、1文の長さを見る

1つ目は、背景と文字を見分けられるか

最初にコントラスト比を測ります。WCAG 2.2のコントラストの基準では、通常の文字は原則4.5対1以上、大きな文字は3対1以上です。薄いグレーの本文や、写真上の文字は特に確認します。

見た目だけで「読めそう」と決めず、本文、リンク、ボタン、補足文を個別に測ります。色の選び方は背景色と文字色の読みやすい組み合わせで詳しく扱っています。

2つ目は、文字サイズと書体

次に、実際に表示される大きさで読みます。PCの拡大画面だけで判断せず、スマホや印刷物の実寸で確認します。拡大しても内容が欠けないか、文字を大きくしたときに操作が隠れないかも見ます。

書体は、装飾性だけでなく、似た文字の区別、必要な日本語文字、太さの選択肢を確認します。長文に個性的な書体を使う場合は、標準的な本文書体の版と読み比べます。

明朝かゴシックかという分類だけで読みやすさは決まりません。同じ分類でも線の細さ、字面、かなの大きさは異なります。明朝体とゴシック体の使い分けを参考に、候補の書体へ実際の文章、数字、記号を流し込みます。Webフォントでは読み込み前後のずれ、未収録文字が代替書体になった場合も見ます。

3つ目は、行と段落の組み方

文字自体が読めても、1行が長すぎる、行間が詰まりすぎる、段落が大きな塊になっていると視線を戻しにくくなります。行間の固定値を正解にせず、書体、文字サイズ、行長に合わせて複数案を比べます。

見出し、本文、注釈の差も確認します。太字や色を増やす前に、段落を分け、見出しを付け、余白でまとまりを示します。装飾より構造を先に直します。

1行が長いか短いかは、文字数だけで一律に決めません。画面幅、文字サイズ、言語、読み方で変わるため、スマホとPCで折り返し位置を見ます。行間を広げるときは、同じ段落の行がまとまりとして見え、隣の段落とは区別できるかを同時に確認します。

直す順番は、症状で変える

「いつも行間から」「いつも文字サイズから」という万能の順番はありません。文字が背景に沈んでいるならコントラスト、小さくて判別できないならサイズ、次の行を見失うなら行間と行長から直します。

標準の点検順は、測りやすいコントラストと実寸サイズを先にし、次に行の組み方を見ることです。1項目だけ変えて同じ文章を読み、負担が減ったかを確認します。

変更記録には「フォントを変更」ではなく、「小さい数字の3と8を読み違えたため、太さと字形の違う候補を比較」のように、症状と変更を組にして残します。複数項目を一度に変えると効いた理由が分からないため、緊急修正で全体を変えた場合も、後から条件別の比較を行います。

やりがちな見た目だけの修正

専門用語が多い、1文が長い、主語が分からない、結論が後ろにある場合、文字組みだけ変えても読みやすくなりません。見た目と文章を分けて点検します。

最初に結論を置き、1段落1論点にし、必要な用語を説明します。読みやすさは書体の問題だけではなく、情報設計と文章設計を含みます。

文字を大きくしても、結論まで遠ければ探す負担は残ります。色を濃くしても、用語の意味が分からなければ理解は進みません。反対に文章を短くしすぎると、判断条件や例外が抜ける場合があります。見た目の案と文章の案を別々に作り、どのつまずきが減るかを実際の読者に近い人へ確かめます。

自分の制作物で試すなら

自分の制作物で、行間だけを試す

作品がある場合だけ、気になっている文章を使って試せます。

  1. 気になっている文章を複製します。
  2. 書体・サイズ・太さ・字間・色・表示幅を固定し、片方の行間だけを変えます。
  3. 実際に使う大きさで見比べ、採用するか、別の原因を調べるか決めます。

可能なら、内容を知らない人にも読んでもらいます。作った本人は文章を覚えているため、文字が見えにくくても補って読めることがあります。

試すときは、読む速さだけで良否を決めません。読み間違えた箇所、戻った行、質問された用語、読み終えた後に説明できた要点を記録します。疲労や見え方には個人差があるため、1人の反応を全員の結論にせず、異なる端末や利用条件で繰り返します。

Webでは文字を拡大したとき、横スクロールが発生しないか、固定ヘッダーが本文を隠さないか、ボタンの文言が欠けないかも見ます。印刷物では校正紙を設置距離で読み、照明や紙の反射を変えます。同じ文字設定でも、媒体が変われば症状が変わるためです。

読みにくさは、3群で切り分ける

自分の制作物に戻るなら、今回気になった条件から試してください。見た目で解決しないときは、文章の長さと情報の順番へ戻れます。

作品がない場合は、この見本の違いを確かめたところで終えて構いません。次に文字を組むときも、すべてを変える前に、何を比べるか決めてみてください。