WEBサイトについて 読みにくい文字を読みやすくする為に私たちがしていること

私たちは、HPのコンセプトとして見やすさをとても大切にしています。

見やすければ見やすいほど、お客さまに与えるストレスは減るので、スムーズに目的を果たせるWEBサイトであると言えるでしょう。

情報量が煩雑だったり冗長すぎては、そのストレス値は当然上がります。ですが、こざっぱりしすぎていて何もないのも、求めている情報にそぐわないものが置かれているのも、見ている人を退屈にさせてしまいます。故に出来るだけそうならない為に日々UXを改善している訳ですが、その中の一つ「可読性」について僭越ながらお話をさせていただきます。

可読性＝文字の読みやすさ

早速ですがこの画像を見てください。

明るい文字に白背景、黒い文字に白背景では、聞くまでもなく右側の「こんにちは」のほうが読みやすいと思います。

さて、もう少し掘り下げさせていただきますね。

それでは、なぜ黄文字に白背景と黒文字に白背景ではここまで見え方に差が生まれるのでしょうか？
これを説明できるようにする為には、明るいとはどういう事を指すのかについてお話しなければなりません。

明暗差(コントラスト比)は、数値化できる

パソコンやスマホの画面では、色を表現する為に赤、緑、青(RGB)が使用されています。
それぞれの色の強弱にはレベルがあり、これは16進数(0～9とA~F。もしくは0~255)で表すことができます。これらを組み合わせることで色は白に近づいていきます。これを加法混色といいます。

上記例ですと、このように表すことができます。

このコントラスト比が高ければ高いほど読みやすいのですが、それで行くと白対黒は最も読みやすいです。ですが、白対黄色だとわずか1/3しか差がありません。

絶対に白黒にしなきゃいけないという訳じゃない

次に赤白、青白の例を貼ります。

ある程度のコントラスト比があれば人間の目は文字をストレスなく認識できます。だから、白黒にすることはマスト条件ではありません。ちなみに、人間の目には捉えやすい光と捉えにくい光があります。だから、コントラスト比が数字上同じでも緑色は明るく見えてしまって見えづらいということもあります。

閑話休題

充分なコントラスト比であれば、白黒ハッキリ付ける必要はないという事はここでお分かりいただけたと思います。そして目的を果たすためには、画像素材に対して如何に無理なく良いレイアウトが出来るのかが肝要となります。次項ではコントラスト比を良くするための具体的手法を幾つかご紹介します。

コントラスト比をつける為の手法いろいろ

そうはいっても、WEBやDTPのお仕事をしていると明暗差が少ない画像に文字を入れるしかないケースも少なくありません。

コントラスト比以外に気をつけるべきこと

• 文字の大きさ
• 文字の太さ
• 書体えらび
• 言葉えらび(中身のコンテンツに見合った内容か？)
• 改行位置
• 情報の量
• 列は揃っているか？

などなど・・・たかが文字ですが、されど文字。様々な検討事項のもと、私たちは読みやすいWEBサイトを目指して運営しております。

本日もご精読いただきありがとうございました！