2026 年 5 月 20 日、Google および Ubie の開発者から Google の Modern Web Guidance スキル登場。AI が古い CSS・JS を書く問題を解決する が紹介されました。Modern Web Guidance は、Claude / Gemini / Cursor などの AI コーディングエージェントが 「学習データの古さに引きずられて 2020 年頃の CSS・JavaScript を書いてしまう」問題に対する Google 公式の 組織標準スキルです。Container Queries / :has() / View Transitions / Web Components / ES2024+ などの 「今書くべき書き方」をエージェントが採用するよう誘導します。
受託で中堅企業のフロントエンド近代化を担う立場では、これは 「AI が書くコードの品質を組織標準で底上げできる」転換点です。これまで Vite 8 受託フロントエンドビルド近代化 で扱った ビルド基盤の近代化 に続き、コード生成内容の近代化も組織標準として制御できるようになります。本記事では弊社が提供する 「AI フロントエンド近代化 + コーディング標準整備」 受託パッケージを整理します。
なぜ「AI が古いコードを書く」が中堅企業の隠れコストか
| 観点 | AI が書きがちな古い書き方 | 2026 年に書くべき書き方 |
|---|---|---|
| レイアウト | float / 旧 Flexbox | CSS Grid / Container Queries |
| 状態セレクタ | JS で classList.add | :has() / :is() / :where() |
| アニメーション | jQuery .animate() | View Transitions API |
| ダイアログ | 自前 modal 実装 | <dialog> 要素 |
| コンポーネント化 | 巨大単一 React コンポーネント | Web Components / RSC / Astro Islands |
| 画像最適化 | <img> ベタ書き | <picture> + srcset + AVIF / WebP |
| JavaScript | var / promise then チェーン | const / async/await / Top-Level Await |
| アクセシビリティ | div ボタン | semantic HTML + ARIA 最小化 |
つまり AI に書かせると 「2018〜2021 年の常識」で出力されがちで、保守性・パフォーマンス・アクセシビリティすべてが現代水準から劣化します。Modern Web Guidance はこれを 組織標準スキルとして封じます。
Modern Web Guidance が変える 3 つの構造
構造 1: 「個人のレビュー」から「組織標準スキル」へ
これまで AI 出力の古さは シニアエンジニアのレビューで個別に修正されていました。Modern Web Guidance は スキルとしてエージェント側に常駐するため、レビュー前段で出力品質が底上げされます。
構造 2: 「学習データ依存」から「ガイダンス上書き」へ
LLM の学習データは 数ヶ月〜数年遅れで更新されます。Modern Web Guidance は MDN / web.dev / Chrome Developers の最新ベストプラクティスを エージェント実行時にコンテキスト注入することで、学習データの古さを上書きします。
構造 3: 「フロントエンドだけ」から「コーディング標準全体」へ
CSS / JS だけでなく HTML 構造 / アクセシビリティ / パフォーマンス予算まで一貫した規範が組み込めるため、受託では 顧客プロジェクト共通のコーディング標準スキルとして配布できます。
受託で提供する「AI フロントエンド近代化」5 フェーズ
フェーズ 1: 現状診断（2 週間）
- 既存コードベースの CSS / JS 近代度スコアリング
- AI コーディングツール（Cursor / Claude Code / Antigravity）の利用状況確認
- Core Web Vitals / Lighthouse スコア取得
- アクセシビリティ監査（axe / WAVE）
フェーズ 2: コーディング標準スキル設計（1〜2 週間）
- Modern Web Guidance をベースに 顧客プロジェクト固有の規約を追加
- デザインシステム連携（Tailwind / vanilla extract / Linaria）
- フレームワーク選定（Astro / Next.js / Remix / SvelteKit）
- 状態管理（Signals / TanStack Query / Jotai）
- i18n 規約
- スキルファイルの Markdown 記述
- レビュー基準のドキュメント化
フェーズ 3: AI ツール統合（1 週間）
- Cursor / Claude Code / Antigravity / Codex の プロジェクト設定
- スキルファイルの
.cursor/rules/.claude/CLAUDE.md/AGENTS.md配置 - pre-commit / pre-push の品質チェック（Biome / Oxlint / Stylelint）
- CI での Lighthouse / axe 自動実行
フェーズ 4: 段階的近代化（4〜8 週間 / プロジェクト規模次第）
- 既存コードの AI 補助によるリファクタ
- float → Grid 移行
- jQuery → ネイティブ JS 移行
- 古い React パターン → Server Components / Suspense
- ビルド設定の近代化（Vite 8 Rust バンドラ と組み合わせ）
- Core Web Vitals の改善
フェーズ 5: 月次品質レビュー（継続）
- AI 生成コードの サンプルレビュー
- Modern Web Guidance / web-platform 標準の更新追従
- Lighthouse / axe の継続モニタリング
- スキルファイルの版管理 + 改訂
受託向け技術スタック標準セット
| レイヤ | 推奨技術 | 代替 |
|---|---|---|
| AI コーディング基盤 | Cursor / Claude Code / Antigravity | Codex / Cline |
| コーディング標準スキル | Modern Web Guidance + 自社規約 | airbnb / google style guide |
| フレームワーク | Astro / Next.js 15+ / Remix v3 | SvelteKit / Nuxt |
| CSS 戦略 | Tailwind v4 + Container Queries | vanilla-extract / Linaria |
| ビルド / バンドラ | Vite 8（Rust） | Rspack / Turbopack |
| Lint / Format | Biome / Oxlint | ESLint + Prettier |
| 品質モニタリング | Lighthouse CI + axe-core | WebPageTest |
| デザインシステム | shadcn/ui + Storybook | radix-ui / arco-design |
どの案件に必要か / 不要か
| 必要な案件 | 不要な案件 |
|---|---|
| AI コーディングを本格採用 | AI 補助なし |
| 既存コードが 5 年以上前 | 直近 1 年内に近代化済み |
| アクセシビリティ / パフォーマンス要件あり | 内部限定の管理ツール |
| デザインシステム化が進行中 | デザイン不要 |
| 複数チーム / 複数プロジェクト共通化したい | 単一プロジェクト |
受託契約に書く 6 つの条項
| 条項 | 内容 | 顧客が確認すべきこと |
|---|---|---|
| コーディング標準スキルの所有権 | 顧客 / 弊社 / 共同保有 | 退場後の継続利用 |
| 品質指標の合意 | Core Web Vitals / axe / Lighthouse 閾値 | 業務影響度 |
| AI ツール利用ポリシー | データ送信 / プロンプト保管 | 機密対応 |
| 段階リリース | プロジェクト単位 / ページ単位 | 影響範囲 |
| 退場時引き渡し | スキル + 規約 + 過去レビュー | 自社運用継続性 |
| 再教育プログラム | 顧客エンジニア向け OJT | 内製化計画 |
価格モデル — AI フロントエンド近代化パッケージ
| プラン | 金額 | 対象 | 内容 |
|---|---|---|---|
| 診断 | 70 万円〜（2〜3 週間） | 既存コード近代度 + AI ツール現状 | レポート + ロードマップ |
| Lite | 30 万円〜 / 月 | プロジェクト 1〜2 本 | 月次標準スキル更新 + サンプルレビュー |
| Standard | 70 万円〜 / 月 | プロジェクト 3〜5 本 | + Core Web Vitals 改善支援 + OJT |
| Enterprise | 140 万円〜 / 月 | 全社 / 6 本〜 | + デザインシステム支援 + 専任担当 |
| 初期リファクタ | 300 万円〜（一括） | 既存 1 プロジェクト近代化 | 全プラン共通オプション |
顧客側 ROI 試算（フロントエンド開発 10 名 / プロジェクト 4 本想定）
| 項目 | AI 自由運用（現状） | 受託近代化 | 差分 |
|---|---|---|---|
| AI 生成コードのレビュー手戻り（月） | 80h | 20h | -60h |
| Core Web Vitals 改善（LCP） | 3.5s | 1.8s | -1.7s |
| Lighthouse スコア（Performance） | 65 | 92 | +27 |
| アクセシビリティ違反（axe） | 平均 30 件 / 画面 | 5 件以下 | -25 件 |
| 機能追加リードタイム | 3 週間 | 1.5 週間 | -50% |
| CVR 改善（Web 動線） | — | +12% | 売上影響大 |
| 年間効果 | — | — | 数千万円〜億規模の売上 + 工数削減 |
時給 8,000 円換算で 年間 600 万円超の工数削減 + CVR 改善による売上効果。Standard プラン（年額 840 万円）でも 半年〜1 年で回収できます。
ハマりやすい 5 つの落とし穴
落とし穴 1: 「スキルを置いただけ」で運用が回ると思う
スキルファイルは エージェントが参照する規範ですが、プロンプト次第で無視されることもあります。レビュー基準と CI ゲートで二重に担保します。
落とし穴 2: 既存コードを全リファクタしようとする
5 年分の古い CSS を 一気にリファクタしようとすると、デザイン崩れ / 回帰バグが連鎖します。ページ / コンポーネント単位の段階移行が鉄則です。
落とし穴 3: AI ツール側の更新追従が無い
Cursor / Claude Code / Antigravity は 数週間〜数ヶ月で挙動が変わるため、スキルファイルの定期検証が必要です。
落とし穴 4: Lighthouse スコアだけ追う
Lighthouse は ラボ環境のスコアです。実ユーザ計測（CrUX / RUM）と組み合わせないと 「数値は良いが体感は悪い」事故が起きます。
落とし穴 5: アクセシビリティを後付けにする
axe / WAVE での自動検査は 半数程度しか拾えません。スクリーンリーダー実機検証を月次サイクルに組み込みます。
90 日アクションプラン
| 週 | アクション |
|---|---|
| Week 1〜2 | 既存コードベース近代度診断 + AI ツール現状調査 |
| Week 3〜4 | コーディング標準スキル設計 + 顧客合意 |
| Week 5 | AI ツール統合（Cursor / Claude Code 設定） |
| Week 6〜10 | パイロットプロジェクトの段階近代化 |
| Week 11 | Core Web Vitals / axe 改善検証 |
| Week 12〜13 | 全社展開準備 + 月次レビュー立ち上げ |
まとめ — 「AI が書くコードの品質」を組織標準で底上げする時代
Google Modern Web Guidance スキルの登場は、AI コーディングの品質を「組織標準スキル」として制御できる時代の幕開けです。受託で中堅企業のフロントエンドを支える立場では、スキル設計 + AI ツール統合 + 段階近代化 + 月次レビューを一体で設計する 「AI フロントエンド近代化 + コーディング標準整備」 が新しい標準サービスになります。
弊社では 診断 / Lite / Standard / Enterprise の 4 段階で本パッケージを提供しています。「Cursor で書かせると 5 年前の CSS が出る」「Lighthouse スコアが伸びない」「デザインシステム化と AI 活用を同時に進めたい」というご相談は お問い合わせフォーム からお気軽にどうぞ。
