Weight 100への執念 〜 静的解析によるNoto Sans JPフォントの最適化 by okunokentaro

1ページ構成のWebサイトにおいて、タイポグラフィの質とパフォーマンスを両立させるための取り組みをご紹介します。

• フォントの選択
  • システムフォントでは代替できないNoto Sans JP Weight 100のデザイン性を重視
• パフォーマンスの制約
  • 日本語WebフォントのサイズによるLighthouseスコアの低下を回避したい
• 既存ツールの限界
  • 一般的なサブセット化ではカーニング情報が消失し、品質が維持できない

これらの課題を解決するため、ビルドプロセスを組み込みました。

• 静的解析
  • Astroのビルド済みHTMLをパースし、Weightごとに使用文字を1文字単位で抽出
• クエリ最適化
  • 抽出結果から、必要な文字のみを配信するためのクエリを自動生成
• 自動化パイプライン
  • Cloudflare Pagesを活用し、デプロイのみで最適化まで完結する全自動フローを構築

妥協のないタイポグラフィを、静的解析による抽出からCloudflare Pagesでの自動化へと繋げ、いかに全自動で最適化しきるか。そのアーキテクチャの全容をお話しします。