日本語Webフォントはなぜ重いのか — 19MBを実測して分かった美しさとの付き合い方

僕のサイトの転送量を計測したら、約19.7MBありました。内訳を集計して驚いたのは、その大半が画像でもJavaScriptでもなく、フォントだけで19MBだったことです。

英語圏のサイト最適化の記事では、フォントはほぼ話題になりません。日本語サイト特有の問題だからです。この記事では、なぜ日本語Webフォントはここまで重いのか、実測データでどう軽くしたか、そしてどこからは軽くしないと決めたかまで書きます。

**この記事の結論：**日本語フォントは漢字数千文字×ウェイト数で、1ウェイトあたり数MBになります。最初にやるべきは未使用ウェイトの削除（実測：19MB→11.3MB・見た目の変化ゼロ）で、そこから先は美しさとのトレードオフとして判断します。

この記事で分かること：

• 日本語フォントが英語フォントの何十倍も重い構造的な理由
• 見た目を一切変えずにフォントを数MB削る手順
• 「美しさとスコアのトレードオフ」をどう判断するか

1. なぜ重いのか — 文字数の桁が違う

英語のフォントに必要な文字は、アルファベット大小・数字・記号で100文字前後です。一方、日本語はひらがな・カタカナに加えて漢字が数千文字。JIS第1・第2水準まで含めると6,000文字を超えます。

さらにフォントには「ウェイト（太さ）」があります。細字・標準・太字…と1ウェイトごとに全文字分のデータを持つため、1ウェイトあたり数MBになります。

僕のサイトは明朝体とゴシック体の2書体を使っていて、合計9ウェイトを読み込んでいました。数MBが9個——それがフォント19MBの正体です。

日本語Webフォントが重い構造的な理由です。

2. 実測 — まず「使っているウェイト」を調べる

重要なのは、読み込んでいるウェイトと、実際に使っているウェイトは別だということです。コードベース全体を調査した結果：

• 読み込んでいた太さ：9ウェイト
• 実際に使っていた太さ：300・400・500の3種類だけ

太字用の700や800は、どのページの見出しにも本文にも一度も使われていないのに、全ページで読み込まれていました。つまり削っても見た目は1ピクセルも変わりません。

削除の結果：

これは日本語サイトの軽量化で、最も割が良い一手です。画像圧縮のように品質の議論すら必要なく、純粋に無駄だけを削れます。

あわせて読みたい【実録】LCP100秒のサイトを改善したら、犯人は画像ではなくフォントだった

3. それでも11MB残る — ここからがトレードオフ

未使用分を削った後に残る11.3MBは、「実際に使っている」フォントです。ここから先の軽量化には、何かを諦める判断が入ります。主な選択肢は：

1. システムフォントに切り替える — 転送量ほぼゼロになるが、明朝体の繊細な見た目を手放す
2. 先にシステムフォントで表示して、後から差し替える — 表示は速くなるが、読み込み中に文字の見た目が切り替わる「チラつき」が出る
3. ウェイトをさらに絞る・サブセット化する — 効果はあるが、デザインの階調や表示できる文字に制約が出る

僕のサイトは、明朝体の見た目がブランドの一部です。計測ツール（Lighthouse）のスコアを上げるためにここを削るのは、手段のために目的を壊すことになる——そう判断して、残りの11MBは受け入れました。

4. スコアより実ユーザー — 判断の根拠

受け入れる判断を支えたのは、計測の仕組みの理解です。

Lighthouseの数値は、実際より遥かに遅い回線をシミュレーションした極端条件のテストです。ラボの数字としては正直に悪く出ますが、実際のユーザーの4G/5G/光回線では問題ない速度で表示されています。

そこで、以降の評価は**Google Search Consoleに蓄積される実ユーザーの速度データ（Core Web Vitals）**で行う方針にしました。ラボの数字で一喜一憂せず、実際の訪問者の体験で判断する。Googleの評価も最終的には実ユーザーデータが基準です。

見た目を変えずに削り、残りは受け入れると判断した流れです。

よくある質問

日本語フォントでも軽いものはありますか？

システムフォント（端末に最初から入っているフォント）なら転送量ゼロです。こだわりの書体を使わないサイトなら、それが最速の選択です。Webフォントを使う場合も、必要な文字だけを含む「サブセット版」を提供しているサービスがあります。

自分のサイトのフォントが重いか、どう調べればいいですか？

Chromeの開発者ツール（F12）→ Networkタブ → 「Font」で絞り込んでページを再読み込みすると、読み込まれているフォントファイルとサイズが一覧できます。合計が数MBを超えていたら、未使用ウェイトが混ざっていないか確認する価値があります。

太字（bold）を使っていたら削れませんか？

太字を使っている箇所のウェイトは残す必要があります。ポイントは「デザインで使っている太さを特定して、それ以外を削る」ことです。CSSのfont-weight指定をコード全体で検索すると、実際に使われている太さが分かります。

まとめ

• 日本語フォントは漢字数千文字×ウェイト数で、1ウェイト数MBになる
• 最初にやるべきは未使用ウェイトの削除。見た目を一切変えずに数MB削れる（実測：19MB→11.3MB）
• そこから先は美しさとのトレードオフ。ブランドの一部なら、削らない判断もある
• ラボ計測（Lighthouse）の数字より、**実ユーザーデータ（Search Console）**で評価する

この計測に至った経緯は表示速度改善の実録に、構造化データ側の土台整備はJSON-LD実装の実録にまとめています。サイト診断のご相談はお問い合わせからどうぞ。