AIが選んだWebフォントを、見た目を変えずに軽くさせる（前後のピクセル比較で証明させる）

どんな問題を解決するか / いつ使うか

AIに任せて作ったサイトは、フォントを自分で選んでいないことが多く、使っていない太さや文字まで丸ごと読み込んで重くなりがち。表示が遅いと感じたら、デザインを崩さずに軽くする作業として頼む。

やり方

次の3行をそのままClaude Code / Codexに渡す（意訳）。

1. このサイトのWebフォントを、見た目を一切変えずに速く読み込めるようにして。
2. フォントの容量はできるだけ削り、表示は同じに保つこと。前後のスクショをピクセル単位で比べて証明して。
3. 見た目が少しでも変わったら、私が承認しない限り不具合として扱って。

ポイントは「速くして」だけで終わらせず、守る条件（見た目が同じ）と、その確かめ方（ピクセル差分）と、変わった場合の扱い（不具合）まで書くこと。エージェントは使っていない太さの削除、サブセット化、woff2への変換などを自分で選ぶ。

注意点

• 日本語フォントをサブセット化すると、後から追加した文章で文字が欠けることがある。動的に文字が増えるサイトでは、どの文字を残したかを確認する。
• ピクセル比較は確認したページだけが対象。主要なページと、太字・斜体を使うページを含める。

関連

• AIが使いがちな「手癖フォント」をAI自身に聞き出し、それ以外を指定してAIっぽさを避ける
• Vitest 4のBrowser Mode＋GitHub Actionsで、見た目の変化を検知するテスト（VRT）を入れる

出典

• @Voxyz_ai post（プロンプトは画像）