AIが作ったUIを人が直す基礎：WCAG 2.2のタップ領域・reduced-motion・コントラスト・レスポンシブ5点チェック

2026年11月2日

日曜は基礎の日。今回は「動く・押す・読む」の3点に絞り、WCAG 2.2の新基準、モーション配慮、レスポンシブの最小セットを、AIにUIを作らせるときのチェックリストとしてまとめます。

なぜ「基礎」をAI時代に見直すのか

v0やLovableのようなAIサイトビルダーやClaudeは、見た目の整ったUIを素早く出力します。ただ、フォーカスの見え方、タップ領域、動きの抑制といった点は、指示しないと抜けがちです。人が最終チェックする基準を持っておくと、生成物の手直しが速くなります。

1. 押せる大きさ：WCAG 2.2のターゲットサイズ

WCAG 2.2では、達成基準2.5.8（AA）が追加されました。操作対象は原則24×24 CSSピクセル以上が目安で、十分な間隔があれば小さくても満たせます。44×44px（2.5.5）はAAAの別基準です。

アイコンだけのボタンは、見た目が小さくてもクリック可能領域に余白（padding）を含める。
見た目だけの余白は反応領域にならないので注意。
固定ヘッダーがキーボードフォーカス中の要素を隠さないか確認する（2.4.11）。
ドラッグ操作には、タップやボタンによる代替手段を用意する（2.5.7）。

2. 動きの配慮：prefers-reduced-motion

パララックスや大きな拡大・パンは、前庭障害のある人に不快感を与えることがあります。prefers-reduced-motionでOS設定を検知し、動きを減らす・置き換える対応ができます。web.devの解説も参考になります。

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  .card { transition: opacity .2s; } /* 拡大や移動はやめてフェードのみ */
}

「減らす」は「ゼロにする」とは限りません。拡大・回転・波のような動きをフェードや色変化に置き換えると、演出の意図を保てます。自動再生で長く続く動きには、一時停止などの操作手段も必要です（web.dev: Animation and motion）。

3. 読める色：コントラストの目安

対象	AA	AAA
通常テキスト	4.5:1	7:1
大きい文字（24px以上、または太字19px以上）	3:1	4.5:1
UI部品・アイコン（非テキスト）	3:1	—

WCAGの比率は文字サイズや太さを考慮しないため、知覚ベースの指標APCAも議論されています。現時点の法令・規格の基準はWCAGの比率です。薄い色が主役のブランドカラーなら、暗いシェードを用意して4.5:1を確保しておくと、ボタンなどに安全に組み合わせられます（解説記事）。

4. 画面幅に合わせる：レスポンシブの最小セット

2026年のレスポンシブは、ページ構造にはメディアクエリ、部品にはコンテナクエリ、文字や余白にはclamp()、ブレークポイント不要の配置にはGridを組み合わせる形が基本です（Scrimba）。コンテナクエリは2025年8月からBaseline Widely availableとされています。

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }
.card-wrap { container-type: inline-size; }
@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 160px 1fr; }
}

文字サイズはrem基準にして、ブラウザのズームや200%拡大でも崩れないか確認します。確認幅は320px、768px、1440pxが目安です。