2026年3月4日の開発日記
朝8時半にターミナルを開いて、放置していた地域密着サービス業のサイトを触り始めた。Nuxt 2で動いていたそのサイトを、フレームワークなしのバニラHTMLに書き換え、デプロイ先をCloudflare Pagesに移し、LP改善・画像最適化・SVGアニメーション制作・PageSpeed最適化・SEO改善まで、丸一日で駆け抜けた。
今日やったこと
1. 静的サイトリビルド＆Cloudflare Pages移行
Nuxt 2で動いていたサイトを、バニラHTML/CSS/JSの1ファイル構成に作り替えた。npm→pnpmに切り替え、NetlifyからCloudflare Pagesへデプロイ先を変更。Cloudflare PagesのビルドでNode.js v12が使われる問題、npm ciがpackage-lock.jsonを要求する問題、wranglerのnode_modules除外問題と、ビルド設定で5回以上つまずいた。ヒーロー動画の切り出し（ffmpegで720p圧縮→1.8MB）、カスタムドメインのDNSレコード切り替えまで完了。
主な成果:
- Nuxt 2 → バニラHTML/CSS/JSへの完全リビルド
- Netlify → Cloudflare Pages移行完了
- ヒーロー動画セクション実装
- カスタムドメイン設定＆旧Netlifyサイト削除
詳細: Nuxt 2サイトをバニラHTML静的サイトに作り替えてCloudflare Pagesへ移行した
2. LP改善・画像最適化・SVGアニメーション制作
競合の鍵屋LPを5件分析し、自サイトに足りないセクションを洗い出した。DSC画像14枚（合計216MB）をImageMagickで一括リサイズ・圧縮。サービス一覧、料金表、ご利用の流れ、FAQ、会社概要、フォトギャラリーの6セクションを追加。軽トラのSVGアニメーションを何パターンも試作した（最終的にはサイトへの組み込みは見送り）。ヘッダーナビ、ハンバーガーメニュー、モバイル固定CTAバーも実装。
主な成果:
- 競合分析→ギャップ分析レポート作成
- 14枚の写真をWeb最適化して各セクションに配置
- 6セクション＋ヘッダーナビ＋モバイルCTA追加
- SVGトラックアニメーションの試作（タイヤ位置調整、排気ガス削除など試行錯誤）
詳細: LP改善・画像最適化・SVGアニメーション制作の一日
3. PageSpeed最適化＆SEO改善
5フェーズに分けてPageSpeedモバイルスコアを94点まで引き上げた。img要素のwidth/height追加、CSSクリティカルパスのインライン化、動画再エンコード（hero.mp4: 1.8MB→708KB）、GA4遅延読み込み、CSS minify。途中で手詰まりになり、Codex（GPT-5.3）に2回相談した。「Google Fontsとヒーロー動画のダウンロードが帯域を食い合っている」という指摘で突破口が開けた。SEO面ではOG画像の専用作成、構造化データ（JSON-LD）、robots.txt/sitemap.xml、GA4のphone_callイベント計測まで実装。
主な成果:
- PageSpeedモバイル: 低スコア → 94点
- 動画再エンコードで61%削減、CSS minifyで35%削減
- Codexとの2回の相談が転機に
- OG画像・構造化データ・GA4イベント計測の実装
詳細: PageSpeedモバイル94点達成までの最適化ログとSEO改善の記録
今日の学び
- Cloudflare Pagesのビルド環境はデフォルトでNode.js v12が使われる。
NODE_VERSION環境変数をビルド環境変数（ランタイムではなく）に設定する必要がある - WebMへの変換がMP4より大きくなるケースがある。元のMP4が既によく圧縮されている場合は逆効果
- PageSpeedのLCP改善は帯域競合の解消が鍵。フォントと動画のダウンロードが同時に走ると互いに足を引っ張る
- Codexに「瑣末な指摘はしないで、致命的な点だけ」と伝えると、的確なアドバイスが返ってくる
明日やること
- GA4のphone_callをキーイベントに設定（管理→イベント→☆クリック）
- モバイルでの動画再生を実機確認
- 写真の追加・入れ替えの検討