2023.10.03
イベントレポート
Designship 2023に参加しました。
FONTPLUSの勉強会に参加しました。
こんにちは！デザイナーの宮治（みやじ）です！
先月、WEBフォントサービス「FONTPLUS」の方々にオンライン勉強会を開催していただきました。
というのも、WEBフォントとデバイスフォントの使い分けに悩んでいたからです。
デバイスフォント・WEBフォントって？
まずは、デバイスフォントとWEBフォントについておさらいしておきましょう。
デバイスフォント
デバイスフォントはシステムフォント・OSフォントとも呼ばれ、スマホやPCの中にあらかじめ搭載されているフォントのことです。
表示速度が早いということが最大のメリットですが、デバイスによって搭載されているフォントが異なるため、ユーザーに共通のイメージを与えたい場合は向きません。
また、フォントによって文字間や行間が異なるので、読みやすさが変わってきます。
WEBフォント
Webフォントは、OS、端末、バージョンの違いに左右されることなく、同じフォントで文字を表示できます。
そのため、ユーザーに共通のイメージを与えることができます。
また、
「ここは何文字くらいで改行されるように・・・」とか
「病院のサイトだからUDフォントにしよう」など
制作者がある程度予測を立てたり、サービスやユーザーに合わせたフォントを選んで使用することができます。
WEBフォントを使うデメリット
ただし、WEBフォントにもデメリットもあり、その中でも気になっていたのが表示速度です。
表示の際に若干ちらつくときがあります。
Wi-Fiの時は気にならないのですが、モバイルデータ通信の時はちょっと気になるかもしれません。
デバイスフォントとWEBフォントの比較
デバイスフォント
| メリット | 表示速度が早い |
|---|---|
| デメリット | デバイスによってフォントが異なるので、ユーザーに共通のイメージを与えにくい |
| こんなサイトに最適 | 文章量が多いサイト（または今後どんどん増えるであろうサイト） モバイルからのアクセスが多いサイト |
WEBフォント
| メリット | ユーザーに共通のイメージを与えることができる |
|---|---|
| デメリット | 表示速度がやや遅い |
| こんなサイトに最適 | ブランドサイト ユニバーサルデザインが求められるサイト |
FONTPLUSにCDNを利用した新プランが登場
上記でも書いたように、読み込み速度が気になるWEBフォント。
どうやら読み込みの仕方によって、表示速度が変わってくるようで、スマートライセンスの場合、若干のちらつきがありました。
スマートライセンスの場合、フォントの読み込みにJavaScriptを利用しているそうですが、新しく出た新プラン「エンタープライズプラン＞静的サブセッティング」はJavaScriptではなく、CDNを利用しているので読み込み速度が早いようです。
フォント配信システムにはCDNを活用。
高速かつ安定したパフォーマンスを実現しました。また従来のJavaScriptによる動的サブセッティング方式ではなく、あらかじめ最適化したフォントをCSSで読み込む「静的サブセッティング方式」を採用しています。モダンなフレームワークを利用したフロントエンドでも組み込みが容易になりました。
FONTPLUSより出典
ということで、Googleフォントでも採用されているCDNと呼ばれる読み込み方法を使用し、且つCDNの中のフォントをグループ化して、必要なファイルのみ読み込む・・ということらしいです。
ちなみに、必要なファイルのみ読み込めるように、ファイルをグループ化することをサブセット化といいます。
それでも表示速度が気になる時は・・・
- フォントの種類を2種類くらいまで絞る
- 1つのフォントに対して、使用するウエイトを2種類までに絞る
- バブリアルフォントを使用する
- タイトルだけWEBフォントにし、本文はデバイスフォントにするなど、部分的にWEBフォントを使用する
以上、フォント勉強会についてでした。
FONTPLUSのみなさん、ご協力ありがとうございました。
WEBフォントを導入して、ブランディングやユーザビリティを高めていきたいですね。
