「すべての人のためのデザイン」であるユニバーサルデザイン(以下、UD)を、グラフィックデザインの視点から解説する連載企画。第4回は、「Webサイトでのフォント活用」。紙媒体との統一性や、拡大縮小時の美しさ、SEO対策など、読みやすさだけではないWebサイトにおけるUDフォントの優位性について解説します。

[編集協力:株式会社モリサワ]

Webサイトにおけるフォント選びのポイント

Webサイトでのフォント選びは、以下の2点が特に重要になります。

(1)サイトのイメージに合っているか

ブラウザ設定のフォントをそのまま使うことが適切かどうか、そしてサイトのイメージを正しく伝えられているかが重要です。
また、そのサイトで紹介している商品などの情報が、カタログや広告、雑誌など、他のさまざまなメディアにも展開している場合、メディアによって異なるフォントを使ってしまうと、バラバラな印象になってしまいます。ブランドやコンセプトに一貫性を持たせたい場合、フォントは全メディアで統一するのが効果的です。

(2)読みやすいか

UDの観点からは読みやすさに配慮していることが必要です。例えば表示の拡大縮小をしても問題なく読めるか、特に画像内の文字は拡大すると粗く表示されるケースがあるので注意が必要です。
さらに最近では読み上げに対応できるかなども必要な場合もあります。
これらのポイントを実現するには、Webフォント配信サービスの利用がおすすめです。例えばモリサワの「TypeSquare」なら、明朝体・ゴシック体といった基本的な書体はもちろん、デザイン書体、かな書体、UD書体、多言語書体など、さまざまなフォントをWebサイトで利用できます。

▶︎モリサワ「TypeSquare」

モリサワ「TypeSquare」で使用できるフォントの例

Webデザインに便利な「Webフォント」

ここで改めて「Webフォント」について解説します。
Webフォントとは、インターネット上でフォントを配信してブラウザで表示させる仕組みです。閲覧者の使用する端末にインストールされていないフォントを表示することができます。主に4つのメリットがあります。

Webフォントの仕組み

〈メリット-1〉メディアを越えてイメージを統一できる

例えばある雑誌に関して、紙媒体のものとWebサイトで異なるフォントを使ってしまうと、イメージにズレが生じる可能性があります。
Webフォントを使用すると、印刷物で使用したものと同じフォントを簡単にWebサイトでも使用することができ、メディアを越えてイメージを統一することができます。

〈メリット-1〉サイトのイメージを統一できる

〈メリット-2〉拡大してもクリアな表示

Webサイトでは、画像上にある文字は画像化されていると、拡大した際に粗くなり、ドットが目立って読みにくくなり、美しくなくなります。しかしWebフォントであれば、美しく読みやすい状態のまま拡大できます。
また文字を画像化しないので、修正の際に画像を直す必要がありません。

〈メリット-2〉拡大してもクリアな表示

〈メリット-3〉ユニバーサルデザイン性が向上

画像上の文字にもブラウザの読み上げ機能や自動翻訳機能が利用できるので、ユニバーサルデザイン性が向上します。

〈メリット-3〉ユニバーサルデザイン性が向上

〈メリット-4〉SEO対策に有効

文字が画像化されていないため、閲覧者が検索した際にヒットしやすくなります。

〈メリット-4〉SEO対策に有効

UDフォントをWebサイトに使用した事例の紹介

株式会社モリサワが運営する「TypeSquare blog」に、UDフォントをWebサイトに使用した自治体の事例が紹介されています。WebサイトのUD化を検討中の方は、ぜひご一読ください。

【自治体事例-2】ユニバーサルデザインへの取り組みとして、すべての閲覧環境で読みやすく、誤読がおきにくくするため 『福岡県水巻町』

【自治体事例-3】平時はもちろん、有事の際こそ情報発信への配慮が重要!『長崎県平戸市』


《シリーズ企画》
広告・販促・広報ですぐに役立つ「ユニバーサルデザイン入門」

  1. (1)「見え方」の多様性
  2. (2)ユニバーサルデザインを用いる理由
  3. (3)UDフォントとは
  4. (4)Webサイトでのフォント活用
  5. (5)配慮のポイント・基本編
  6. (6)配慮のポイント・実践編

私たちがお役に立てること 想いをカタチに 企画編集/クリエイティブ プロモーション活動の全体を俯瞰しながら、お客さまの求めるイメージを各種ツールへとカタチにします。 詳細はこちら

関連記事

おすすめ資料