この記事では、フォントが Web サイトのスピードに与える影響について説明します。また、シームレスなユーザー体験実現のため、Web フォントを最適化することの重要性を示しています。Monotype Fonts の Web プロジェクトやデジタル広告の効果的活用のためのベストプラクティス、ガイドライン、ヒントをご紹介します。
注記：Web プロジェクトとデジタル広告についての詳細はこちらをご覧ください。
Web サイトやデジタル広告は、美しさ、パフォーマンス、そしてユーザー体験のバランスが重要です。Web サイトは、視覚的な魅力があるだけでなく、あらゆるプラットフォームやデバイスでの優れたパフォーマンス、シームレスなユーザー体験を実現する必要があります。
Web サイトのパフォーマンスに対するフォントの影響
フォントの選択（フォントの数やフォントファイルのサイズなど）が Web サイトの速度に影響を与える場合があります。Web ページを開くと、ブラウザはページを正しく表示するために必要なすべてのリソース（画像、動画、フォントなど）のダウンロードを行います。ブラウザが大きなフォントファイルをダウンロードするには、時間がかかります。
このようなダウンロードの遅れは、ユーザー体験を悪化させる原因になります。読み込み時間の短縮はSEO検索順位やWeb サイトの見やすさの向上につながります。
Monotype Fonts の[MY Library（マイライブラリ）]セクションにある[Web Project（Web プロジェクト）]と[Digital Ads（デジタル広告）」から、Webフォントの整理や最適化ができます。
以下の標準ガイドラインに従って、プロジェクトで利用するフォントを管理することで、ユーザーエクスペリエンスを向上できます。
プロジェクトのフォント予算を設定：プロジェクトのパフォーマンスを適切に管理するため、フォントリソース（フォントの数、フォントバリエーション、文字セットなど）の予算を定義しましょう。必要に応じて、Web プロジェクトとデジタル広告内で、フォントを追加/削除できます。
最適化されたフォント形式を使用：Web 上で、Web Open Font Format（WOFF）や Web Open Font Format 2.0（WOFF2）などの最適化されたフォント形式を使用すると、圧縮率とパフォーマンスを向上させるうえで効果的です。フォントファイルのサイズが縮小されて、読み込み速度が向上するため、読み込み時間の問題が軽減されます。Monotype Fonts の Web フォントはすべて、WOFF および WOFF2 フォーマットで作成されています。
フォントをサブセット化してファイルサイズを縮小：フォントのサブセット化とは、プロジェクトで必要な文字やグリフのみを含め、それ以外は削除することを意味します。これによって、フォントファイルのサイズが小さくなり、Web フォントのパフォーマンスが向上します。Monotype Fontsでは、Webフォントを効率的にサブセット化ができるため、最適なパフォーマンスを実現できます。Web フォントのサブセット化については、こちらの記事をご参照ください。
フォントファイルの数を最少化：Web サイトで使用するフォントファイルの数を減らすことで、ブラウザがダウンロードするデータ量を削減することができ、Web サイトの表示速度向上が可能となります。Web サイトのパフォーマンスを向上させるには、使用するフォントファミリー、ウェイト、スタイルを必要最小限にする必要があります。また、バリアブルフォントを使用して、1 つのファイルに複数のスタイルを含めることもご検討ください。
注記：当社は、このガイドラインに基づき、プロジェクトのパフォーマンスが低下しないように、Web プロジェクトまたはデジタル広告に、同じフォントファミリーのフォントスタイルを最大 4 つまで追加できるようにしています。ただし、5 つ以上のスタイルを追加したい場合、同じ Web プロジェクトまたはデジタル広告にさらにフォントを追加することができます。
フォントの使用状況を確認：使用しているフォントを定期的にチェックし、どのフォントが読み込まれているか、それらが Web サイトのパフォーマンスにどのような影響を与えているかを確認しましょう。そうすることで、プロジェクトに不要な負荷をかけているフォントを Web プロジェクトやデジタル広告フォルダーから削除することができます。
フォントリクエストを早めに配置：フォントリソースを適切に順序付けることで、フォントが可能な限り早く読み込まれ、重要なアセットの読み込みを妨げないようにしましょう。「add to（追加）」オプションや「favorite（お気に入り）」オプションを使用し、必要なフォントを Web プロジェクトやデジタル広告フォルダーに追加してください。