Webコンサルタントの松崎です。
これまで「表示速度の改善はユーザーへの配慮で一番大事です」や「画像の軽量化のやり方」、「次世代画像形式WebPやAVIFのメリットと変換方法」、「過剰なモーションの見直し（JavaScript最適化）」など、ホームページの表示速度を改善するための具体的な方法をご紹介してきました。
今回は、意外と見落とされがちな表示速度低下の原因「Webフォント」について説明します。
フォントはページの見た目の印象を大きく左右するものですが、使い方を間違えると表示速度に悪影響を与えます。どうすれば「デザイン性」と「表示速度」のバランスを取れるのか、一緒に見ていきましょう。
Webフォントとは何か？
あなたは「フォント」と聞くと、何を思い浮かべますか？
フォントとは文字の形や太さ、デザインのことです。
手書きの手紙では、人それぞれに個性的な「字体」がありますよね。パソコンやスマホでも同じように、文字の見た目を変えることができます。
Webフォントとは、インターネット上で利用できる特殊なフォントのことです。
普通はパソコンやスマホには限られた種類のフォントしかインストールされていません。でも、Webフォントを使えば、閲覧しているユーザーのスマホやPCにインストールされていないフォントでもホームページの文字として表示できるものです。
簡単に言うと、「どのデバイスでも同じ見た目の文字を表示できる仕組み」です。
Webフォントのメリット
Webフォントには、多くのメリットがあります。
- ブランドの個性を表現できる
- どのデバイスでも同じデザインで表示される
- 読みやすいフォントで閲覧体験を向上できる
- 特殊な言語や記号も美しく表示できる
- デザイン全体の統一感が出せる
Webフォントを使うことで、ブランドの世界観を一貫して表現できます。
また、ユーザーのデバイスに依存せず、デザイナーが意図した通りの見た目で表示できるので、ブランドイメージを正確に表現することができます。また、視認性や可読性に優れたフォントを選ぶことで、ユーザーの読みやすさを向上させて、内容を理解しやすく配慮することもできます。
Webフォントの種類
主なWebフォントサービスには以下のようなものがあります。
- Google Fonts（無料で利用できる多数のフォント）
- Adobe Fonts（有料のクリエイティブクラウド契約で利用可能）
- フォントプロバイダーの商用Webフォント（モリサワ、フォントワークスなど）
- 自前でサーバーにフォントファイルを設置する方法
日本語フォントの場合、漢字が多いため、フォントファイルのサイズが非常に大きくなりがちです。これが表示速度が遅くなってしまう大きな要因になっています。
Webフォントが表示速度に与える影響
Webフォントは見た目の美しさを追求できる反面、表示速度の低下に大きく影響します。
表示速度低下の主な原因
表示速度低下の主な原因として、次の点が考えられます。
- フォントファイルのサイズが大きい
- 追加のHTTPリクエスト
- FOIT（Flash of Invisible Text）
- FOUT（Flash of Unstyled Text）
【フォントファイルのサイズが大きい】
特に日本語フォントは、何千もの文字を含むため、ファイルサイズが1MB〜4MB以上になることもあります。
これは中サイズの画像5〜20枚分に相当します。英語など、アルファベットだけのフォントと比べると、漢字・ひらがな・カタカナを含む日本語フォントは文字数が桁違いに多いため、ファイルサイズも必然的に大きくなります。
【追加のHTTPリクエスト】
Webフォントは外部サーバーから読み込まれるため、追加の通信が必要になります。
特に遅い通信環境では、この時間が無視できません。ホームページの表示プロセスで、HTML、CSS、JavaScriptに加えて、さらにフォントファイルのリクエストが発生するため、表示完了までの時間が長くなってしまいます。
【FOIT（Flash of Invisible Text）】
フォントが読み込まれるまで文字が表示されない現象です。
ユーザーは白い画面を見続けることになります。この状態では、ユーザーはコンテンツを読むことができないばかりか、ページが正しく読み込まれているのかどうかも分かりません。ストレスを感じたユーザーが離脱する原因になります。
【FOUT（Flash of Unstyled Text）】
フォントが読み込まれる前に、一時的にデフォルトフォント（普通のフォント）で表示される現象です。
読み込み完了時に文字のレイアウトが崩れることがあります。フォントの種類によって文字幅や高さが変わるため、レイアウトが突然変化すると、ユーザーが読んでいた位置を見失うことがあります。これも使いやすさを大きく損なう要因です。
こういった問題はスマホユーザーにとって問題になります。電波の弱い場所では、Webフォントの読み込みに数秒から数十秒かかることもあります。その間、ユーザーはずっと待たされることになります。
Webフォントを最適化する5つの方法
Webフォントの表示速度への影響を最小限に抑えるには、いくつかの対策ができます。
1. 必要な文字だけを読み込む（サブセット化）
日本語フォントには7,000文字以上の漢字が含まれていますが、実際にホームページで使用するのはその一部です。よく使われる300〜500文字程度に絞れば、フォントファイルのサイズを大幅に削減できます。
【サブセット化のメリット】
- ファイルサイズが80〜95%削減できる
- 読み込み時間が大幅に短縮される
- 一般的な漢字のみを含めれば十分な場合が多い
サブセット化する際は、ホームページ全体で使われている文字をすべて把握する必要があります。漏れがあると、その文字だけデフォルトフォント（普通のフォント）で表示されてしまいます。
2. フォントの種類・ウェイトを制限する
デザイナーは様々なフォントやウェイト（太さ）を使いたがりますが、それぞれが別のファイルとして読み込まれることを忘れがちです。
【フォント制限のポイント】
- ホームページ全体で使うフォントを1〜2種類に限定する
- 太さ（ウェイト）も必要最低限に絞る（例：Regular、Boldのみ）
- 特殊なスタイル（斜体など）も必要なければ省く
フォントの種類や重さを制限することは、単に表示速度の向上だけでなくデザイン的な洗練さにも繋がります。
フォントを1〜2種類に絞り、必要なウェイトだけを使用することで、視覚的な一貫性が生まれ、ユーザーの読みやすさも向上します。また、過剰なフォントバリエーションは情報の階層構造を曖昧にし、かえってデザインの焦点がぼやけてしまうことがあります。
3. フォント表示方法を最適化する
CSSのfont-displayプロパティを活用して、フォント読み込み中の表示方法を制御できます。
【主なfont-displayの値】
- swap：フォント読み込み中はシステムフォントで表示し、読み込み完了後に切り替える（FOUTは発生するが、テキストがすぐ表示される）
- optional：通信環境が良い場合だけWebフォントを使用し、悪い場合はシステムフォントを使用
- fallback：短時間だけ不可視状態を許容し、それ以上かかる場合はシステムフォントに切り替える
スマホユーザーが多いホームページでは、テキストがすぐに表示されるswapが良いと思います。
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
「swap」設定を使えば、Webフォントの読み込み中でもすぐに代替フォントでコンテンツが表示されるので、ユーザーは待たされることな見られるようになります。Webフォントが読み込まれたときに見た目は切り替わりますが、使いやすさが損なわれることはほとんどありません。
4. フォントファイル形式を最適化する
Webフォントには様々なファイル形式があり、最新の形式を選ぶことで容量を削減できます。
【主なフォントファイル形式】
- WOFF2：最も圧縮率が高く、最新のブラウザはほぼ対応
- WOFF：圧縮率が高く、広いブラウザで対応
- TTF/OTF：圧縮率は低いが、互換性が高い
- EOT：古いInternet Explorer向け
最新のWOFF2形式は、従来のTTF形式と比べて30〜50%ほどファイルサイズを削減できます。ただし、古いブラウザでは表示されない可能性があるため、複数の形式を用意しておくとよいでしょう。
5. フォントのプリロードを活用する
重要なWebフォントは、HTMLの<head>タグ内でプリロード指定することで、優先的に読み込むことができます。
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>
これは、特に重要なフォント（ホームページ名やメインタイトルに使うフォントなど）に対して効果的です。ただし、プリロードしすぎると他のリソースの読み込みが遅れるため、本当に必要なものだけに限定しましょう。
代替方法：システムフォントの効果的な利用
Webフォントにこだわらなくても、システムフォント（閲覧者のデバイスに既にインストールされているフォント）を効果的に使う方法もあります。
フォントスタックの活用
複数のフォントを優先順位をつけて指定して、利用可能なものを表示する方法です。
body {
font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
これは上から順に「このフォントがあれば使って、なければ次のフォントを」と指示するものです。最新のシステムフォントは十分にキレイで、読みやすいものも多いです。
AppleやGoogleでは優れたシステムフォントを提供しているので、賢く組み合わせれば、Webフォントを使わなくても美しいデザインを表現できます。
制作会社に依頼する際のポイント
ホームページの制作やリニューアルを外部に依頼する際は、Webフォントについてもきちんと伝えて依頼することが大切です。
【制作会社への依頼ポイント】
- Webフォントの表示速度への影響を理解しているかを確認する
- サブセット化の実施を明確に依頼する
- フォントの種類・ウェイトを必要最小限に抑えるよう指示する
- font-displayプロパティの設定を依頼する
- 代替案としてシステムフォントの活用も検討するよう伝える
残念ながら、表示速度に全く配慮しない制作会社も多く存在します。最適化の方法を知らないので「デザイン重視」と言って、重いWebフォントをそのまま使うケースがほとんどです。契約前に必ず確認しておきましょう。
Webフォントの利用判断チェックリスト
以下のチェックリストを参考に、Webフォントを使うべきかどうか判断してみてください。
- ブランディング上、特定のフォントが必須か？
- ターゲットユーザーはどんな環境でホームページを閲覧するか？
- コンテンツのテキスト量はどれくらいか？
- ページ表示速度でユーザーに我慢させないか？
すべての質問に肯定的な答えが出ない場合は、システムフォントの活用も検討する価値があります。
ユーザーファーストでフォントを選ぶ
Webフォントの選択は、単なるデザインの問題ではなく、これも「ユーザーへの配慮」の問題です。
インターネットを使うすべての人が、高速回線や最新デバイスを持っているわけではないということ。通勤電車の中や地方の電波の弱い場所、データ通信制限がかかっている状況など、様々な環境でホームページは閲覧されます。
「デザインの美しさ」と「使いやすさ」は対立するものではありません。むしろ、本当に優れたデザインとは、見た目の美しさと機能性を両立させたものです。
フォントも同じで「見た目の個性」と「素早く読める」ことの両方が大切です。
あなたのホームページを訪れたユーザーが、ストレスなく情報を得られるよう、フォントの選択と最適化には是非こだわってください。
美しさと速さを両立するフォントの最適化
Webフォントは、ホームページに個性や洗練さを加える素晴らしい機能です。しかし、何も考えずに使うと、表示速度がすごく遅くなり、ユーザーに使いにくさを強制させることになってしまいます。
重要なことは、デザイン性と表示速度のバランスを取ることです。
サブセット化、フォント種類の制限、font-displayプロパティの活用など、様々な最適化手法を組み合わせて、「見た目の魅力」と「使いやすさ」を両立させましょう。
また、すべてのケースでWebフォントが必須というわけではありません。システムフォントを効果的に活用することで、読み込み時間を短縮しながらも、十分に美しいデザインを実現できます。
ホームページはどんなに美しいフォントを使っていても、読み込みが遅すぎて離脱されてしまっては、その美しさを伝えることすらできません。ユーザーの環境や使いやすさを第一に考えて、最適なフォント戦略を選びましょう。当社ブログでユーザーに優しい親切なWebサイトにするための取り組みについて書いていますので、是非あわせてご覧いただければと思います。
表示速度に配慮したホームページを制作したい、表示速度を改善したいとお考えの方は、当社のWebコンサルティングで、ホームページ改善および集客をご検討ください。ユーザーに優しく、かつ魅力的なウェブサイト作りをお手伝いいたします。
初回相談は無料です。
いつでもお気軽にお問い合わせください。
