AIが書いたUIの基礎チェック：流体タイポ・reduced-motion・フォーカスとコントラスト

2026年10月13日

日曜は基礎の日。AIにUIを書かせると見た目は整いますが、文字サイズの伸び方・動きの扱い・フォーカスの見え方は抜けがちです。この記事では、AIが出したコードをレビューするときに確認したい3つの基本を、コピーして使えるCSSと一緒にまとめます。

1. 文字は「コンポーネント基準」で流体にする

Smashing Magazineは、コンテナクエリを従来のメディアクエリと同じ感覚で使わないよう勧めています。cqi などのコンテナ単位と clamp() を組み合わせると、画面幅ではなく「カードの幅」に応じて文字が伸び縮みします。

.card { container-type: inline-size; }
.card-title { font-size: clamp(1rem, .5rem + 3cqi, 2rem); }

ビューポート基準の clamp(1rem, 1rem + 2vw, 24px) でも動きますが、同じカードをサイドバーと本文に置くと見え方が変わります。AIに頼むときは「コンポーネントは container-type: inline-size、文字は cqi で」と指定すると、再利用しやすいコードが返りやすくなります。

2. 動きは「減らす」であって「ゼロにする」ではない

スクロール演出やパララックスを入れたら、prefers-reduced-motion への対応を必ず確認します。MDNは、点滅や自動再生を避け、ユーザーが動きを止められるようにする指針を示しています。AIが書いたアニメーションには、この対応が入っていないことがよくあります。

@media (prefers-reduced-motion: reduce) {
  .hero-item { animation: fade .2s ease; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: scale(1.05); }
}

位置や拡大縮小の動きは外し、理解を助けるフェードや色の変化は残す
ホバー演出は hover: hover の端末に限定する(タッチでの誤作動を防ぐ)
自動再生する動きには停止手段を用意する

3. フォーカスとコントラストを機械的に確認する

WCAG 2.2 AA を目標にする場合、AIの出力に対して次の表を使って確認できます。

確認項目	見るポイント	AIへの指示例
テキストのコントラスト	本文は4.5:1以上が目安	「淡いグレー文字は使わず、AA基準を満たす色で」
フォーカス表示	2px以上のアウトライン、非フォーカス時と3:1以上の差	「:focus-visible を全操作要素に定義して」
色だけに頼らない	状態をテキストやアイコンでも示す	「状態は色に加えラベルでも表示して」
キーボード操作	Tabで全機能に到達でき、モーダルでフォーカスが閉じ込められる	「モーダルのフォーカス管理も実装して」
ズーム	200%拡大で内容が崩れない	「文字サイズはrem指定で」

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

WCAG 3.0 のドラフトでも、カスタムのフォーカス表示には十分なコントラストとサイズを求める項目が含まれています。ただしドラフトなので、実務では現行の2.2を基準にするのが無難です。

レスポンシブWebデザインのレイアウト図 — Photo: “Responsive Web design Layout” by luc legay / CC BY-SA 2.0(Openverse経由)

4. AIに渡すレビュー用プロンプトの型

生成後に「このコードを WCAG 2.2 AA、prefers-reduced-motion、container queries の観点でレビューして」と依頼する
指摘をもとに修正させ、ブラウザのズーム200%とキーボード操作で自分でも確認する
よく使う指示は DESIGN.md やスキルにまとめ、毎回貼らずに済ませる

要点は、AIに作らせた後の確認項目を固定しておくことです。見た目の好みは人が決め、基礎の抜け漏れはチェックリストで拾います。