本文ボリューム : 23画面分

視認性と可読性と判読性

WEBサイトの基本はテキストですが、WEBに限らず文字を扱うのであれば重要な要素が3つあります。今回の記事はこの件について少々。

いつもながら基本は私見ですので、間違っていたらご指摘いただけるとうれしいです。

なお、長文ですので、後でお時間のある時に読むことをお勧めします。

前書き

視認性と可読性と判読性について
視認性と可読性と判読性について

私たちがテキストテキストといっているものは、文字の集合体です。

文字がルールに則って並ぶことで、文章が成立するわけです。

では、文字がその機能を果たすためには何が必要でしょうか?
それが以下の三点です。

  • 視認性
  • 可読性
  • 判読性

この三点を全く満たさないものは文字とは認識されません。

極端にいえば、日本語しか知らない人からすると、他言語や絵文字なども文字ではないのです。

視認性

まずは視認性から。視認性とは、

目で視て確認できる度合い

です。とても明解な点です。見えなければ読めませんから。

しかし、基本的であるが故に非常に重要な点です。

WEBデザインでは、背景色と文字色の関係がもっともわかりやすいでしょうか?

同じ色にすると視認性は限りなく0になり、形も何もわからなくなります。

この状態では文字は文字足り得ません。

視認性の確保は第一の要件です。

デザインにおける視認性

文字に限らず、デザインにおける視認性というものは非常に重要です。

あるいみでは文字以上とも言えます。

なぜなら、デザインで用いる要素は視認性を低める場合も多々あるからです。

具体的に言えば、目立たせたい部分の視認性は上げ、目立たせたくない部分の視認性は下げます。

画面全体をコントロールするという点で、視認性は基本的な指針となります。

可読性

続いて可読性です。
可読性とは、

読みやすさの度合い

です。何かがあると見えるだけでは文字として成立しません。

文字だと分かるように読みやすくなければならないのです。

読みやすさというと、文字の大きさや字間の広さが思い浮かびますが、そもそも字の形自体も問題になります。

手書きの手紙が読めない場合、その理由の大部分はこの可読性が低い点にあるのではないでしょうか?

読みやすさが重要である点は言うまでもありませんね。

判読性

最後は判読性です。
判読性とは、

文字の意味を判断しながら読める度合い

です。なんだか可読性に近いですが、可読性より限定的な意味合いです。

可読性はその文字が文字として読めるかどうかであり、極端に言えば意味が分からなくとも可読性を高めることは可能です。

実例を挙げますと、「時」という一文字を思い浮かべていただくと良いかもしれません。

「時」は「じ」とも「とき」とも読めます。

読み方に応じて、「じ」は何時何分という時計による時間を表し、「とき」は時間という概念を表すことになります。

つまり「時」という文字自体は読めますが、意図する意味が分からないのです。

本来は文脈などに当てはめて考えるので、文章になっている時点で判読性は高まります。

現実的には、母国語以外の言葉や常用ではない漢字、母国語であっても専門的すぎる用語などが判読性を悪化させます。

文字として書いたらですが、横文字専門用語が好きな方は「判読性の悪い人」ということになりますね。

デザイン上の判読性

デザイン、特に文字を印象的に用いるコピーライティングにおいては判読性が重要です。

デザインの方向性にもよりますが、強烈な印象を与えるために文章が短く、場合によっては一文字だけを使うからです。

例えば、仮に青空の写真の上に「空」一文字は間違えませんが、灰色の雲に覆われて全体がぼやけた空の上に「空」一文字では「から」という意味に取られかねません。

大多数は習慣や経験から意味を取り違える事はないでしょうが、判読性の低い使い方をすると大きな問題となります。

視認性と可読性と判読性の確保

WEBサイトで文字を使う場合、視認性と可読性と判読性の確保は必須です。

  • デザイン上の見映えの良さだけを考えていては、足りません。
  • ユーザーに訴えかける文章を考えるだけでは、足りません。
  • 内容が良くても読めない言語で書かれていては、意味がありません。
  • 読めても意図が伝わらなければ、意味がありません。

