📝

AIに設計を書かせるだけで、理解負債と実装漏れが激減した話

に公開

概要

こんにちは!PeopleX AI面接を開発しているせりせり(@seriseri_55)です!みなさん開発組織内でのAI活用は上手くいっているでしょうか?

先日keitaknさんによる技術負債も理解負債も生まないAIコーディング手法を読みました(めちゃくちゃためになった)。その中で「最初に実装計画をAIに立てさせる」という話が紹介されていたのですが、弊チームでも 実装前にAIにデザインドキュメント(設計書)を書かせることで、AI活用の恩恵を強く感じるようになりました。

本記事では、その取り組みについて
Before / After、実体験、具体的な活用方法 を私目線で紹介します。

結論

  • AIにデザインドキュメント(設計書)を生成させる
  • 生成させたデザインドキュメントをチームでレビュー
  • レビューしたデザインドキュメントを元にAIに実装させる

このプロセスを踏むだけで、チームメンバーの理解負債(AIの書いたコードが何をしているかわからない)と、AIによる実装漏れが激変し、AIによるアウトプットの質が格段に向上しました。
正直、「もっと早く気づきたかった……」と爆裂に後悔しています。

Before:AIの実装が不正確なことが多くレビューに割く労力が大きかった

見出しの通りですが、弊チームでも Claude Code や Cursor などの
AIコーディングツールを活用してきました。

ただ、以下のような課題を感じる場面も少なくありませんでした。

場当たり的な実装になりがち

  • 「〜の機能を実装して」とそのまま指示してしまう
  • コンテキスト不足により、その場限りのコードが生成される

既存の設計・方針を無視したアウトプット

  • これまでの実装方針とズレたコードが生成される
  • 結局使えない、もしくは大幅な修正が必要になる

レビューコストが高い

  • AIが書いたコードを、設計レベルから人間がレビューする必要がある
  • 楽になるはずが、別のところで時間が溶けていく

実装漏れがQAで発覚する

  • 想定していた仕様が抜けていることにQAフェーズで初めて気づく
  • 手戻りが発生する

これらの課題により、

AIを使うより、自分で書いた方が早くてストレスも少なくない?

と感じることが正直よくありました。

After:AIの実装が正確になり、AIの書いたコードに対するキャッチアップが格段に早くなった

後述しますが、以下のフローに変更しました。

  • 仕様書をAIに渡し、デザインドキュメントを生成
  • デザインドキュメントをチームでレビュー
  • レビュー済みのデザインドキュメントを元にAIに実装させる

このフローに変えたことで、次のような変化がありました。

  • 実装前に仕様や方針の曖昧さを潰せる
  • AIのアウトプットが、実装者の意図とズレにくくなる
  • 設計を前提にレビューできるため、コードレビューが圧倒的に楽になる

AIに任せられるタスクの粒度、実装の正確性、レビューのしやすさ。
すべてが改善し、開発者体験は間違いなく向上しました。

どのようにAIの活用フローを変えたか

最初に書いたように、以下のフローでAIに実装させるようにしました。

  • AIにデザインドキュメント(設計書)を生成させる
  • 生成させたデザインドキュメントをチームでレビュー
  • レビュー済みの設計を元にAIに実装させる

このプロセスを踏むだけで、AIのアウトプットの質が大きく改善しました。

そもそもデザインドキュメントとは

デザインドキュメントとは、開発前の設計方針をまとめたドキュメントです。

概要

  • 目的
    • チーム内の共通認識形成
    • 設計の早期レビューによる手戻り削減
    • 技術的意思決定の背景を残す
  • 内容
    • プロジェクトの背景・目的
    • 技術的選択肢(アーキテクチャ)
    • トレードオフ、懸念点、成果など。
  • 特徴
    • 自然言語(文章)で書く
    • 要点に絞る(詳細にしすぎない)
    • 開発途中で更新する(生きているドキュメント)。
  • メリット
    • 設計思想の可視化
    • 組織への知見蓄積
    • 非同期でのコミュニケーション促進

含めている主な内容

  • 大まかな概要
    • 類似する設計パターンの列挙(あれば)
    • UI/UX視点での体験概要
  • 実装概要
    • フロントエンドの hooks / interface
    • バックエンドのレイヤー分離(Controller / Service / Repository)
    • データ構造・テーブル周りの変更
  • テスト戦略
    • 単体 / E2E どこで何を担保するか
  • 意思決定が必要項目の精査
    • 機能フラグの有無
    • 権限設計
    • 大量実行時の処理方針(例:何件以上でジョブ化するか)

仕様をまとめたチケットをAIに渡し、
デザインドキュメントを生成 → 人間がレビューすることで、
実装前に論点と方針を固められるようになりました。

デザインドキュメント生成のためのプロンプト

下記のテンプレートに仕様書を貼り付け、Claude Codeもしくはcursorに入力を渡すことでデザインドキュメントを生成しています。

## プロンプト(コピーして使用)

このプロジェクトで新機能を開発するためのデザインドキュメントを生成してください。既存の実装やドキュメントと同じ思想・用語・構成で設計すること。

