株式会社ファストコーディングでフロントエンド開発と技術戦略を担当している黒田です。
前回の記事で「オフショア開発15年の経験がAIコーディングにそのまま使えた」という話を書きました。今回は、そのワークフローの中身について書きます。
「ワークフローが大事」というのは抽象的な話です。じゃあ実際にそのワークフローには何が書いてあるのか。うちのチームがどこまで具体的に定義しているのかを、可能な範囲で公開してみます。
ワークフローの4つの構成要素
うちのAIコーディングのワークフローは、大きく4つの要素で構成されています。
1. エージェント配置図：誰が何をやるか
最初に決めるのは「どのAIエージェントに、どの作業を、どの順番でやらせるか」です。
人間のチーム編成と同じ感覚です。プロジェクトが始まったら、まずチーム構成を決めますよね。誰がコーディングして、誰がレビューして、誰がQCするか。AIコーディングでも同じことをやります。
ただし、人間と違うのは、AIエージェントにはそれぞれ「得意なこと」と「苦手なこと」があるという点です。あるエージェントはHTML構造の生成が得意だが、CSSのレスポンシブ対応は苦手。別のエージェントはCSSは得意だがアクセシビリティの考慮が弱い。
この特性を踏まえて、「このエージェントにはこの工程」「この順番で処理する」というのを事前に全部決めます。途中で人間が判断して振り分けるのではなく、事前に決め切るのがポイントです。
2. 検証フローの分離：作る人≠チェックする人
これは前回の記事でも触れましたが、ワークフローの中で最も重要な要素です。
制作エージェントと検証エージェントを完全に別のワークフローとして設計します。同じプロジェクトの中で、制作チームと検証チームが並行して動く。制作チームが5ページ作ったら、検証チームが5ページチェックする。この「並行稼働」が速度と品質を両立させる鍵です。
重要なのは、検証エージェントは制作エージェントのコンテキスト（前提情報や過去のやりとり）を一切共有しないようにしていることです。人間でいう「先入観なしでレビューする」状態を強制的に作っている。
3. 静的記憶：AIが参照するナレッジベース
「静的記憶」というのは、うちのチーム内で使っている呼び方です。
AIは人間と違って、「前にこういうことがあったから、今回はこうしよう」という経験学習ができません。前のプロジェクトで「この書き方だとSafariで表示が崩れた」という経験をしても、次のプロジェクトではまた同じことをやります。
そこで、プロジェクトごとに「AIが参照すべき情報」を体系的にまとめた場所を用意しています。うちではGitLabのWikiを使っていますが、ツール自体は何でもいい。重要なのは以下の3点です。
- AIが効率的に読み込める形式であること（長すぎない、構造化されている）
- プロジェクト固有のルールが明記されていること（デザイントークン、コーディング規約、既知の問題パターン）
- 制作中に発見された新しい問題パターンが随時追記されること
3つ目が特に重要で、ワークフローの中に「新しい問題が見つかったら静的記憶に追記する」という工程を組み込んでいます。制作が進むにつれてナレッジベースが育っていく仕組みです。
4. 人間のチェックポイント：マイルストーン定義
AIに全てを任せるわけではありません。要所要所で人間が確認する「マイルストーン」を事前に定義しています。
うちの場合、以下のタイミングで人間のチェックが入ります。
- テンプレート確定時：最初の数ページを人間が目視で確認し、デザインとの差異、コード品質、アクセシビリティをチェック
- 展開完了時：テンプレートから展開されたページ群を、ランダムサンプリングでチェック
- 検証完了時：検証エージェントの指摘内容を人間が確認し、「本当に問題か」「修正の優先度は」を判断
- 最終チェック：全ページ・全デバイスを人間のQCが通す
このマイルストーンのタイミングと確認基準を、プロジェクト開始前に全部決めます。「なんとなくいいタイミングでチェックする」ではなく、「何ページ完成したらチェックする」「何を基準にOKとする」を明文化する。
なぜここまで細かく定義するのか
ここまで読んで「そこまでやるのか」と思った方もいるかもしれません。
正直なところ、ここまで細かく定義するのは手間です。ワークフローの設計だけで数日かかることもある。
でも、この「事前の設計コスト」を払うことで、制作フェーズでのトラブルがほぼゼロになる。手戻りがない。判断に迷う時間がない。問題が大きくなる前に検知できる。
人間だけのチームでも、プロジェクトの段取りが良いチームは速い。段取りが悪いチームは、いくら個人の能力が高くても遅い。AIコーディングではこの差がさらに顕著になります。
ワークフローは「秘伝のタレ」ではない
誤解してほしくないのは、このワークフローは「秘伝のタレ」ではないということです。
特別な技術やツールを使っているわけではない。やっていることは「暗黙知を明示化する」「判断基準を事前に決める」「役割を分離する」という、プロジェクトマネジメントの基本です。
ただ、AIコーディングでは、この基本を妥協なくやり切ることが求められる。人間同士なら「ここは阿吽の呼吸で」で済むところを、全て文書化する必要がある。その覚悟と工数を投入できるかどうかが、AI活用の成否を分けていると感じています。
現場でこのワークフローがどう感じられたかは、働くおかんの記事が率直に書いてくれています。「あうんの呼吸がなくなったら仕事がラクになった」というのは、ワークフローの中で働く人の正直な実感だと思います。
まとめ
AIコーディングのワークフローは、以下の4要素で構成されています。
- エージェント配置図：どのAIに何をやらせるか、どの順番で進めるかを事前に定義
- 検証フローの分離：制作と検証を別ワークフローとして並行稼働。コンテキストを共有しない
- 静的記憶：AIが参照するナレッジベースを体系的に整備し、随時追記する仕組み
- マイルストーン定義：人間がチェックするタイミングと基準を事前に明文化
どれも特別な技術ではなく、プロジェクトマネジメントの基本の徹底です。ただし、AIコーディングではこの基本を妥協なくやり切ることが品質を決めます。
フロントエンド開発のワークフロー設計やAI活用について相談したい方は、株式会社ファストコーディングのお問い合わせフォームからお気軽にご連絡ください。
