パソコンやスマホが普及した今、毎日のように見るWebサイト。画像や動画ではなく、ホームページやブログに書かれている文章について、文字の色を気にしたことがありますか？
読み手側は「黒色に見えるけれど違うの？」と思う人もいるかもしれません。実際、多くの文字は真っ黒ではなく、少しグレーが入っています。
文字色が「真っ黒」＆背景が「真っ白」はNG
文章の読みやすさは、文字の大きさ、行間、空白だけが問題ではありません。Webデザイン全体に言えることですが、色相、彩度、明度のバランスは好みだけではなく、ユーザーにとって目の負担に影響することもあります。
背景が「真っ白」であり、長文の文字が「真っ黒」の場合はコントラストが強すぎてしまうため、ユーザーにとっては読みにくい画面になってしまいます。
色番号で調節しよう
Webサイトでは色の指定にカラーコードがあります。背景、文字、見出し、ヘッダー、タイトルなど色の指定をすることができ、6桁で表現されます。デザインの配色でとても悩む部分でもありますね。
黒色 #000000
白色 #ffffff
赤色 #ff0000
など、数字とアルファベットの組み合わせを変えることで、少しずつ色の変化を選ぶことができます。一般的に多く使用されているのが、背景色が真っ白の「#ffffff」で文字色が「#333333」の組み合わせ。文字色を少しグレーにすることで目の負担を減らします。
また、背景をオフホワイトにしたり、文字色をこげ茶色にするなど、変化をつけている場合もあります。文字の大きさ、色に関しては読む側が疲れないようにすることを前提にし、見やすく優しいサイトを心掛けるようにしましょう。
ほぼ黒色でも少しの違いをつけて色を使い分ける
大手の通販サイトなどは、画像やバナーはカラフルでも文字色は基本的にほぼ黒色ベースが多く使われています。タイトル、商品説明、口コミ、評価などに違いをつけるため、文字の大きさだけでなく、ほぼ黒色に近い色を使って色味を変えています。
あえて真っ黒を一部に使用したり、薄いグレーにしたり、青色ベースを取り入れたりと、統一感を持たせて表示しています。
文字を目立たせるために何色も使ってしまったり、黄色などの目立たない色、パステルカラーなど薄い色は避け、アンダーラインや太字などの装飾を利用しながら工夫するといいですね。
Webサイトでは、デザインで一番インパクトに残るのは色です。表現の仕方も様々ありますが、文字色に関してこだわりすぎてしまうと、読み手に負担がかかってしまうこともあるため、読みやすいデザインを重視してみてください。
株式会社観光丸ではデザインにこだわったWEB制作も承っております。是非ご覧ください。