【必須の事前読み込み】
- **アーキテクチャ・規約の把握**: プロジェクト内の次のようなドキュメントを探して読み、レイヤー構成・ディレクトリルール・コーディング規約を把握すること。
  - ルートの README.md、CONTRIBUTING.md、ARCHITECTURE.md、docs/ 配下
  - エージェント用のルール(CLAUDE.md、.cursorrules、docs/development.md など)
  - レビュー観点をまとめたファイル(.claude/review.md、.github/pull_request_template.md など)
- **既存の設計・PRスタイルの把握**: 既存のデザイン書・PR説明・設計サンプルがあれば参照し、セクション構成・トーン・用語に合わせること。
  - 例: docs/design/, .local/pr/, design/, 過去のPR説明のテンプレート など

【入力情報】
以下のいずれかを渡してください:
- 機能の概要・背景・要件(箇条書きや短文で可)
- チケットやPRDの要約
- 「〇〇のような機能を追加したい」という説明

【出力形式】
日本語で、以下のセクションを含む Markdown のデザインドキュメントを出力すること。該当しないセクションは「該当なし」または「なし」と簡潔に記載すること。プロジェクトにフロントエンドやDBがない場合は、そのセクションは省略または「該当なし」でよい。

## 必須セクション

1. **概要**
   機能を2〜3文で説明し、ビジネス上の目的を書く。

2. **背景・課題**
   なぜこの機能が必要か。現状の不足や問題を具体的に書く。

3. **目的・スコープ**
   本機能で「やること」の範囲を明確にする。スコープ外も書く(任意だが推奨)。

4. **修正後/実装後の動作**
   ユーザーまたは利用者から見た振る舞い(画面・API・CLI 等の利用イメージ)。Before/After があるとよい。

5. **実装方針**
   技術的なアプローチの要約。複雑なフローがあれば mermaid の sequence 図で記述する。

6. **サーバー/API 設計**(サーバー側やAPIを扱う場合)
   プロジェクトのアーキテクチャドキュメントで定義されているレイヤー・用語に従い、以下を書く:
   - **レイヤー配置**: どのレイヤー(例: Controller/Handler、Service/UseCase、Repository/DataAccess など、プロジェクトの用語に合わせる)をどのディレクトリ・モジュールに置くか
   - **委譲方針**: どの処理をどのレイヤーに置くか(プロジェクトの責務の分け方に準拠)
   - **認可・認証**: 必要な場合、どのように行うか(プロジェクトの仕組みに合わせる)
   - **新規・変更するAPI**: メソッド・パス・役割・リクエスト/レスポンスの概要・想定するエラーケース
   - プロジェクトで定められているURL・ルーティングのルール(例: ハイフン区切り)に従うこと

7. **フロントエンド/クライアント設計**(フロントエンドやクライアントアプリを扱う場合)
   プロジェクトのルーティング・状態管理・コンポーネント構成の規約に従い、以下を書く:
   - **配置**: どのルート・ディレクトリ配下に置くか。URL・パスのルール
   - **ページ/画面構成**: どのコンポーネントでデータ取得・副作用(API呼び出し等)を行うか。プロジェクトの慣例に合わせる
   - **共有モジュール**: 既存の domains/、hooks/、lib/ 等の利用・追加の要否
   - **フォーム・バリデーション**: フォームやスキーマの置き場所・分離のルール(プロジェクトの慣例に合わせる)
   - **多言語・アクセシビリティ**: プロジェクトで求められている場合はその方針
   - **UIコンポーネント**: 共通コンポーネントの利用ルール(プロジェクトで定められていればそれに従う)

8. **データベース・スキーマ変更**(永続化層やDBを扱う場合)
   変更がない場合は「なし」。ある場合は以下を書く:
   - 使用しているORM・マイグレーションの種類に合わせて、モデル/テーブル/カラム/リレーションの追加・変更を記述
   - カラム・テーブル削除など後方互換のない変更がある場合、プロジェクトの「安全なデプロイ手順」に言及する(存在すれば)
   - 必要に応じて mermaid の ER 図で周辺モデルとの関係を記述
   - 命名規則(テーブル名・カラム名・ID の採番ルールなど)はプロジェクトの規約に合わせる

9. **変更予定ファイル(主要なもの)**
   新規・変更が見込まれるファイルをパスで列挙し、それぞれ1行で役割を書く。

10. **テスト方針**
    プロジェクトのテスト戦略(単体・結合・E2E の役割、配置、ツール)に合わせて書く:
    - どの層・どのシナリオをどの種類のテストでカバーするか
    - プロジェクトで定められているアサーション・モックのルールがあればそれに言及

11. **レビュー観点**
    実装時にレビュアーに特に見てほしい点(レイヤー責務、認可、破壊的変更、セキュリティ、パフォーマンスなど)。

【制約】
- 既存の実装・ドキュメントと同じ思想で設計すること。プロジェクトのアーキテクチャ・ディレクトリルール・命名・テスト方針を逸脱しないこと。
- 出力は日本語とし、技術用語は**このプロジェクトで使われている用語**(レイヤー名、フレームワーク名、ディレクトリ名など)に合わせること。

まとめ

本記事では

  • AIにデザインドキュメントを書かせる
  • それを人間(チーム)がレビューする
  • レビュー済みの設計を元にAIに実装させる

というシンプルなフローに変えた結果、
AI活用の体験が大きく改善した話を紹介しました。

この記事が、みなさんのAI活用のヒントに
少しでもなれば嬉しいです。

最後までお読みいただき、ありがとうございました!

PeopleXテックブログ

Discussion