TanakaYuta SEO Div. コンサルタント
現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇 効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。
Webで何らかの事業を行ったり、コンテンツを更新したりする際に使用することが多いWebフォントですが、フォントの中でも比較的重いことが特徴です。そのため、最適化されたWebフォントを使用しなければ、Webサイトやページスピードが遅くなるデメリットが生じます。
本記事では、Webフォントの概要や高速化のために知っておくべきこと、併せてサブセット化についてご説明します。また、日本語Webフォントのサブセット化方法に関してもご紹介しますので、高速化のためにもぜひ参考にしてください。
無料の高速化診断、実施中！
「PageSpeed Insightsのスコアが低い…」「どう改善すれば良いかわからない…」
など、表示速度の課題を感じている方に、表示速度が遅いページ一覧と原因・改善施策がわかる無料の高速化診断を実施中！サイトの現状を知りたい方、改善施策が知りたい方は、ぜひお気軽にお申し込みください。
目次
Webフォントとは？
まず、Webフォントの概要についてご説明します。Webフォントとは、サーバー上に予め置かれているフォントや、インターネット上で提供されているフォントのことです。WebフォントはCSS3にて策定された技術になります。
一昔前のWebサイトでは、Webサイトを制作する段階で、予め要素ごとに使用するフォントを指定していました。しかし、予め指定する上記の方法では、Webサイトを閲覧しているユーザーのPC等にフォントがインストールされていなければなりませんでした。その結果、製作者が指定した見え方とは異なる結果で表示されてしまうこともあったのです。
したがって、これらの問題を解決できるのがWebフォントです。Webフォントでは、読み込みの段階でフォントデータをネットワークからダウンロードできるため、製作者の意図するフォントをユーザーに表示できます。
Webフォント高速化のために知っておくべきこと
ここまで、Webフォントの概要をご説明しました。ここでは、Webフォント高速化のために知っておくべき下記2つをご紹介します。
- 使用しない文字と書体を読み込まない
- 使わないWebフォントを把握する
それぞれ順番に見ていきましょう。
使用しない文字と書体を読み込まない
まずは、使用しない文字と書体を読み込まないことが大切です。たとえば、ページ内の特定の一部にしかWebフォントを使用しないとします。そこで、titleタグしかWebフォントを使用しないのに、ページ内のすべてでWebフォントが読み込まれる記述がされているなどの例が挙げられます。
この場合、当然ながらWebフォントはtitleタグのみで良いため、その他が読み込まれる分表示速度は遅くなります。これらを防ぐためにも、必ず使用しない文字と書体は読み込まない記述をするようにしましょう。
使わないWebフォントを把握する
次に、使用しないWebフォントを把握することも大切です。しかし、前提として使用しないWebフォントが分からない方も多いのではないでしょうか。たとえば、titleタグなど特定の一箇所にのみWebフォントを使用するのであれば、使用しないWebフォントを把握するのは容易かもしれません。しかし、リード文や本文など、至るところでWebフォントを使用するのであれば、使用しないWebフォントを把握するのは非常に困難です。
そこで有用なのが、日本語のWebフォントのそれぞれの特徴を把握することです。
- JIS第1水準漢字
- JIS第2水準漢字
- ひらがな
- カタカナ
- 全角英数字
- 半角英数字
- 記号
日本語Webフォントは上記の種類に分けられるため、それぞれの特徴を理解し、使用しないで済む文字列を特定することから始めましょう。特に、日本語Webフォントは漢字が非常に多いため、すべてを読み込むと高速化に悪影響が出ます。したがって、日本語Webフォントの種類を含め、使用しない漢字も特定できれば確実に高速化は実現できると言えます。
サブセット化とは？
先程、日本語Webフォントは数が多いため、使用しない文字列を把握し、使用する文字のみを特定することが大切だと解説しました。そこで有用なのが、日本語Webフォントのサブセット化です。
サブセット化とは、使用する文字のみが集約されたフォントファイルを作成することです。サブセット化によって使用する文字のみがファイルに入っているため、不要な文字の読み込みをしなくて良くなり、結果高速化が図れるようになります。
日本語Webフォントのサブセット化方法
ここからは、上述した日本語Webフォントのサブセット化方法をご説明します。手順は下記のとおりです。
- フォントのダウンロード
- フォントメーカーを使う
- woffに変換する
それぞれ順番に見ていきましょう。
フォントのダウンロード
まずは、使用するフォントをダウンロードします。ここでは、例として「M+PLUS+1p」を使用すると仮定します。M+PLUS+1pのサイト内を進んでいくとttfファイルをダウンロードできます。ファイルの拡張子は「TrueTypeフォント：.ttf、.ttc」にしておきましょう。
フォントメーカーを使う
フォントメーカーとは、ファイルをサブセット化できるツール（システム）のことです。「サブセットフォントメーカー」と呼ばれるツールがあるので、こちらをダウンロードします。次にダウンロードしたttfファイルを、「作成元フォントファイル」として選択します。
「作成後フォントファイル」に、PC内の保存する場所を指定し、作業を開始すればサブセット化が完了です。
woffに変換する
最後に、上記で作成したフォントファイルを、woffに変換しましょう。これは、Webフォントとして使用するには、woffにする必要があるためです。方法は複数ありますが、「WOFFコンバータ」と呼ばれるツールがあるため、手順に沿って変換をしましょう。
最後に、指定ディレクトリに上記で作成したwoffファイルを配置し、CSSでWebフォントの記述をすれば高速化は完了です。
まとめ：Webフォントの高速化を実現しましょう
本記事では、Webフォントの概要や高速化のために知っておくべきこと、実際の手順を解説しました。特に日本語のWebフォントは数が非常に多く、すべてを読み込んでしまうとページスピードに悪影響が出ます。
それらを防ぐためにも、本記事で解説したサブセット化の方法を実践し、Webフォントの高速化を実現してみてはいかがでしょうか。
高速化診断 & 表示速度改善でユーザー体験とCVRを向上！
デジタルアイデンティティでは、Webサイトの表示速度に課題を感じている企業様向けに、無料の高速化診断とフロントエンドからインフラまで一貫対応する表示速度改善サービスを提供しています。
表示速度が遅いページ・原因が一覧でわかる高速化診断でサイトの現状を徹底分析。PageSpeed Insightsのスコア改善はもちろん、画像・CSS/JS・サーバー処理・インフラ最適化まで、技術力と実績に裏打ちされた幅広い施策で、SEO評価やCVR、UI/UXを総合的に底上げします。
こんなお悩み、ありませんか？
- まずはサイトの現状を診断してほしい…
- PageSpeed Insightsのスコアが低く、改善したい…
- ユーザー離脱や直帰率が高く、表示スピードが原因かもしれない…
- 高速化に詳しいエンジニアが社内にいない…
- 対策したがスコアが上がらない、改善方法がわからない…
多くの企業サイトやLP、ECサイトなどで成果を上げてきた表示速度改善のプロフェッショナルが、貴社サイトの課題を根本から解決します。
