| ステップ | 目的・作業内容 | ChatGPTへの依頼内容（プロンプト例） | 保存するファイル（正本） |
| 事前準備 | アプリ開発用のフォルダをパソコンに作成し、設計書やプログラムを分ける準備をします。 | （PC上で手作業で作成） | docs/（設計書用）src/（プログラム用）など |
| Step 1 | 現状の業務分析 今の仕事の流れと、どこに課題があるかをAIに整理させます。 | 「現在の業務は〇〇です。業務フローと問題点を整理してください」 | 01_業務フロー.md |
| Step 2 | 要件定義（作るものの決定） 前のファイルをAIに読ませ、アプリに必要な機能をまとめさせます。 | 「01を読んでください。アプリの要件定義を作成してください」 | 02_要件定義.md |
| Step 3 | 必要な画面の洗い出し これまでの設計書を前提に、ログイン画面や入力画面などをリストアップします。 | 「01と02を読んでください。画面一覧を作成してください」 | 03_画面一覧.md |
| Step 4 | 画面の詳細設計 各画面に「どんな入力項目やボタンが必要か」を具体的に決めます。 | 「01〜03を読んでください。入力画面を設計してください」 | 04_画面設計.md |
| Step 5 | データの保存方法（DB設計） 顧客情報や日報など、裏側でどうデータを管理するかを設計します。 | 「04までを読んでください。データベース設計をしてください」 | 06_DB設計.md |
| Step 6 | 詳細仕様書の作成 プログラミングを始めるための、最終的な細かなルールブックを作ります。 | 「これまでの設計書を読んでください。詳細仕様書を書いてください」 | 08_詳細仕様.md |
| Step 7 | 最初のプログラム作成 ここで初めて、設計書をもとに1つ目の画面のプログラムをAIに書かせます。 | 「設計書を読み、日報入力画面だけをプログラムで作成してください」 | sales.html などのプログラムファイル |
| Step 8 | 追加機能の作成 同じ設計書を前提にして、次の画面のプログラムを作らせます。 | 「同じ設計書を読み、顧客管理画面を作成してください」 | customer.html など |
| Step 9 | 各画面の結合（統合） バラバラに作った画面をつなぎ合わせ、共通のメニューなどを整えます。 | 「設計書とすべてのソースコードを読み、これらを統合してください」 | 共通メニューのファイルなど |
| Step 10 | 最終レビューと品質チェック 設計書通りか、セキュリティに問題がないか等、AIに全体を点検させます。 | 「すべての設計書とソースコードを前提に、整合性や改善点をレビューしてください」 | （AIが提案する修正版） |
| 最大のメリット | AIの「忘れ物」を防ぐ仕組み 設計書を常に「唯一の正しい情報（正本）」として読ませることで、会話が長くなってもAIが混乱しません。 | – | – |
| 活用のコツ | そのまま真似できるマニュアル化 「プロンプト」と「ファイル名」をセットで示せば、ITに不慣れな社員でも再現できる手順書になります。 | – | – |
例えば、「営業日報管理アプリ」を作る場合は、次のように進めます。
プロジェクトフォルダを作成する
まず、PC上にプロジェクト用のフォルダを作ります。
営業日報アプリ/
├─docs/
├─src/
├─test/
└─README.md
この時点では、まだプログラムはありません。
Step1 業務分析を行う
ChatGPTへ依頼します。
営業日報管理アプリを作りたいです。
現在の業務は
営業
↓
紙にメモ
↓
Excelへ入力
↓
上司へメール
↓
Excelで集計
です。
業務フローと問題点を整理してください。
AIが作成した内容を確認し、修正したら
docs/01_業務フロー.md
として保存します。
以後、この内容はチャットではなく Markdownファイル が正本になります。
Step2 要件定義
新しいチャットでも構いません。
最初に
添付した
01_業務フロー.md
を読んでください。
営業日報アプリの要件定義を作成してください。
AIが要件定義を書きます。
修正したら
docs/02_要件定義.md
として保存します。
Step3 画面設計
また別チャットでも構いません。
最初に
01_業務フロー.md
02_要件定義.md
を読んでください。
画面一覧を作成してください。
AIが
ログイン
ホーム
営業日報入力
顧客検索
ダッシュボード
管理画面
などを作ります。
保存します。
03_画面一覧.md
Step4 画面イメージ
01_業務フロー.md
02_要件定義.md
03_画面一覧.md
を読んでください。
営業日報入力画面を設計してください。
AIが
担当者
訪問日
顧客
商談内容
受注予定
登録
という画面を作ります。
修正後
04_画面設計.md
へ保存します。
Step5 データベース設計
04_画面設計.md
まで読んでください。
データベース設計をしてください。
AIが
営業担当
顧客
営業日報
案件
などを設計します。
保存
06_DB設計.md
Step6 詳細仕様
これまでの
01
02
03
04
06
を読んでください。
詳細仕様書を書いてください。
保存
08_詳細仕様.md
Step7 開発開始
ここから初めてプログラムです。
例えば
以下を読んでください。
03_画面一覧.md
04_画面設計.md
06_DB設計.md
08_詳細仕様.md
営業日報入力画面だけをGoogle Apps Scriptで作成してください。
AIは
sales.html
sales.js
sales.gs
だけ作ります。
完成したら保存します。
src/
sales.html
sales.js
sales.gs
Step8 次の画面
今度は
同じ設計書を読んでください。
顧客管理画面を作成してください。
完成したら保存
customer.html
customer.js
Step9 統合
例えば
営業日報入力画面
顧客画面
ダッシュボード
の3画面が完成したら、
以下の設計書を読んでください。
03_画面一覧.md
04_画面設計.md
05_画面遷移図.md
08_詳細仕様.md
以下のソースコードを読んでください。
sales.html
customer.html
dashboard.html
これらを統合してください。
・共通メニューを作成
・画面遷移を追加
・共通CSSを作成
・共通JavaScriptを作成
と依頼します。
ここで初めて
common.css
common.js
menu.html
などが作られます。
Step10 最終統合
すべて完成したら最後に
docsフォルダ内の
すべてのMarkdown
srcフォルダ内の
すべてのソースコード
を前提としてレビューしてください。
以下を確認してください。
①設計書との整合性
②画面遷移
③データベース
④命名規則
⑤セキュリティ
⑥パフォーマンス
⑦不要なコード
⑧重複コード
⑨改善点
その後、修正版を提示してください。
この方法の最大のメリット
この方法では、ChatGPTは毎回「設計書（Markdown）」を読み込んでから作業するため、途中で会話履歴が長くなっても問題ありません。
設計書が常に「正本（唯一の正しい情報源）」になるので、AIが以前の会話を忘れても影響は小さくなります。