Basic Design Note

文字の読みやすさを生み出す為の知識と方法【前編】

Categories|デザイン, 文字 tags| ,

前回から随分と時間が空いてしまいましたが、今回も文字についてのお話です。第2回目のテーマは「読みやすさ」についてです。どうして文字には「読みやすさ」が求められるのでしょうか?一言で「読みやすさ」と言っても、どういう事をすれば生み出せるのでしょうか?今回はそう言った所のお話を中心にしていきます。

■読みやすさを生み出す「3つの要因」

文字には「言葉を(正確に)伝達する事。」という役割があります。この役割を果たすために「文字」をどう扱えば「読みやすく伝えられるようになるか?」をキチンと知っておく事が大切です。そこで、「読みやすさ」を生み出すために、以下の3つを意識して文字を扱う必要があります。

読みやすさを生み出す「3つの要因」

文字はひと目で「文字」であることがわからないといけません。「読み間違い」や「見間違い」をしてしまっては意味が伝わりませんし、読みにくいと「読み進める」事の障害になってしまいますね。この「3つの要因」に配慮してデザインをしていくことが、「文字の読みやすさ」を生み出していく事につながっていきます。

■サイトの中で使われてる文字の役割りを知る。

WEBサイトの中でも情報の主役は文字です。写真も使って画面を構成していても、詳細な情報は文字を読む事で得ることができますね。そこで上の「3つの要因」に基いて、サイト内で使われている文字の「役割り」について考えてみましょう。

サイトの中で使われてる文字

使われている箇所によって文章量(情報量)に違いがありますが、イメージやバナー内の文字、タイトル部分の文字は「瞬時に見る人に情報を読み取ってもらわないといけない」ので、他の部分よりも「目立つ」様に視認性を高める必要がありますね。

それとは対照的にサイト内の本文(テキスト部分)は「読み進める」事で内容を理解してもらうので可読性が求められます。その為目立たせる事よりも「読みやすい状態を作る事」に重点を置かないといけないという事がわかります。

■和文・欧文の基本的な書体を知っておく

>使う場所ごとの目的を知ったら、次は「書体を選ぶ」事から始めないといけませんね。と言っても和文・欧文ともに書体の種類は膨大で、どの書体を選ぶかさえ難しい事なので、和文・欧文の「基本の書体」をまずは知っておきましょう。

[1.]和文の基本的な「2つの書体」

和文の基本書体は「明朝体」と「ゴシック体」の2つ。この2つの書体にもたくさんのバリエーションがありますが、基本的な文字の形は大きく変わりません。それぞれの書体の特徴は以下の通りです。

和文の基本書体

[2.]欧文の基本的な「2つの書体」

欧文書体の場合も、基本書体が以下の2つです。よく見ると和文の基本書体と雰囲気が似ていますね。

欧文の基本書体

■3つの要因から書体を選ぶ基準を探ってみる。

冒頭で触れた3つの要因から「視認性」「可読性」の2つを元に、基本書体の明朝体とゴシック体を見比べて選ぶ時の基準を探ります。また「判読性」の面からも、書体を選ぶ基準を考えてみましょう。

[1.]「視認性」を基準にして文字を見てみる。

まずは視認性から見ていきます。先ほどの基本書体の特徴を見ると、明朝体は「縦横の線の太さ」が違うという特徴があり、それとは反対にゴシック体は「縦横の線が均一の太さ」のエレメントを持っています。こういった見た目の違いが視認性にどういった影響を与えるか以下のサンプルを見てみましょう。

視認性のサンプル(明朝体とゴシック体)

サンプルは、同じ文章を明朝体とゴシック体それぞれで記述しました。

サンプルを見ると明朝体の線の細い部分は少し見づらいですね。これは、明朝体の横線が細い為に「文字の一部が潰れて見える」からです。(文字サイズが小さかったり、PCモニターなどでは特に潰れやすいです。)ゴシック体は線の太さが均一なので明朝体のように文字の一部が潰れる事が少なく、文字としての形がわかりやすいですね。

視認性のサンプル(太さの違う明朝体)

さらに、太さの異なる明朝体同士も見比べてみましょう。同じ明朝体でも線が太い明朝体は、元々の線が太いので横線が背景と同化しにくくなって、文字が潰れる事は無くなりましたね。

こういった点から考えると視認性に優れているのは、線の太さが均一な「ゴシック体」もしくは、「太めの明朝体」である事が考えられますね。

[2.]「可読性」を基準にして文字を見てみる。

次に可読性についてはどうでしょうか?線が均一なゴシック体は視認性に優れていましたが、可読性の面でも優れているでしょうか?以下のサンプルを見てみましょう。

可読性のサンプル

視認性が高かったゴシック体と太めの明朝体で文章を記述しています。(文章量は先程と同じくらい。)しっかりと読めますが、文字の線が太いので「重たい雰囲気」を見た目からは受けます。それと比べて明朝体と細いゴシック体は文字の太さが細い分、文字に見られる「重さ」は感じられませんね。

