【イメージを左右する】 Webサイトで使われるフォント

Webサイトを制作する際、どのようなフォントが使用できるかご存知ですか？どのフォントにするかで読者に与えるイメージが変わってきます。どんなときにどのフォントを使えば良いのかを考える前に、まずはフォントの基本をおさえておくことが重要です。

Webサイトの一般的なフォントは2種類

Webサイトでよく使われるフォントは、「システムフォント」と「Webフォント」の2種類があります。
それぞれのフォントは、特徴やメリット・デメリットが違います。

システムフォント（デバイスフォント）とは？

「システムフォント」とは、PCのOSに最初からインストールされているフォントのことです。閲覧者の端末（デバイス）内に元々あるフォントを使用して文字を表示するので、「デバイスフォント」とも呼ばれます。

主なシステムフォントをご紹介いたします。

Times New Roman

現在WindowsとMacに標準搭載されています。

Arial

現在WindowsとMacに標準搭載されています。

游ゴシック体

現在WindowsとMacに標準搭載されています。

游明朝体

現在WindowsとMacに標準搭載されています。

メイリオ

現在WindowsとMacに標準搭載されています。

ヒラギノ

現在Macに標準搭載されています。

システムフォントのメリット・デメリット

元々あるフォントを利用する為、表示速度が速く、ライセンスなどを気にせず使用できるのがメリットです。

一方で、指定したフォントデータが閲覧者の端末にインストールされていない場合、代わりに別のフォントが代用されてしまいます。また、選べるフォント数が少ないため、デザインに拘りたい場合に不十分に感じるかもしれません。

Webフォントとは？

Webフォントとは、あらかじめWebサーバ上に置かれたり、インターネット上で配布されているフォントのデータを呼び出してきてホームページ上に表示させるシステムのことです。　

Webフォントを利用すれば、閲覧環境に依存せずにホームページ作成者が指定したフォントと同じフォントがホームページ上に表示できます。

Webフォントのメリット

デザイン性が優れたフォントが利用できる

Webフォントは、デバイスを気にせずにフォントデザインが選べるため、デザイン性を損なうことなくブランディングイメージを保てます。フォントが違うだけでもユーザーに与える印象を大きく変えてしまうので、Webサイトのイメージを左右する重要な要因となります。

例えば、ゴシック体は、ポップな親しみやすさを感じるフォントである一方、明朝体は上品さや伝統などが感じられるフォントです。

例えば下のサイトイメージを見ると、どちらが高級感があるブランディングにフィットするかわかりやすいかと思います。

SEO対策の強化

Webフォントが普及していない頃は、フォントデザインを統一するために文字を画像にして対応することもありましたが、Googleなどの検索エンジンでは、これまで主に文字情報を元に検索結果の順位付けを行っており、文字を画像にしてしまうことで、SEO的に検索順位に影響を与えにくくなってしまうという側面がありました。

その点、Webフォントは文字情報なので、検索エンジンに情報を読み込んでもらうことができます。また、文字情報のほうがデータ量が少ないため、サイトに負荷がかかりにくく、表示速度が早くなるというメリットもあります。

表示速度の早さもまた、SEOを強化する要因のひとつだと言われているため、総じてSEOを考えるのであればWebフォントを使用するのが良いといえます。

レスポンシブデザインとの相性

レスポンシブデザインとは、PC・タブレット・スマホなどそれぞれのデバイスに応じたレイアウトに自動的に変更してくれるWebデザインの技術のことをいいます。

文章を画像にしてしまった場合、スマホのような小さな画面で見た場合、画像全体が小さくなり、文字が見づらくなってしまうのですが、フォントデータの場合、自動的に適正な位置で改行してくれたり、フォントサイズを変更してくれたりするので、画像よりも見やすくなります。

Webフォントのデメリット

表示速度が遅くなることがある

Webフォントはデータを読み込む必要があるため、ある程度表示されるまでに時間がかかります。ですので、Webフォントを使用している箇所や種類が多くなれば多くなるほど、速度が遅くなる可能性が高くなります。

文字数の少ない英語フォントであればそれほど気にしなくて大丈夫ですが、日本語のWebフォントの場合は文字の種類が極端に多く、用意しなければならないフォントデータが膨大なため、非常に重いので注意が必要です。

有料のものや商用利用できないものもある

Webフォントの種類によっては有料のものがあり、導入する場合は費用が発生します。

無料で使用できるものでも場合によってはライセンスの規定がありますので、しっかりと確認が必要です。

おすすめのWebフォントサービス

Google Fonts

Googleが提供している無料Webフォントサービスです。

Adobe Fonts

アドビ システムズ社が提供している有料フォントライブラリサービスです。

TypeSquare

株式会社モリサワが提供する有料Webフォントサービスです。

FONTPLUS

ソフトバンクテクノロジー株式会社が提供しているWebフォントサービスです。

まとめ

人間の脳は0.数秒の間で、直感的にそのものの印象を判断していると言われています。

Webフォントをうまく活用することで、サイトの世界観を伝えたり、ブランディングの向上に一役買うことができるでしょう。