3ユーザーに優しい日本語Webフォントとの付き合い方CSSUXCSS3UIwebfontはじめに日本語Webフォントはデータ量が非常に大きいため、何も考えずに使うとユーザー体験を悪化させてしまいます。この記事では、ユーザーに優しく日本語Webフォントを使うために考えること/できることを紹介します。主観的な内容を含む(特に前半)ので、あくまで考え方の一つとして参考程度に読んでいただければ幸いです。)(ビジュアルがメインのコンテンツでなければ)日本語Webフォントはできるだけ使わない最近はスマートフォンでの閲覧が多くなっているので、通信量を消費するコンテンツは今まで以上にそのトレードオフを考慮する必要があります。サイトに来るユーザーは何を求めているでしょうか?映画のサイトであれば、フォントが世界観を伝える助けになってくれるかもしれません。それがニュースサイトだったら?ユーザーが知りたいのは記事の内容であって、サイトの派手さに興味は無いはずです。読みやすさを向上させる効果もあります。私の考えとして、影響は比較的限定的だと考えています。普段サイトを見ていて大きな不便を感じたことはないですし、恐らく多くの人にとってもそうだと思います。デバイスのフォントだけで十二分に可読性を確保できるはずです。いえ、最終的にはケースバイケースです。SPAなど、滞在時間が長いページであれば、読み込み時間を割くだけのメリットが得られるかもしれません。ユースケースに当てはめて検討してみてください。ユーザーに優しく日本語Webフォントを使う使うと決まっても、まだユーザーのためにできることがいくつかあります。ここでは、ユーザーに優しく日本語Webフォントを使うためにできることを3つ紹介します。読み込み中の表示を考えるCSSのfont-displayプロパティで、読み込みが完了するまで表示しないか、読み込みが完了するまで代替フォントで表示するかを選択できます。読み込みが完了するまで表示しないようにした場合、読み込み完了時に突然文字がズレる現象を防げますが、読み込みが完了するまで文章が読めないという大きなデメリットを背負うことになります。個人的には、読み込み中に文章を読むことも多いですし、代替フォントでの表示がオススメです。Fontsでもfont-displayを指定できるようになっています。https://twitter.com/googlefonts/status/1130542400131293185woff2/woffのような圧縮フォーマットに変換して利用するwoff2/woffはwebフォント向けに最適化されたフォント形式で、ttf/otfに比べてファイルサイズを小さく抑えることができます。これらの形式に変換することで、転送量を削減できます。Deflate(zip)など)を活用したWebフォント形式です。メタデータを含めることもできます。不必要な文字はできるだけ読み込まないフォントから不必要な文字を取り除くことをサブセット化と言います。サブセット化のアプローチにもいくつか種類があるので、ここでは3つの方法を紹介したいと思います。(※クラウドサービスでは必然的に提供されている実装の中から選ぶことになります)JIS第1水準・第2水準漢字など、普段使う文字だけに絞り込んだフォントを生成する日本語記事でよく紹介させているものがこれです。Fontsで用いられているものがこれです。いった指定を行います。必要な文字が含まれるサブセットだけを読み込むようになるので、単一のサブセットを生成する場合に比べ、より転送量を減らすことができます。古いブラウザはunicode-rangeプロパティをサポートしていない動的に必要な文字だけのサブセットを生成するFONTPLUSやTypeSquareなどのクラウドWebフォントサービスで用いられているものがこれです。JavaScriptで使われている文字を調べて、必要な文字だけのサブセットを動的に取得してくれます。textareaなどで文字が変化した時に、足りない文字を動的に取りに行ってくれる機能もあったりします。(OSSを作ってもいいのよ?)クラウドサービスを使うクラウドサービスには3つのメリットがあります。ライセンスを気にする必要がないこれまでに紹介してきた最適化を(ほとんど)意識することなく、お手軽にユーザーに優しい日本語Webフォントを導入できる動的サブセットでなければ、同じフォントを利用している別サイトのキャッシュが活かせる有料フォントを使いたい時は、ライセンスの都合で必然的にクラウドサービスを使うことが多いかもしれません。やってくれて便利ですが、どんな最適化を行っているかはサービスによって様々なので、詳しくドキュメントを確認することをオススメします。JPを調べてみましたhttps://gist.github.com/mochiya98/ca412fca2d93f0ed5b06e89164caab39...よく分からず。JavaScript!https://m98.be/Follow株式会社ディー・エヌ・エー1999年に創業した株式会社ディー・エヌ・エーはゲームを中心に、オートモーティブ、ヘルスケア、スポーツなどの事業分野にも進出し、インターネットや人工知能(AI)を活用した新しい挑戦を続けています。upLoginユーザーは見つかりませんでした。