この記事は4分で読めます

Webフォントってなに？

かすみ

あとで読む

フォントはデザインの人格と言っても良いほど、デザインをする上で重要な要素です。今回は、デザイナーならば知っておきたいWebフォントについて解説します。

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

Webフォントとは、サーバーからフォントファイルを読み込み、Webサイト上に表示させる仕組みのことです。

通常Webサイトは、各端末にインストールされているフォント(デバイスフォント)の中からCSSで指定されたフォントを表示する仕組みになっています。そのため、端末によってはこちらの意図したフォントが表示されず、デザインの印象が変わってしまう可能性があります。

その点、Webフォントはあらかじめフォントデータを読み込んでおくので、どの端末でも同じフォントを表示させることができるのです。

Webフォントを使用するメリットとしては、以下があります。

使用する端末を気にすることなくデザインできる

Webフォントは事前にフォントデータを読み込んでおくので、端末の種類を気にすることなくデザインすることができます。

拡大しても綺麗に表示される

画像で文字を作成すると拡大した際に画質が荒くなってしまう場合がありますが、Webフォントでは文字として表示しているので綺麗な画質を保つことができます。

SEO対策ができる

画像で文字を載せた時と比べ、Webフォントは文字情報として認識されるので、SEO対策として有利になります。

・SEO対策とは・・・SEOとは、Search Engine Optimization（検索エンジン最適化）のことを指し、Webページを検索した際に上位に表示させる施策を「SEO対策」と呼びます。

レスポンシブ対応がしやすい

画像の場合、端末に応じて大きさを変えると画像が小さい時に文字が読みにくくなってしまいます。それに対しWebフォントは、端末幅に応じてテキストが折り返されたり、CSSでフォントの大きさも変えることができるのでレスポンシブデザインがしやすくなります。

ユーザビリティが向上する

Webフォントは文字情報として認識されるので音声読み上げ機能や自動翻訳に適しています。

修正、更新作業がしやすい

画像の場合、画像自体を作り変えなければいけませんが、WebフォントならばHTMLで文字を書き換えるだけで編集、更新が可能です。

Webフォントのデメリットとしては、以下があります。

利用料金がかかることがある: Webフォントの中には有料のものもあり、従量課金（PV数依存）のフォントの場合、閲覧数が増えるに応じて料金が増してしまうので使いどころを慎重に検討してから利用しましょう。
表示速度が遅い場合がある: 日本語フォントは欧文フォントに比べ文字量が多く、表示されるまでに時間がかかる場合があります。
日本語対応のものが少ない: 日本語は漢字、ひらがな、カタカナと使う文字の種類が多いため、欧文フォントに比べて選択できる種類が少なくなっています。
利用規約に注意が必要なものがある: 無料フォント、有料フォントともにそれぞれ利用規約が設けられている場合があります。商用利用不可などフォントによって規約が設けられているので、利用前に必ず確認しておきましょう。