Eyes, JAPAN Blog > 視認性を高くする文字のデザイン

視認性を高くする文字のデザイン

ishii

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

文章情報をデザインする際に重要となるのが伝えたい相手ににストレス無く読んでもらうことです。
では、どの様な要素がストレスの原因になるかというと
・何が書いてあるのかが分からない
・一目で重要な情報を判別する見つけ出すことが困難
ということが挙げられます。

ではストレスを感じない文章、つまり「視認性の高い文章」にするにはどの様なことに注意しなければならないのでしょうか。

・視認性とは
目で見たときの確認のしやすさ。デザインや人間工学の分野において、背景に対し色や形が際立っていたり、文字が大きくてわかりやすかったりする度合い。「視認性の高いデザイン」
:デジタル大辞泉より引用

本記事では視認性の高い文章にするためにできることを3つ挙げました。
デザイナーでない方もプレゼン資料やポップなど作る際の参考にして頂ければ幸いです。

文字に強弱を付ける

新聞は文字情報が多いですがすぐに目的の記事を見つけることができるかと思います。

その理由として「ジャンプ率」が十分あることが挙げられます。
ジャンプ率とは本文のサイズに対する見出しの大きさの比率のことです。
比を十分設けることによってユーザー側は読みたい情報を見つけ易くなります。

この比率をどのくらいに設定するかは与えたいイメージや本文の文字の大きさ、印刷物の大きさによって変わります。
・ジャンプ率が低い→リッチな印象、小さな印刷物
・ジャンプ率が高い→勢いのある印象、大きな印刷物

Google Analytics

上図の比率 [本文:小見出し:大見出し]
(左) 1:1.2:1.5  (右) 1:1.5:3

こちらのサイトでは本文のサイズを入力すると、見出しを何pxに設定すれば良いか提案してくれます。
URL:https://type-scale.com/

コントラストの高い色構成にする

デザインする上で色はコンテンツをまとめる、分ける、イメージを与える(青=誠実、赤=上昇志向、庶民的)ことができるため文字情報にアクセントとして使用します。

そこで気を付けたいのが文字デザインにおいて認識しづらい色構成は避けるということです。

ユーザーに様々な人が想定される中で色覚特性を持つ人がいることを加味しなければなりません。(見え方に差はありますが、12人に1人いると言われています。)
そうでない人にとっても文字を読む上でチカチカする色=彩度が高くコントラストが無い色の組み合わせを使用すると目が疲れる原因となり、読む上でストレスになります。

下図は1型2色覚の特性を持っている人の見え方。背景と文字が同じ色に見えます。
グレースケールで見るとほぼコントラストがありません。

Google Analytics

読みやすい文章にするためには前景テキストと背景色との間に十分なコントラストが必要となります。
推奨されるコントラスト比は「Web Content Accessibility Guidelines (WCAG)」(Webコンテンツを見やすくするためのガイドライン)に規定があり、文字の大きさにもよりますが最低でも4.5:1が推奨されています。(1=21)

下図は見えづらいとされる背景が原色のもの、文字が彩度の高い黄色のものです。
色構成を「WCAG 2 AA」準拠値まで明度を下げると下段のようになり、コントラスト比が高くなっていることが分かります。

Google Analytics

Webサイトの場合はGoogle Chromeのデベロッパーツール(検証モード)でコントラストが適切か判別する事ができます。

Google Analytics
Google Analytics

フォントを変更する

見出しと本文を同じフォントにしたまま文字のサイズを小さくすると強弱のない印象になります。
本文は細くする、違うフォント(ゴシック→明朝体)にするなど文字サイズに合ったフォント選びをすることで見出しを掻い摘んで読むことができるようになり視認性を高めることができます。

下図(左)は本文と見出しのフォントが同じものです。
下図(右)は本文に見出しよりも細いフォントを使用しています。

Google Analytics

最後に

今回は「視認性を高くする文字のデザイン」として実践できることを3つご紹介しました。
ユーザーから見て文字が読みやすくなっているか、色が認識しやすくなっているか分からない際に改めて項目をチェックしてみてください。

Comments are closed.