Webサイトを見ていたら、見づらく感じるページがあります。
Web業界では、使いやすさ、使い勝手という意味合いで「ユーザビリティ」という言葉を用いられることが多いのですが、本記事ではWebデザインの際に、特に見やすさの面でユーザビリティを配慮すべき基本的な点を３つご紹介します。
ポートフォリオ作成の際にもご参考ください。
文字が小さい
文字が小さいとかっこよく見える、という理由で、小さい文字のWebサイトやWebページがありますが、見づらいと感じるユーザーがいるのでおすすめできません。
小さい文字のサイズですが、12ピクセル以下だと見づらくなってきます。
基本13ピクセル以上だと無難で、本文の文字は15～16ピクセルあると読みやすくなってきます。
▼文字サイズの例
- 【16ピクセル】文字の大きさを示すサンプル文字列
- 【15ピクセル】文字の大きさを示すサンプル文字列
─── 本文はここより上のサイズが無難 ─── - 【14ピクセル】文字の大きさを示すサンプル文字列
- 【13ピクセル】文字の大きさを示すサンプル文字列
─── ここより上のサイズが無難 ─── - 【12ピクセル】文字の大きさを示すサンプル文字列
- 【11ピクセル】文字の大きさを示すサンプル文字列
- 【10ピクセル】文字の大きさを示すサンプル文字列
- 【9ピクセル】文字の大きさを示すサンプル文字列
文字の色が薄すぎる、または、黒すぎる
これも文字の色が薄いとかっこよく見えるという理由で、文字の色を薄くしているWebページやWebサイトがあります。
文字の色を薄いグレーにしているWebページを見かけますが、モニタによっては相当薄くなってしまうこともあります。
Webサイトの表示は、ユーザーの環境によって変わり、モニタの発色も様々ですので注意が必要です。
また、逆に、文字の色が黒すぎる場合も読みづらく感じる方がいます。色指定で言うと「#000」というような100％の黒になります。
文字の色が完全に黒だと、画面全体が重い感じになり、目に負担がかかる場合があるので、こちらも注意です。
おすすめの文字の色は「#333」か、せいぜい「#333」と「#000（100％の黒）」の間にある「#222」あたりまでが無難です。
▼文字の色の例
- 【#000（100％の黒色）】文字の色を示すサンプル文字列
- 【#333】文字の色を示すサンプル文字列
- 【#666】文字の色を示すサンプル文字列
- 【#999】文字の色を示すサンプル文字列
- 【#CCC】文字の色を示すサンプル文字列
背景色が黒
見た目のかっこ良さを理由に背景色（バックの色）を黒にしているWebサイトがありますが、ユーザービリティの面から避けた方が無難です。
基本的には、コーポレートサイトなら背景は白、それ以外でもせいぜい薄い色までが限度です。
ユーザビリティの面で背景を黒にするのを避けるべき主な理由は以下の２点です。
- ほとんどのWebサイトが背景白なので、背景色が黒に反転されると、目が疲れる（と感じる方がいる）
- 印刷時、ムダにトナーを使ってしまうのと、紙面全体が黒で汚くなる
また、ユーザビリティの問題の他にも、印象面でコーポレートサイトの背景が黒だと悪い印象を持たれてしまう可能性がありますので、避けた方が無難です。
背景色を黒にする場合は、高級ブランドや映画サイトのようなビジュアルで訴えるサイトなどで、背景色の黒がユーザーに訴求できそうかを見極める必要があります。
まとめ
今回ご紹介したような文字のサイズや色など、基本的なデザインの判断に迷った場合は、多くの方が利用しているYahoo! JAPANやGoogleのWebサイトを参考にすると良いです。
多くの方が見ているサイトと同じ文字の大きさや色なら、ユーザーに違和感を与える可能性は少なくなります。
