実は、作ったWebサイトのフォントが閲覧するデバイスによって左右されるってことは知っていますか？

制作者がこのように見せたいと、フォントを指定しても、閲覧者のPCにそのフォントがインストールされていないと、別のフォントが代用されてしまい、作成者が意図しない見え方になってしまう問題があります。このような問題を解決するためにWebフォントがあります。

Webフォントとは

Webフォントとは、インターネット上からフォントのデータを引き出してきてWebサイト上に表示させるシステムのことです。

Webフォントを利用すれば、閲覧者側の端末環境に依存せずにホームページ制作者が指定したフォントを確実にホームページ上に表示できます。

下記サイトをご覧ください。

 

鬼怒川金谷ホテルのサイト　Webフォント使用

 

Webフォント未使用

 

実際に見比べてみると、サイトの雰囲気が大きく異なるのが分かると思います。フォント一つでサイトの世界観を作り上げ、ブランディングを向上させることができます。

メリット

SEO効果を保ったまま、デザイン性を高めることができる

Webフォントの最大のメリットは、デザイン性の高いサイトの構築ができる点です。
上記サイトのようにユーザー環境に寄らず、豊かなデザイン表現が可能となり、制作者の意図する印象を与えることができたり、文章の可読性・視認性を高めることができるようになりました。

従来は、デザイン性の高いサイトを構築する際、デザインフォントを含む箇所を画像としてWebサイトに配置してきました。しかし、この方法では、検索エンジンの情報収集ロボット「クローラー」に画像と判定され、記載した文字情報は理解されません。
多彩なスタイルを持つWebフォントの出現でテキスト表現の幅が広がり、クローラーにしっかりと内容を伝えられ、かつデザイン性の高いWebサイトが構築できるようになりました。

 

レスポンシブデザインに適している

スマートフォンなどのモバイル端末の普及やGoogleが推奨したことで、現在のWebサイト構築方法の主流となっているレスポンシブデザイン。画面サイズの異なる複数のデバイスに対応するWebサイトでは、折り返し位置やサイズ調整が自動で行われる「テキスト」での表現が最適です。
また、従来のようなデザイン性の高い箇所を画像で配置する方法では、対応するデバイス分の画像パーツの用意が必要になるなど、構築にも更新にも手間と時間が掛かりますが、Webフォントの出現で運用コストの削減にもつながっています。

Webフォントは遅い？？

Webフォントのデメリットで、特に日本語Webフォントは遅いと言われてきた。英文フォントに比べて、文字数が膨大になる日本語フォントはサイズが大きくなりすぎ、フォントをダウンロードさせるとページが重たくなってしまい、現実的ではありませんでした。

しかし、実装の仕方で早くできることも可能です。膨大にあるフォントの中から、実際にWebページに使用されている文字だけをダウンロードさせる「サブセット化」をすることで、容量を抑えることができ、ページ容量の負荷も抑えることができます。

一般的に日本語フォントは文字数が7000文字以上あると言われていますが、重複文字も取り除き、ある程度の容量を押さえることができます。

まとめ

Webフォントにこだわると、サイトの世界観を文字で伝えることができ、ブランディング向上にも寄与します。

人間の脳は0.1秒で、好きか嫌いか、見やすいかどうかを判断していると、言われています。Webも紙と同様にフォントに対する考え方は変わりません。まずは、自社のWebサイトが、どんなフォントを使用しているか、そのフォントはWebフォントなのか画像データなのか、そして、その書体がサイトブランディングに寄り添っているかなど、一度見直してみてはいかがでしょうか。