North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
デザイン

Webフォント、どう使う?

こんにちは。デザイナーKです。

最近はWebフォントを使用しているサイトが増えましたね。
WebサイトでのWebフォントの使用方法について、改めてまとめてみたいと思います。

サイトにおけるフォントの種類

Webサイトで表示されるhtmlテキストには、デバイスフォントWebフォント の大きく分けて2種類が存在します。

デバイスフォント…閲覧する環境によって変わる

ユーザーの閲覧環境(デバイス)に依存するため、環境によってフォントの表示のされ方が変わります。
WindowsやMac、iPhoneなど、端末にインストールされているフォントが表示されます。

各デバイスのフォント対応表

ゴシック体
MacWindowsiOSAndroid
メイリオ
游ゴシック
ヒラギノ角ゴ
明朝体
MacWindowsiOSAndroid
MS 明朝
游明朝
ヒラギノ明朝

※2020年11月現在の情報です。
※ Android ではどれも指定されたフォントにならない
→ 各機種によって設定されているフォントが使用される

メリット

元からデバイスに入っているフォントを使用するため、webページの読み込みが早い。

デメリット

フォントが変更されてしまうため、サイト全体のデザインイメージが変わってしまう

Webフォント…どの閲覧環境でも同じように表示される

Webフォントは、あらかじめWebサーバ上に置かれていたり、インターネット上で配布されているフォントデータ自体を読み込んで利用するフォントです。
閲覧するデバイスに影響されずに、指定したフォントで表示することができます。

メリット

  • デザイン性が高い …さまざまな種類があるため、デザインの幅が広がる。
  • SEOに強い …以前は特殊なフォントを使用していた部分はテキストを画像データにして表現していたためテキストとして判別されなかったが、Webフォントは自動翻訳や音声読み上げにも対応可能なため、高いSEO効果が見込める。※読み込むデータが大きい場合は。逆効果の場合もある。
  • レスポンシブwebデザインに適している …フォントは折り返し位置やサイズ調整が自動で行われるため、レスポンシブwebデザインと相性が良い。
  • 更新が簡単 …以前はサイトに変更が生じた場合はデザインデータの画像を修正する必要があったが、Webフォントであればhtmlのように文字の変更のみで更新作業を行うことができる。

デメリット

  • 読み込みが重くなる …複数のWebフォントを使用すると、読み込みが遅くなってしまう。特に日本語フォントは文字数が多いため、容量が大きくなりがち。
  • ライセンス確認などの手間が増える …Webフォントはすべて無料で使用できるわけではないので、フォントごとにライセンスを確認する必要がある。

Webフォントを使用するには?

Webフォントを導入するには、各社が提供しているWebフォントサービスを利用します。
無料・有料のWebフォントサービスをいくつかご紹介します。

無料もしくは有料のWebフォントを使用する

無料のWebフォントサービス

Google Fonts

すべて無料で利用可能で、商用利用にも対応しています。
※筆者調査による情報です。利用規約を確認してください。

Adobe fonts

デザイナーであればAdobe Creative Cloud(以下Adobe CC)のライセンス契約をしている方も多いと思いますが、Adobe CCを契約していれば自由に使うことができます。しかし、再配布は禁止のため
受託して制作したWebサイトでWebフォントを使用することはできません。
受託制作したサイトでWebフォントを使用する場合は、サイト所有者もAdobe CCのライセンスを所持していけなければなりません。

Font Squirrel

商用でも無料で使用が可能です。
※筆者調査による情報です。利用規約を確認してください。

もじでぱ

会員登録のみで無料でフォントが使用可能です。再配布は禁止。 ※利用規約は2020年10月現在のものです

有料のWebフォントサービス

TypeSquare

大手フォントメーカーのモリサワが提供しているサービスです。印刷物などでよく見たことのあるフォントがたくさんあります。

FONTPLUS

ソフトバンク・テクノロジーが提供しているサービス。和文フォントも豊富で、300種類以上のフォントがあります。

有料のWebフォントサービスは、月額課金などのサブスクリプション型がほとんどです。
ランニングコストが発生するため、受託案件ではクライアントにきちんと確認しておく必要があります。

Webフォントを軽量化するには

サブセットという技術によって、Webフォントを軽量化することができます。

サブセット
日本語のフォントは非常用漢字なども含まれており、Webサイトでそのまま使用するとデータ量がとても大きくなります。それを回避するために、必要な文字だけでフォントファイルを生成し軽量化する手法のこと。

こちらによって、フォントが軽量化されるため、Webフォント導入のハードルが下がりました。

まとめ

  • サイトには主にデバイスフォントとWebフォントの2種類がある
  • Webフォントはデバイスフォントに比べ、デザイン性で優位性が高い。
  • Webフォントを導入するには、デメリットも考慮し顧客にも確認する必要がある
    (サイトの読み込みや、ランニングコストなど)

一デザイナーとして、Webフォント、どう使う……?

デザイン表現の幅が広がり、SEOにも配慮された Webフォントはデザイナーとしては積極的に導入したいですが、ライセンス規約なども考慮し、 慎重にすすめていく必要があると感じました。
初めて導入するなら、 Google Fonts などが安心だと感じました!
案件の規模に応じて導入していくのがよさそうです。

K
WRITER:K
カレーが好きなデザイナーです。
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001