ClaudeCodeLab
Advanced

Implementation with Claude Code

Learn about implementation using Claude Code. Practical tips and code examples included.

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);
  }
}

Summary

フォント最適化はパフォーマンス最適化の中でも特に効果が大きい施策です。Claude Codeを使えば、サブセット化スクリプトからunicode-range分割まで効率的に実装できます。画像最適化と並行して取り組むことで、ページの表示速度を大幅に改善できます。Google Fontsの最適化についてはweb.devも参考にしてください。

#Claude Code #フォント最適化 #performance #Web Fonts #表示速度

Related Posts