Claude Codeでフォント最適化を実装する方法【表示速度改善】
Claude Codeを使ってWebフォントの最適化を実装する方法を解説。サブセット化、preload、font-display、可変フォントまで紹介します。
Webフォントの最適化で表示速度を改善
Webフォントはデザインの品質を高めますが、最適化しないと表示速度に大きく影響します。Claude Codeを使えば、フォントのサブセット化からロード戦略まで効率的に実装できます。
font-displayの適切な設定
> Webフォントの読み込みを最適化して。
> FOUTとFOITを防ぎ、ユーザー体験を損なわない設定にして。
/* font-displayの使い分け */
@font-face {
font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* テキストを即座に表示し、フォント読み込み後に差し替え */
}
@font-face {
font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ヒーロー見出しなどの重要フォント */
@font-face {
font-family: 'Display Font';
src: url('/fonts/display.woff2') format('woff2');
font-weight: 700;
font-display: optional; /* ネットワークが遅い場合はシステムフォントで代替 */
}
Preloadによる先読み
<head>
<!-- クリティカルなフォントをpreload -->
<link rel="preload" href="/fonts/NotoSansJP-Regular.woff2"
as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/NotoSansJP-Bold.woff2"
as="font" type="font/woff2" crossorigin />
</head>
日本語フォントのサブセット化
> 日本語フォントを必要な文字だけにサブセット化して。
> JIS第一水準・第二水準と常用漢字をカバーして。
// scripts/subset-font.ts
import { execSync } from 'child_process';
import { readFileSync, writeFileSync } from 'fs';
// pyftsubsetを使ったサブセット化
function subsetFont(inputPath: string, outputPath: string, unicodeRange: string) {
execSync(
`pyftsubset ${inputPath} ` +
`--output-file=${outputPath} ` +
`--flavor=woff2 ` +
`--layout-features='*' ` +
`--unicode-range="${unicodeRange}"`
);
}
// Unicode範囲の分割（チャンク化）
const chunks = [
{ name: 'latin', range: 'U+0000-007F,U+2000-206F,U+2070-209F' },
{ name: 'kana', range: 'U+3000-303F,U+3040-309F,U+30A0-30FF,U+FF00-FFEF' },
{ name: 'kanji-1', range: 'U+4E00-5FFF' },
{ name: 'kanji-2', range: 'U+6000-7FFF' },
{ name: 'kanji-3', range: 'U+8000-9FFF' },
];
for (const chunk of chunks) {
subsetFont(
'src/fonts/NotoSansJP-Regular.ttf',
`public/fonts/NotoSansJP-${chunk.name}.woff2`,
chunk.range
);
}
/* Unicode-rangeによる分割読み込み */
@font-face {
font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-latin.woff2') format('woff2');
unicode-range: U+0000-007F, U+2000-206F;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-kana.woff2') format('woff2');
unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-kanji-1.woff2') format('woff2');
unicode-range: U+4E00-5FFF;
font-display: swap;
}
可変フォント（Variable Fonts）の活用
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
body {
font-family: 'Inter Variable', sans-serif;
font-weight: 400;
}
/* 1つのファイルで全ウェイトをカバー */
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
.caption { font-weight: 300; }
フォールバックフォントのメトリクス調整
/* CLSを防ぐためのサイズ調整 */
@font-face {
font-family: 'Adjusted Arial';
src: local('Arial');
size-adjust: 105%;
ascent-override: 90%;
descent-override: 20%;
line-gap-override: 0%;
}
body {
font-family: 'Noto Sans JP', 'Adjusted Arial', sans-serif;
}
フォント読み込み状態の監視
// Font Loading APIで読み込み完了を検知
async function waitForFonts() {
if ('fonts' in document) {
await document.fonts.ready;
document.documentElement.classList.add('fonts-loaded');
}
}
// 特定フォントの読み込みを確認
async function loadCriticalFont() {
const font = new FontFace(
'Noto Sans JP',
'url(/fonts/NotoSansJP-Regular.woff2)'
);
try {
const loaded = await font.load();
document.fonts.add(loaded);
console.log('フォント読み込み完了');
} catch (err) {
console.error('フォント読み込み失敗:', err);
}
}
まとめ
フォント最適化はパフォーマンス最適化の中でも特に効果が大きい施策です。Claude Codeを使えば、サブセット化スクリプトからunicode-range分割まで効率的に実装できます。画像最適化と並行して取り組むことで、ページの表示速度を大幅に改善できます。Google Fontsの最適化についてはweb.devも参考にしてください。
#Claude Code
#フォント最適化
#パフォーマンス
#Web Fonts
#表示速度
無料プレゼント
無料PDF: Claude Code はじめてのチートシート
まずは無料PDFで基本コマンドと最初の使い方をまとめて確認してください。登録後はそのままテンプレート集や導入相談にも進めます。
スパムは送りません。登録情報は厳重に管理します。
Claude Codeを仕事で使える形にしませんか？
無料PDFで基礎を固めたあと、すぐ使えるテンプレート集で試し、必要なら業務自動化や導入相談まで進められます。
この記事を書いた人
Masa
現役DX室長｜Claude Code でゼロから多言語AI技術メディア運営中。実務直結の自動化、AI開発相談・研修受付中。
関連書籍・参考図書
この記事のテーマに関連する書籍を楽天ブックスで探せます。
※ 当サイトは楽天市場のアフィリエイトプログラムに参加しています。上記リンクから商品をご購入いただくと、運営者に紹介料が支払われる場合があります。
関連記事
Advanced
Claude Code/Codexの安全なAgent Harness実装ガイド|権限・検証・ロールバックまで
AIエージェントを安全に動かす足場を、権限設定、実行計画、検証、ロールバックの4層で実装。Claude Code/Codexの実務例付き。
Advanced
Claude Code サブエージェント活用パターン10選
Claude Code のサブエージェント機能を使いこなす実践パターンを10個紹介。並列処理、専門化、コンテキスト分離で開発効率を倍増させる方法を解説します。
Advanced
Claude Code Agent SDK入門 ― 自律エージェントを最速で構築する方法
Claude Code Agent SDKを使って自律型AIエージェントを構築する方法を解説。セットアップからツール定義、マルチステップ実行まで実践コード付きで紹介します。