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

ホームページの印象を左右する要素として、配色やボタンデザイン、装飾等が挙げられます。WEBデザイナーやコーダーなどのホームページ制作に携わっている方なら誰もがご存知かと思いますが、その中の一つであるフォントは、ほとんどがWEBフォントであることを皆様はご存知でしょうか。
今回は、そんなWEBフォントについてご説明します。

WEBフォントの仕組み

端末に直接インストールされているデバイスフォントは、該当フォントがインストールされていない端末で見た際に代替フォントで表示され、端末によって見え方が異なります。そのような問題を避けるためにホームページでは、サーバー上からフォントのデータを読み込んで表示させるWEBフォントを使用しています。
前述のとおりWEBフォントはサーバーから直接データを読み込むため、端末に該当フォントがインストールされていなくても各端末で同じフォントが表示され、どの端末で見てもデザイン性を保つことが可能です。
また、WEBフォントを使用せずに各端末での見え方を揃えるためには文字部分を画像化する必要があり、Googleが文字を認識できないというSEO面での問題だけでなく、拡大した際に荒くなってしまうおそれがあります。一方WEBフォントは、Googleが文字を認識することができる上、ベクター形式のため拡大しても綺麗な状態のまま表示することが可能です。

おすすめのWEBフォント

WEBフォントの仕組みについて理解いただけたところで、ここではおすすめのWEBフォントを2つご紹介します。

Google Fonts

Google FontsはGoogleが提供している無料のWEBフォントサービスです。2022年9月時点で1400を超える種類のフォントが提供されており、特に欧文フォントの種類が豊富です。年々フォントの数が増加しているため、WEBデザイナーの方はこまめにチェックすることをお勧めします。

Google Fonts

Adobe Fonts

Adobe FontsはAdobeが提供しているWEBフォントサービスで、Adobeの契約をしている方であれば誰でも無料で使用することが可能です。2022年9月時点で20,000以上のフォントが提供されています。
また、デザイン性が高い日本語フォントも数多く提供されているため、ホームページだけでなくバナーデザイン等でも活用できます。WEBデザイナーであればAdobeを使用している方がほとんどだと思いますので、ぜひ使用してみてください。

Adobe Fonts

今回のまとめ

ホームページを制作する際に端末にインストールされているデバイスフォントを使用した場合、該当フォントがインストールされていない端末から見ると代替フォントが表示され、異なる見え方になってしまいます。どの端末でも見え方が統一されるよう、ホームページをデザインする際はWEBフォントを使用しましょう。
なお、WEBフォントではないフォントを使用する場合は、端末によって見え方が異なる問題を避けるため、画像化して使用すると良いでしょう。

WEBフォントについてさらに詳しく知りたい方は以下の記事もご覧ください。
ホームページ制作で使えるおすすめのGoogle Fonts5選
WEBデザインで活用できるGoogle fontsの日本語フォント
デザイン性を高める筆記体のおすすめフォント30選