「可読性」は文字が読みやすいか?(読み進めやすいか?)という部分を重視していく必要があります。その為、ゴシック体や太めの明朝体の場合、長文になると「重々しさ」が目立ってしまい読み進めるには目が疲れやすくなり、可読性が下がってしまいます。

それと比べ、明朝体や細めのゴシック体などは、線が細いので「文字が重い」と感じる事が少なく目が疲れにくいので、読み進めやすくなる傾向にありますね。ただし、扱う文字のサイズには注意が必要です。元々のサイズが小さいといくら読みやすいとされる書体でも、「見えにくい」ので読みにくくなりますね。

この「視認性と可読性」の両面から考えた文字選びの基準は以下のような感じになります。

視認性と可読性の両面から考えた文字選びの基準

[3.]「判読性」についてはどう考える?

判読性のポイントは「読み間違いや見間違い」を少なくすることです。では、「読み間違いや見間違い」はどういった時に起きやすいでしょうか?そこから考えてみると理解しやすいと思います。

読み間違いを起こしやすいシチュエーション

読み間違いのシチュエーションとして主だった所は、上のような場合が考えられますね。基本書体の明朝体やゴシック体を選んでいるなら、頻繁に読み間違いを起こすことは少ないかと思いますが、扱う文字サイズが小さい場合、濁点や半濁点(「ぱ」と「ば」)、アルファベットと数字(「O」と「0」)の見間違いは起きる可能性があるので、可能であれば「ユニバーサルデザイン書体」を選ぶ事も、判読性を高める選択肢の一つになると思います。(UDフォントを持っていたらの場合ですが・・・。)

また、ディスプレイ体を始めとした「装飾要素」が強い書体を、「タイトルや本文に関わりなく多用してしまう事」も避けるべきポイントになりますね。

■テキスト(本文)には、ゴシック体か明朝体のどちらがイイ?

先の項目で、可読性が高い書体として「明朝体」を挙げていますが、WEBサイトの本文(テキスト部分)はどのサイトを見ても、基本的に「ゴシック体」で表示されています。(明朝体のサイトはほとんど見かけない程・・・。)

また、文中でも明朝体はモニター上では見にくいとしていますが、実際の所どうなんでしょうか?ちょっと気になったので実際に見比べてみました。

▼書体の違いによる見え方の差(文字サイズ:12pxで指定。)

ここの文字はゴシック体(font-family:sans-serif)を指定しています。文字のサイズは12pxです。ゴシック体は線の太さが一定なので、文字が読みにくい事も無く一定の見え方を示しています。下の明朝体を指定したテキストと比較して見え方はどうですか?明朝体は書体としての見た目は美しいですが、モニター上での視認性と可読性のバランスを考えるとゴシック体の方が安定している様に感じますね。

ここの文字は明朝体(font-family:serif)を指定しています。文字のサイズは12pxです。明朝体の場合は元々文字の線に抑揚があります。その為線の太さは一定ではありません。線が細い部分が背景色の「白」に負けてしまって見えにくくなっていたり、ゴシック体と比べて文字の大きさが少し小さく見えるので、長文になっていくほど「読みにくさ」が前に出てくる可能性がありますね。

上の例文を見ると、明朝体はブラウザで見ると確かに見えにくいですね。このエリアの文字はご覧いただく環境(Windows、Mac)で見え方に違いがありますが、どちらの場合であってもゴシック体の方が、「よりハッキリと文字が読める」と思います。(僕も実際に両方の環境で確認しています。)

■今回のまとめ

  • 読みやすさを生み出す要因は「視認性・可読性・判読性」の3つ。
  • 視認性が高い書体は「ゴシック体・太めの明朝体」
  • 視認性を重視する箇所はタイトルなどの「目立たせたい箇所」
  • 可読性が高い書体は「明朝体・細めのゴシック体」
  • 可読性を重視する箇所は本文などの「読ませたい箇所」
  • 判読性のポイントは「読み間違いや見間違い」を少なくすること。

文字の読みやすさを作るには、文字を扱う場所や状況によって「視認性・可読性・判読性」の3つの要因を意識して、それぞれの要件に合った書体を選ぶ事が大切です。また、視認性や可読性については、書体の選定だけでなく「色」との組み合わせによっても見え方が大きく左右されるので、こういった所にも気を配る事が大切です。(色の事は別の記事で詳しく書いていきます。)

タイトルにもあるように今回は「前編」とさせてもらってます。読みやすさを作るには今回まとめた知識だけでなく、文字の見た目を「揃える・調整する」事も必要な事です。次回はこの事について書いていきます。「3つの要因」と合わせて、読みやすさを作っていく上で大切な文字の扱い方について考えて行きましょう。(公開時期はたぶん来週中になります。)

参考サイト:書体の選び方|伝わるデザイン

■参考図書のご紹介

タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック- (デザインラボ)

タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック- (デザインラボ)

今回の記事を書くにあたっては、こちらの書籍を参考にさせていただいています。とても有名な書籍なので、お持ちの方もいらっしゃるかと思いますが、文字に関する基礎知識がわかりやすく記載されていて読みやすいです。

Pocket
LINEで送る

コメントはこちらから

Page top