名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

ホームページを制作する目的や役割は様々です。その目的は新商品の広告・宣伝目的や、自社の事業内容、強みを紹介するためなどが挙げられます。どんなホームページでもユーザーに「何かを伝える」という明確な目的があります。
このことから、WEBデザイナーは「これからホームページを制作しようとする企業」と「ユーザー」の間の円滑なコミュニケーションを担う重要な存在であることがわかります。
ユーザーがわかりやすいと感じられるようなホームページを制作する上で、「文字の可読性」は非常に重要です。今回はWEBデザイン制作時にWEBデザイナーが気を付けたい文字の可読性を上げるための5つのポイントを紹介します。

文字の「可読性」とは

「可読性」とは、字の如く「文字の読みやすさ」を表します。可読性は文字に使われている書体や色、背景に大きく左右されます。文字と背景のコントラスト比が低い場合は、文字が背景に埋もれてしまい、見づらくなってしまいます。また写真の上に文字を載せる場合なども単色の背景に比べて見づらくなってしまいます。

文字の可読性を上げるための5つのポイント

WEBデザイン制作時に、どのような点に気をつければ文字の可読性を上げることができるのでしょうか？
ここからは、テキスト情報をしっかりとユーザーに伝わるためにWEBデザイナーが気をつけるべきポイントを5つ紹介します。

写真の上に文字を乗せる場合はドロップシャドウをつける

写真の上に文字を乗せる場合、文字が写真に埋もれてしまうことがあります。写真の上に文字を乗せる場合は、文字にドロップシャドウをつけましょう。ドロップシャドウをつけることで、文字の輪郭を際立たせ、読みやすくすることができます。背景色に馴染む色のドロップシャドウを使用することで、違和感なく文字を写真の上に配置することができます。

背景色（座布団）を文字の下に敷く

文字の下に高コントラスト比の背景色を敷くことで、文字を読みやすくすることができます。文字の長さに揃えた長方形の背景色は文字の下敷きにされるため、デザイン業界では「座布団」と呼ばれることもあります。どのような背景でも可読性を上げることができるため、テレビやYouTubeなどの動画でも使用されることが多いです。ただし、文字に座布団を入れることでWEBデザインのテイストが変わる恐れもあるので注意しましょう。

縁取り文字（袋文字）を使用する

文字の輪郭を強調した「縁取り文字」を使用することで、背景が写真や動画の場合でも読みやすくすることができます。縁取り文字は「袋文字」とも呼ばれます。ただし、ドロップシャドウと同じく、WEBデザインのテイストが変わる恐れがあるので注意しましょう。

ウェイトの太いフォントを使用する

ウェイトの太い文字は細い文字に比べて目立たせることができる上に、読みやすく安定した印象をユーザーに与えます。明朝体などは伝統的かつ雰囲気のサイトに向いていますが、ウェイトの細いフォントが多いため、ユーザーに重要な情報を伝えるために使用するのは避けましょう。見出しでは明朝体を使用し、本文にウェイトの太いゴシック体を使用することで読みやすい文章となります。

装飾を多用した過度なデザインを避ける

文字を強調したいあまり、文字に装飾を追加しすぎると、かえって文字が読みづらくなってしまいます。世の中に存在する多くのフォントは、そのまま使用しても読みやすいようにデザインされています。文字の形を過度に変形させたり、装飾をつけ過ぎると、読みにくい上にユーザーを混乱させる可能性もある為、気をつけましょう。

今回のまとめ

今回はWEBデザインで使える文字の可読性を上げるための5つのポイントを紹介しました。テキストは、ほとんどのホームページにとって重要なデザイン要素です。ユーザーに伝えたい情報を伝えるために、今回紹介したポイントを意識してデザインしましょう。