見やすさ・わかりやすさにも色々あります【デザイン】

Design

Webサイトや資料作りなどをするときに重要な「見やすさ」や「わかりやすさ」についての記事です。

本記事では「見やすさ」「わかりやすさ」を語るときによく用いられるキーワードを挙げ、実例を交えながら説明してみたいと思います。

例えば「人の注目を誘う性質」という意味の「誘目性」という言葉があります。これが具体的に何を意味するのか、そして誘目性を高めるためにはどんな手段があるのか、というようなことを述べていきます。

誘目性(ゆうもくせい)

先にも述べましたが、人が気づいていない状態から、ぱっと見て「おっ、なんだこれは?」という感じでどれだけ目に留まるか、その度合いのことを誘目性といいます。

注意書きや、Webサイトのボタンなど、何よりもまず目を向けて欲しい情報については、誘目性を高めることを意識するとよいです。

誘目性を高める方法の一つとして「背景と文字(コンテンツ)の色の組み合わせを最適化する」という手段があります。

誘目性が高い色の組み合わせ、低い組み合わせというものがありますので、下に実例を挙げておきます。

誘目性が高い例
Look!
Look!

黒と黄、赤と白の組み合わせは、誘目性が高くなります。

誘目性が低い例
Look!
Look!

紫のような寒色系の色は誘目性が低いと言われます。

赤や黄など暖色系の色は総じて誘目性が高くなる一方、紫のような寒色系の色は黒地でも白地でも誘目性が低くなると言われています。

誘目性を高める方法としては他にも「サイズを大きくする」「動かす(ボタンなど)」という手段があります。

視認性(しにんせい)

誘目性は「まだ注目されていない状態からいかに目を引けるか」がポイントであるのに対して、視認性は目を向けてもらってからが勝負の話です。

誘目性を高めて注意を引いても、それが文字なのか図なのか、はっきりとわからなければ、気を引いた意味がなくなってしまいます。

ぱっと見て「○○って書いてあるんだ!」という風に、文字などがはっきりと見つけやすいかどうかの度合いのことを視認性と言います。

視認性を高めるためにも、やはり色の組み合わせが重要です。

実例を挙げます。

視認性が高い例
Read!
Read!

Read! の文字が文字として見やすいかどうかが視認性です。

視認性が低い例
Read!
Read!

視認性が高い例と文字の色を逆にしてみました。背景と文字の明度が近いと、視認性が低くなってしまいます。

可読性(かどくせい)

最後のキーワードは「可読性」です。

可読性は文章としての「読みやすさ」の度合いです。

誘目性や視認性は、パッと見たときの注目の度合いや認識のしやすさを表すものなので目を向けたときの「一瞬」が勝負です。

一方この「可読性」はもう少し全体的な話になります。

文章としての読みやすさなので「長くてもストレスや疲れを感じにくくなっているか」が重要です。

ここでは 書体(フォント)を例に挙げてみます。

文字の太さが関係

私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。

文字を太くすると「視認性」が向上しますが、長い文章だと目が疲れやすいと言われています。

私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。

題名や見出しなど、目を引きたい部分については文字を太くすることが有効ですが、少し長い文章について文字が太すぎると、可読性という点ではあまり良くない場合があります。

まとめ

本記事のまとめです。

見やすさ・わかりやすさのキーワード
  • 誘目性・・・どれだけ注目されやすいか
  • 視認性・・・どれだけ認識されやすいか(文字など)
  • 可読性・・・どれだけ読みやすいか(ストレスを与えないか)

タイトルとURLをコピーしました