Blog

フロントエンド開発（React / Next.js / TypeScript）やパフォーマンス・アクセシビリティに関する技術ノート。

不定期更新

• 2026-06-28

  Core Web Vitals を 58 → 99 に改善した話（フォント自己ホスト化が効いた）

  Lighthouse スコア58のポートフォリオを、フォント読み込みの見直しだけで99まで引き上げた実例。LCP 8.6s→2.3s。計測・原因特定・改善の手順を実数値で解説します。

  パフォーマンスCore Web VitalsNext.jsフォント
• 2026-06-20

  GSAP + Lenis で作る、没入感のある1ページポートフォリオ

  極大タイポグラフィ、マグネットホバー、スクロール連動の文字飛散。GSAP ScrollTrigger と Lenis スムーススクロールで構成した1ページ構成の設計と実装の勘所をまとめます。

  GSAPLenisアニメーションNext.js
• 2026-06-12

  アクセシビリティと演出を両立する — prefers-reduced-motion の実装

  派手なスクロール演出とアクセシビリティはトレードオフではありません。prefers-reduced-motion を尊重しつつ、演出を活かす実装パターン（即時表示・RAF停止・後始末）を解説します。

  アクセシビリティアニメーションReactUX