評価・デモ・AI知識ギャップ

AIがWeb開発で間違えやすい10のこと

元の資料：Top 10 things AI gets wrong in web development
2026年11月11日（Chrome for Developers ブログ、Philip Walton）

「新しいモデルはもうベストプラクティスを知っているのでは」という問いへの答えとして、評価で実際に測れた知識の穴を10分野にまとめた記事です。

まず数字

測り方は、各ガイドが「ベストプラクティスが守られていれば真になるはずの期待条件」を持ち、同じ指示をガイドあり／なしのエージェントに出して、結果をその条件で照合する、というものです。詳しい測り方は評価ダッシュボードの解説にあります。

10分野

1. アクセシビリティ：キーボードのフォーカスと inert の管理

新しい画面を開いたらフォーカスを中へ移し、戻るときは元の要素へ戻す。手作りのモーダルでフォーカスを閉じ込めるJavaScriptや aria-modal に頼らず、モーダルな <dialog> を使うか、背景を inert にする。ツールバーの全項目をタブ移動の対象にせず、移動するタブストップは1つにして中は矢印キーで動く形（roving tabindex）にする。フォーカスの輪郭は隣の背景に対して3:1以上のコントラストを確保する。ここが評価で一番差が開いた分野のひとつです。

2. アクセシビリティ：動きを減らす設定への対応

通常のCSS遷移では prefers-reduced-motion を見るモデルも、スムーズスクロール、ビュートランジション、スクロール連動アニメーションでは忘れがちです。根本要素に無条件で scroll-behavior: smooth を付けないこと、全要素のアニメーション時間を一律に潰して状態変化まで消さないこと、ビュートランジションは reduced-motion の条件の中で有効にすること、が挙げられています。

3. アクセシビリティ：フォーム検証、書式のヒント、自動入力

触っていない必須欄をタブで通過しただけでエラーにしない（:user-invalid の役割をJavaScriptで作り直さない）。見た目のエラーと aria-invalid をずらさない。カードの有効期限「MM/YY」のような書式は、消えてしまうプレースホルダではなく、aria-describedby で結んだ常時のヒントで示す。ヒントは入力欄の下ではなく上に置く（モバイルのキーボードや自動入力の候補で隠れるため）。自動入力された欄の強調は、色だけでなくレイアウトがずれない形（内側の影など）も併せる。

4. 使い心地：スワイプとタッチの操作

pointermove などのリスナーで自前の物理演算を書くより、CSS Scroll Snapなどブラウザ側でメインスレッド外に処理できる仕組みを使う。タブのスワイプでは overscroll-behavior-x: none を付けてブラウザの戻る／進むを誤作動させない。スワイプに連動する効果はスクロール連動アニメーションで処理し、スクロールで開くパネルにもキーボードのフォーカスを通す。

5. 使い心地：ダイアログ、ポップオーバー、トップレイヤーの遷移

外側クリックで閉じる処理を手書きせず popover を使う。入場・退場のアニメーションはクラス切り替えとタイマーの協調ではなく、@starting-style と transition-behavior でCSSだけで行う。モーダルの背後のスクロール止めは <html> の overflow: hidden ではなく <dialog> に任せる。Androidの戻る操作への対応も、モーダルなdialogの標準動作に任せる。

6. 使い心地：ダークモードとテーマに追随する部品

<meta name="color-scheme" content="light dark"> を入れ忘れると、ダークモードの利用者に白い画面が一瞬見えます。暗い面の部品にも color-scheme を付けないと、スクロールバーやフォーム部品だけライトのまま残ります。色の定義には light-dark() が使えます。切り替えはライト／ダークの二択だけでなく「OSの設定に戻す」も用意し、変更は storage イベントで他のタブにも同期します。このサイトのBaselineのページに、切り替えの作例があります。

7. 性能：実行時の応答性

読み込み時の定石はモデルも知っています。弱いのは読み込み後の応答性（INP）です。自前の setTimeout の列ではなく scheduler.postTask() や scheduler.yield() で優先度を付ける。密集したレイアウトには content-visibility: auto と contain-intrinsic-size を組で付ける。非表示の画面は display: none で壊さず content-visibility: hidden と inert で保持する、などが挙げられています。

8. 性能：レイアウトのずれとちらつき

<img> の幅・高さは付けても、<video> では付け忘れる（未読み込み時は300×150になり、後でずれる）。メディアには aspect-ratio と object-fit を直接付ける。Webフォントの差し替えには font-size-adjust を併せる。全画面の高さは vh ではなく dvh／svh を使う。A/Bテストのちらつき防止に opacity: 0 と長いタイマーを使わず、必要な場合は blocking="render" を使う。

9. セキュリティ：DOM XSSへの防御とHTMLの無害化

促されなければ、CSPもクロスオリジン分離のヘッダもモデルからは出てきません。セキュリティを直接頼んでも半分以上のチェックに落ちます。手書きのDOMParserベースの無害化ではなく、標準の無害化が使えない場合の代替は検証済みライブラリ（DOMPurify）を遅延読み込みにする。通過させるだけのTrusted Typesポリシーは付けない。nonce方式のCSPには 'strict-dynamic' と 'report-sample' を入れる、などが挙げられています。

10. セキュリティ：パスキーのサインイン、再認証、資格情報のライフサイクル

WebAuthnの直列化や能力確認、通知のAPIをモデルはほぼ落とします。atob()／btoa() の手書き変換ではなく parseCreationOptionsFromJSON() などの標準メソッドを使う。サーバが不明な資格情報と言ったら PublicKeyCredential.signalUnknownCredential() でパスワードマネージャ側と同期する。管理UIを出す前に PublicKeyCredential.getClientCapabilities() で能力を確認する。再認証には AbortController を組で使う。古い mediation: "immediate" ではなく uiMode: "immediate" を使う。