AIが作ったコードのQCは、従来と何が違うのか

株式会社ファストコーディングでフロントエンド開発と技術戦略を担当している黒田です。

AIが生成した画面を見て、「見た目は合っているから、あとは細かい確認だけ」と判断したくなる場面があります。ただ、ブラウザで一度きれいに表示できたことと、納品できる品質に達したことは別です。

従来のコーディングでも、表示、動作、コードの確認は必要でした。AIを使う場合は、生成が速い分、同じ設計上の問題が複数ページへ広がる前に見つける工程が、より大切になります。

見た目が合っていても、確認は残っている

例えば、同じカードのはずなのに、ページごとにHTML構造や余白の扱いが違う。通常の文字量なら収まるが、長い見出しで隣の要素を押し出す。初期表示は合っているが、入力エラーの状態が考慮されていない。こうした問題があります。

見た目だけを直していくと、別の画面幅や関連ページへ影響が出ることもあります。AIへの追加指示を繰り返す前に、構造、共通ルール、仕様のどこに原因があるかを切り分ける必要があります。

制作側の意図を知っていると、「これはこういう理由だろう」と補って見てしまいます。検査担当を分ける意味は、その思い込みを減らすことです。仕様や品質基準まで渡さない、という意味ではありません。

機械的に判定できる項目は、スクリプトや検査ツールで確認します。一方、HTMLの意味構造や、共通部品へまとめる範囲など、仕様と照らす必要がある内容は、AIレビューと人の確認を組み合わせます。

例えば、似たボタンを共通部品にしていても、片方だけ送信中の状態が必要な場合があります。単にコードが重複しているからまとめるのではなく、役割と状態の違いを見て判断します。

共通ルールと既知の問題を記録することも必要です。ただし、情報を追記しただけで、既存コードが修正されたことにはなりません。指摘の対象と修正の版を追い、再検査して閉じます。

Figmaの値を実装へ写しても、フォントの描画や改行、可変幅によって実際の見え方は変わります。ブラウザへ表示して比較する工程が必要です。

当社では、AIエージェントがPC・SP・タブレットの画面を取得して比較し、コーダーが差異の原因を判断して調整します。専任QCは、案件で合意した端末・ブラウザでも確認します。

例えば、指定されたスマートフォン幅で合っていても、その少し手前の幅で見出しが不自然に折れる場合があります。カンプと同じ幅だけでなく、中間幅も確認対象に含めます。

文字切れ、重なり、横スクロール、画像欠落などを確認し、デザイン意図に関わる判断は人へ戻します。比較画像が揃っただけでは、納品可否は決まりません。

メニューを開く、フォームへ入力する、エラーを表示する、商品を選択する。ユーザーの操作で、画面の状態は変わります。

例えば、送信中のボタン、検索結果が0件の場合、画像がない場合、長い商品名などです。Figmaや仕様にない状態は、AIに推測させず、人が確認して条件を決めます。

検査では、操作手順と期待する結果を対応付けます。必要な画面を開いただけなのか、操作と結果まで確かめたのかが分かるよう、記録を残します。

掲載されていない状態まで無制限に確認するのではなく、対象ページ、端末・ブラウザ、データ、主要操作、例外条件を、案件の要件とリスクに合わせて決めます。

人が必要なのは、最終QCだけではありません。実装前の分析、共通化の範囲、タブレットや中間幅の見せ方、例外状態、修正方法など、工程の途中にも判断があります。

役割を整理すると、次のようになります。

担当	主な役割
AI・検査ツール	分析、反復実装、画面比較、自動監査、文脈を含むレビューの支援
コーダー	設計判断、例外対応、表示調整、指摘箇所の修正
専任QC	実装担当とは別の視点で表示・動作・整合性を確認
AIMES	担当と検査結果、差し戻し、修正、再確認、承認・完了条件を管理

これらは一人が順番に確認したという記録だけでは足りません。誰が何を判断し、どの指摘が残っていて、何を再確認したかが分かることが必要です。

共通のヘッダーを修正したら、そのページだけが正しく見えることを確認して終わらせない。関連ページや画面幅への影響も確認する。ここが、ページ数の多い案件では特に重要です。

当社では、AIMES上で検査、差し戻し、修正、再確認を管理します。必要な検査が終わっていないものや、人の判断が残っているものを、コードが生成されたという理由で完了にはしません。

ワークフローの考え方は、工程と役割、判断基準を明確にするという基本です。その工程を実行し、完了した根拠まで追うためにAIMESを使います。ツールへ記録があることと、実際に合格していることを混同しない運用が大切です。

AIを使う外注先へは、次の三つを確認すると、品質工程が見えやすくなります。

「AIがチェックした」「人間が見た」という説明を、対象と方法、完了条件まで具体化することです。検査の中身が分かれば、納品時に何を確認するかも発注前に揃えられます。