AIコーディングエージェントに“目”を与える: UI検証と証跡パイプライン設計
参考: https://news.ycombinator.com/
AIコーディングエージェントの導入で、実装速度は確かに上がりました。一方でUI品質は依然として事故が出やすい領域です。ビルドもユニットテストも通っているのに、実画面ではラベル欠け、コントラスト不足、キーボードフォーカス崩れ、モバイル崩壊が起きます。これはモデル能力だけの問題ではなく、“証拠を残す設計”の問題です。
テキスト差分だけではUIを保証できない
従来レビューはコード差分中心でしたが、AI生成UIでは次が同時発生しやすいです。
- 構造変更とスタイル変更の同時実施
- 特定ブレークポイントだけで起きる崩れ
- JSX上は自然でも実際は不十分なアクセシビリティ
見た目と操作性は、文字列だけで完全には判断できません。
まず“証跡契約”をPR要件にする
エージェントPRに対し、提出必須の証跡を先に決めます。
- Desktop/Tablet/Mobileの比較スクリーンショット
- キーボード操作時のフォーカス遷移記録
- 変更コンポーネントのコントラスト検査結果
- 影響ルート・状態一覧
不足があればレビュー以前に不合格。この単純ルールで手戻りが大幅に減ります。
スクショ差分が機能するための前提
差分基盤が不安定だと、レビューは疲弊して形骸化します。安定化の必須項目は次です。
- フォントとブラウザバージョン固定
- シード済みfixtureデータ
- テスト時アニメーション無効化
- 画面サイズプリセット統一
再現性がある差分だけが、判断材料になります。
3層検証で速度と信頼性を両立
重い検証を毎PRに全適用すると開発が止まります。層分離が有効です。
- Pre-commit: 軽量スナップショットとlint
- PR: 主要ルートの視覚差分+アクセシビリティ検査
- Nightly: 広範シナリオとflaky解析
この構造で、日中は速く、夜間に網羅性を補完できます。
人間レビューの価値はむしろ上がる
自動化は人を不要にするのではなく、論点を高密度化します。レビュアーは次を確認します。
- 状態遷移が利用者に明確か
- エラー/空状態の表現が意図的か
- 多言語展開でレイアウトが破綻しないか
“仕様として正しい見た目か”は、依然として人間判断が主役です。
インシデント運用へ接続する
UI不具合を軽視すると顧客影響を見逃します。バックエンド同様に重大度を定義します。
- 決済/登録導線の崩れ: Sev1
- 管理画面主要機能の視認性問題: Sev2
- 低頻度ページの軽微崩れ: Sev3
チケットに証跡画像と影響ルートを自動添付し、初動判断を高速化します。
証跡基盤のセキュリティ
証跡は便利ですが、機微情報の塊にもなります。
- スクショのPII自動マスク
- 保持期間の短期化
- 生成証跡の署名による改ざん検知
規制業界では、証跡の完全性自体が監査対象です。
導入手順
- 1〜2週: 証跡契約とCIブロック条件を定義
- 3〜4週: 再現性ある撮影環境を安定化
- 5〜6週: A11y/フォーカス遷移を標準検査へ
- 7〜8週: レビューガイド整備とノイズ削減
評価指標は、見逃し不具合件数、レビュー時間、ロールバック頻度です。
まとめ
AIエージェント時代のUI品質は、“うまく見えるはず”では守れません。証跡を契約化し、差分を再現可能にし、人間レビューを高付加価値化することで、速度を維持したまま品質保証の実効性を高められます。
