初心者向け講座早見表
前々回のWeb系ブログコラムでは「既存サイトに新規バナーを追加する」際に検討すべき要素として「色の識別性」ついてお話ししました。今回はシリーズの第4回目として「文字の可読性」について説明したいと思います。
文字の可読性とは、文字の読みやすさのことです。一般的に白い背景色に黒い文字が最も読みやすいとされています。白黒以外の色の組み合わせはコントラストが減少するため、可読性が下がり読みにくくなる場合があります。読みにくい文字はWebサイトのコンテンツの理解を妨げたり、読み手にストレスを与える可能性があるため、文字を配置する場合には文字色と背景色に気を配り、双方の間で十分なコントラストを確保することが重要です。
コントラストについては、「見やすさをコントロールする」のコラムでお話ししたように、コントラストは「色の明るさの差」を意味します。
今回は具体例から文字の可読性を上げるポイントをついて見ていきたいと思います。
Hodogaya Chemical Co.,Ltd.
背景にグラデーションや写真を配置する際、背景色が一色に定まっていないために文字色のコントラストが部分的に低くなる場合があります。その場合、文字に影をつけたり、縁取りを行うなどの装飾を追加することで充分な可読性を確保できます。
ただし、装飾を強調しすぎるとコントラストが強すぎるために却って可読性を下げる場合もあります。装飾を追加する場合は少しずつ影などを適用していくと、イメージ通りのコントラストを得やすいでしょう。
docomo.com
文字を大きく、文字を太くすることによって、文字の可読性が上がります。大きめの文字を配置する場合、次に来る文字は小さく押さえることで、メリハリが付き全体の閲覧がスムーズになります。
上の例では太い文字の周囲の余白を広めに取ることで、すっきりと読みやすくなっています。
dwango
会社情報、経営方針などのボタン画像に使用されている青色が、左上のロゴで使用されている青色と比べてやや暗い色になっていることがポイントです。
ボタン画像では白文字のテキストに、ロゴの青色よりも明度を下げた暗めの青色を使用することで、テーマカラーである青色のイメージを伝えつつも、文字に充分な可読性を与えています。
このように、Webサイト全体の統一感を演出するために、ロゴなどで使用する色と画面上の色を揃える方法があります。読みやすい文字の大きさや太さが確保できるのであれば、特に可読性に影響はない方法ですが、文字は小さくなればなるほど、細いフォントを使用すればするほど可読性は下がります。
文字の大きさなど表現に制限がある場合は、背景色や文字色にやや暗くしたテーマカラー色を使用することで、コントラストを与えることができ、可読性の向上を実現する方法が有効になります。背景色や文字色は多少変更しても、全体のイメージに大きな影響を与えません。文字を配置する場合は可読性を確保することが優先順位としては1番目となりますので、文字のサイズによっては色の明度を調整して可読性の向上を考えることが大切です。
以上の例に示しましたように、可読性を考えた文字配置を心がけることで、読み手にストレスなくメッセージを伝えることが大切です。今後にお役立ていただけましたら幸いです。
（担当：斉藤 万幾子）
