#23「Webフォントと表示パフォーマンス」
表示パフォーマンスへの影響を最小限にとどめることができる、新しいWebフォントやCSSのテクニックについてお話ししました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは！
- 古川
- こんにちは！
- 橋本
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
司会は橋本が務めさせていただきます。今回のお相手は古川さんです！古川さん、よろしくお願いします！ - 古川
- よろしくお願いします！
- 橋本
- いきなりなんですが、最近新しいデザインの紙幣が公開されたじゃないですか。
- 古川
- めっちゃいきなりですね笑えっと…？1万円札と5千円札と千円札のデザインが変わりましたね！
- 橋本
- はい。そのそれぞれの紙幣の数字のフォントにユニバーサルデザインフォントが使用されているということが少し話題になっていました。
- 古川
- はじめて見たときは、なんか見た目に違和感があって、やっぱちょっとびっくりしました。
- 橋本
- そうですよね。弱視などの障害のある方含め、どんな人が見ても見やすいフォントとしてユニバーサルデザインフォントが採用されたみたいなんですが、フォントは見やすさとか対象を印象付けるためにも必要な要素ですよね。
- 古川
- そうですね。
- 橋本
- Webデザインでもフォントはとても重要で、とくにデザイン性の高いWebフォントは今や多くのサイトで使われています。Webフォントはいいところがたくさんあるんですが、当然欠点もいくつかあって、それを解決する手段としてもさまざまな方法が提案されています。
ということで今回は、そんなWebフォントにフォーカスした話をしようと思います。
はじめにWebフォントについて簡単に説明すると、Webサーバー上に置いてあるフォントファイルを指します。HTMLテキストで使えるフォントっていうのは大きく2種類あって、インターネット経由で利用するWebフォントと、もうひとつ、パソコンやスマホにインストールされているデバイスフォントがあります。
Webフォントはインターネット経由で取得するので、デバイスフォントとは異なってデバイスにないフォントも表示できるという利点があるんですけど、とくに日本語フォントは総じてフォントサイズが大きい傾向にあるので、表示パフォーマンスが懸念されます。 - 古川
- 英語のフォントと比較すると、ひらがな、カタカナ、漢字という風に膨大な数の文字がありますもんね。
- 橋本
- そうですね。加えて英語のアルファベットは1文字1バイトなのに対して、日本語は1文字当たり2～3バイトあるので、それもファイルサイズが大きくなる要因となっています。
そんなフォントファイルをWebページの読み込みと同時にダウンロードを行うので、ページの読み込み速度に直に影響を及ぼしてしまうんですよね。 - 古川
- フォントファイルの取得に時間がかかると、FOUTとか、FOITとかが起きちゃいますよね。
- 橋本
- そうですね。それぞれ簡単に説明すると、FOUTは「Flash of Unstyled Text」の略称で、画面表示時にデバイスフォントから、読み込みが完了したWebフォントに切り替わる現象です。この現象が起きると、画面がガタついたように感じます。
もうひとつのFOITは「Flash of Invisible Text」の略称で、テキストが表示されずに、フォントの読み込みが終わった時に突然表示される現象になります。フォントの読み込み完了までコンテンツが一切表示されません。 - 古川
- それぞれ、表示パフォーマンスやユーザー体験に大きく影響するので、そういう現象っていうのは回避したいですよね。
- 橋本
- そうですね。こういったWebフォントの表示の仕方に関する改善策のひとつとしてCSSの@font-faceというものがあります。ここからは@font-faceの詳細についてお話ししていきます。
@font-faceとはWebフォントを利用するための規則で、サーバー内にあるフォントファイルを指定して、任意のフォント名を名付けることができます。
@font-face内で指定できる項目のことをディスクリプタと呼ぶのですが、Webフォントを読み込むときの指定は、srcディスクリプタを使用します。srcディスクリプタでは、Webフォントの拡張子ごとにURLを複数指定ができるので、一部の拡張子が未対応のデバイスにも配慮することができます。 - 古川
- Webフォントが読み込めなかった時のフォールバックとして、srcディスクリプタにデバイスフォントを設定することもできます。
- 橋本
- そうですね。続いてはWebフォントの表示方法の指定ができるfont-displayディスクリプタです。こちらは指定できる値として、auto、block、swap、fallback、optionalがあります。
- 古川
- 普段よく使うのはswapですかね。よく、blockと比較されたりします。
- 橋本
- そうですね。swapはWebフォントが読み込まれるまでの間、フォールバック用のフォントを表示して、読み込まれ次第Webフォントと入れ替える指定です。
それに対してblockはWebフォントの読み込みが終わるまで、Webフォントを使用するコンテンツが表示されずに、Webフォントの読み込みが終わってはじめてコンテンツが表示されるようになるという指定になります。 - 古川
- それぞれどんな場面で使い分けができるんでしょうか。
- 橋本
- そうですねCore Web VitalsのFirst Contentful Paintを重視する場合は、最初からテキストが表示されている必要があるので、ページ読み込み後すぐにフォールバック用のフォントが表示されるswapの指定が有効だと思います。Googleなどでもその理由からswapの指定を標準としているみたいです。
blockはフォントが読み込まれるまでコンテンツが表示されないので、最初の表示を犠牲にしてでもガタツキを発生させたくないといった場合で使用されるのかなと思います。 - 古川
- なるほど。フォントが表示されるまでコンテンツが表示されないのは、ユーザー体験的に致命的だと思うので、採用するとしたらどちらかといえばswapのほうがよさそうですね。
- 橋本
- そうですね。でもswapはガタツキによってCumulative Layout Shiftのスコアを悪化させてしまうので、それはそれで一長一短なんですよね。
- 古川
- うーん、なるほど、難しい問題ですよね。
- 橋本
- はい。ただ、現在仕様策定中のCSS Fonts Module Level 5では、その問題を解決するための新たなフォントディスクリプタが4つ登場しました。
紹介すると、1つ目はフォントのベースラインより上の高さを調整可能なascent-override、2つ目はベースラインより下の高さを調整可能なdescent-override、3つ目は行と行の間の隙間を調整できるline-gap-override、そして4つ目はフォントのアスペクト比を調整可能なsize-adjustです。
この4つのプロパティを使ってフォールバック用のフォントを@font-faceとして定義して、Webフォントのレイアウトに可能な限り近づけることで、フォントが切り替わる際のガタツキによるCumulative Layout Shiftの上昇を抑えることができます。 - 古川
- 今聞いた4つのプロパティだと、上下の高さや行間とか、上下方向のみの調整だったと思うのですけど、字送りみたいなフォントサイズの横のサイズ感も調整できるものがあるんでしょうか。
- 橋本
- まだletter-spacingのような文字間を調整できるディスクリプタっていうのは存在しないみたいなので、Webフォントによっては文章の行数が合わず増減によってレイアウトシフトが発生してしまうかもしれないですね。
- 古川
- なるほど。文字間を調整するディスクリプタみたいな仕様が策定されるのがかなり待ち遠しいですね。
- 橋本
- そうですね。
続いてはバリアブルフォントについて話したいと思います。
こちらは先ほどの@font-faceとは別のアプローチでフォントファイルの容量を削減することができます。
こちらのバリアブルフォントの詳細については、古川さんに調べてきてもらいました！ - 古川
- はい。簡単に紹介すると、バリアブルフォントとは、文字の太さや字幅、傾斜などをCSSで自由に調整できるフォントです。通常のフォントの場合は、太さや字幅など、通常とは異なるスタイルのフォントを使用するときは、そのスタイルのフォントファイルを別途用意する必要がありました。
- 橋本
- つまりバリアブルフォントでは今言った異なるスタイルを、1つのフォントファイルで扱うことができて、その分読み込み量が削減できるというわけですね。
- 古川
- そうなんですよね。スタイルなんですが、太さや字幅など、スタイルの最小値と最大値の間が線形補完されることによって、フォントスタイルの細かい調整ができる仕組みになっています。
- 橋本
- その線形補完ってどういうものなんですか？
- 古川
- 今までは、たとえば太さだと、大まかに細い・太い・普通っていうように、段階的な区分けがされていたじゃないですか。
それとは違って、たとえば音量調整のように一直線上で連続的に値を指定することを線形補完といいます。
バリアブルフォントで調整できる太さや幅などのパラメーターを軸と呼ぶんですけど、バリアブルフォントではこのほかに、オプティカルサイズ、イタリック、傾きの5つの可変可能な軸が存在します。 - 橋本
- なるほど。バリアブルフォントはCSSで実際にどうやって使うんですか？
- 古川
- バリアブルフォントを使用するには、@font-faceでフォントを定義して、その後適用したいクラスやセレクタにfont-variation-settingsプロパティを使用します。
- 橋本
- 基本的には、ほかのWebフォントと同じように読み込みができるんですね。利用上の注意点とかってありますか？
- 古川
- そうですね。たとえば、仕様にある5つの軸とは別に、フォントによってカスタム軸っていうのが独自に定義されていることがあったりだとか、軸の最小値、最大値がフォントごとに異なるので、その辺を利用する前にしっかり確認しておく必要があります。
- 橋本
- なるほどです。CSSでいろいろ調整できるということは、アニメーションをさせることもできそうですね。
- 古川
- もちろんできます。ただ、バリアブルフォントの設定をアニメーションさせるとレンダリングパフォーマンスに悪影響を及ぼす可能性があるそうなので、アニメーションでスタイルを変更しすぎないほうがよさそうです。
- 橋本
- なるほど。案件導入を見据えて、バリアブルフォントについての研究が必要そうですね。
- 古川
- はい。バリアブルフォントは最近源ノ角ゴシックなど日本語対応のものが増えてきてますので、私もこの機会に触れてみようと思います！
- 橋本
- はい。ここまでWebフォントに関する現状の課題やCSSによる解決方法についてお話してきましたが、いかがでしたでしょうか。
Webフォントって表示パフォーマンスに悪影響を及ぼしてしまう可能性があるので使用することに抵抗があったんですけど、今回紹介した技術を使えばある程度懸念も払拭できそうですよね。 - 古川
- そうですね。冒頭に話したユニバーサルデザインフォントのような、お年寄りや障害のある方含めすべてのユーザーに寄り添えるフォントを、表示パフォーマンスとトレードオフにすることなく、Webデザインにも取り入れられたら素敵だなと思います。
- 橋本
- そうですよね。ユニバーサルデザインフォントに限らず、デザイン性に富んだフォントを気兼ねなくWebサイトに実装するために、Webフォントの表示を最適化するテクニックを磨きたいと思います。
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、Google Podcast、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。
そのほか、 ご意見、ご感想などありましたら 「#ミツエーテックラジオ」で呟いていただけると嬉しいです！
それでは今日はこの辺で！ありがとうございましたー！ - 古川
- ありがとうございました！