非常に明解で単純な事なのですが、

その文字は、理解できるか?

という問いに答えられなければならないのです。

書籍や雑誌に学ぶ

視認性と可読性と判読性を突き詰めた媒体は既に存在しています。

それは書籍であり雑誌です。

WEBが生まれるずっと以前から文字を利用し、文字を魅せていた媒体ですから、WEBに比べて歴史や試行錯誤の深さが違います。

デザインという意味では、やはり雑誌を参考にするのがよいでしょう。

文字の大きさや字間、段落の幅などなど、デザイン性との調和が学べます。

文字自体であれば、書籍がおすすめです。

一冊もの文章量を読ませるのに、視認性も可読性も判読性もなにもかも存在しないなどと言うことはあり得ませんから。

WEBへ活かす

書籍や雑誌を、そのままWEBサイトに用いてもうまくいかないことは想像に難くありません。

媒体特性の違いが理由ですが、これはなに特殊なことではありません。

書籍と雑誌、この2つからして違うのですから。

では学ぶ意味がないかと言えば、学ぶ意味はあります。

より厳密に言えば、学んだことを活かせるかどうかが肝になるためです。

これは、どこかのブログに「lien-heightは1.8が最適」と書かれているから無自覚に真似をする、という活かし方ではありません。

いわば、引き出しを増やし、感性を磨き、指針を作り、判断を下すという活かし方です。

手に入れるのは完成品ではなく、完成品を作るための道具です。

日本語の特性

表意文字か表音文字かで可読性と判読性は大きく変化します。

そして、日本語は漢字を使う点において表意文字を利用する言語となりますので、英語圏の事例やセオリーは必ずしも適用できません。

何でもかんでもあちらの理論をいう考えは捨てた方がよいでしょう。

前述で少し触れましたが、日本語であればたった一文字で多くの表現が可能です。

意図として許されるのであれば、あえて判読性をあやふやな状態において読めそうで読めないなどという状況さえ利用できてしまいます。

表意文字を仕える環境は、仕えない環境に比べて創造性が高いといえるかもしれません。

アイコンの特性

役割から考えますと、アイコンも文字の一つと言えます。

種類としては絵文字ですね。

文字である以上、学ばなければ読めません。

古代エジプトのように一部の階級だけが絵文字を理解できればよいという状況でなければ、大多数の方が容易く学習可能かどうかという点から、アイコンの使用を検討するべきでしょう。

「これはメールを送信するアイコンです」「これは買い物かごに商品を追加するボタンです」などと学校で学ぶことはありませんから、アイコンを学習する状況の存在が大前提です。

現実的には、世間で頻繁に目にする要素を利用するのが得策です。

この意味においては重要なのは、接触する機会が多いかどうかであり、習慣にとけ込んでいるかどうかです。

どれほど理論的に優れていたとしても、習慣から外れたアイコンの判読性は極度に落ちます。

そのため、アイコン作成の場合はオリジナルからの派生パターンが基本となります。

意図的に習慣を作り出す

接触が増せばいつかは習慣にとけ込むことが可能です。

つまりは、接触回数の多い場所であれば、ユーザーはアイコンを学習して「読める」ようになります。

仮にYahooが全く新しいアイコンを採用した場合、ある程度の時間をかければユーザーはそのアイコンに慣れます。

不満は出るでしょうが、否応なくいつかは慣れてしまうのです。

こうなれば、そのアイコンは他のサイトでも利用できるようになり、文字の誕生、といえるのかもしれません。

結び

短くしようと思ったのですが、後半から話が膨らんでしまいました。

これだけ長文になると、もはや「読みにくい」ですね。

語句の解釈やご説明は私見が混ざっていますので、正確かどうかはちょっと微妙です。
もちろん調べはしましたが。

また、今回は言い回しをすこし変えています。

ブログではなく本を読んでいるようなイメージを持っていただけましたら成功なのですが…。
いかがでしょうか?

うまく出来ていないかもしれませんが、文字で表現できることはもっと多彩なのです。

コメント欄