工事の案件管理アプリを、AIで作る。
工事の問い合わせ内容・対応状況・次の対応を一覧にする管理画面を、AIに依頼して作ります。コピー用の依頼文と操作できるデモで、入力から確認まで試しましょう。
1. 相談の追加と対応状況の変更を
完成見本で試す
下の完成見本では、工事の相談を追加し、対応状況と次の対応を変更できます。ブラウザで操作を試してください。
相談を追加し、対応状況を変更する
- 仮名を選び、相談内容を入れて「新規相談として追加」を押す。
- 一覧の「新規相談」を「確認中」に変える。
- 「次の対応」を入力し、「変更を反映」を押す。
架空の3件を入れた練習用画面です。入力は保存・送信されず、再読み込みで初期状態に戻ります。実名や連絡先は入力せず、仮名で試してください。

2. 相談の受付と管理に
必要な項目を決める
受付時に入力する項目と、対応中に更新する項目を決めます。この見本で管理する項目は、次のとおりです。
| 項目 | 入れる内容 | 使いどころ |
|---|---|---|
| 管理ID | C-001のような連番 | 似た相談を取り違えずに探す |
| 受付内容 | 仮名・工事種別・相談内容・希望する連絡方法 | 誰から、何の相談が来たか読む |
| 対応状況 | 新規相談/確認中/見積もり中/日程調整中/対応済み | いま、どこまで進んでいるか揃える |
| 次の対応 | 「写真を確認」「現地調査の候補日を返す」など | 一覧を見た人が、次に何をするか分かる |
複数人で使う場合は担当者、対応漏れを確認する場合は期限も必要です。担当者や対応期限など、自社で管理したい項目を依頼文に追加します。
3. ChatGPTに相談受付と
案件管理画面の作成を依頼する
ChatGPTのWorkモードに、下の依頼文を貼り付けて送信します。工事の相談を登録し、対応状況を変更できる管理画面の作成を依頼する文章です。
- 作成依頼文をコピー
- ChatGPTのWorkに貼り付け
- 送信する


HTMLファイルを保存してブラウザで開く
AIから返ってきたHTMLファイルを保存し、ブラウザで開きます。架空の相談を入力して、相談の追加や対応状況の変更を確認します。
追加したい項目や機能をAIに伝える
「担当者の欄を追加して」「担当者で絞り込めるようにして」のように、追加する項目と動作を伝えます。
「次の対応」が空欄の案件を見つけやすくしたいです。一覧に「次の対応なし」の絞り込みを追加してください。既存の相談追加と状況変更も動くことを確認してください。
4. 作成した管理画面の
入力・変更・CSV出力を確認する
必須項目と相談の追加を確認する
仮名と相談内容などを入力し、新しいIDで一覧に追加されるか確認します。必須項目が空欄の場合は追加されないことも確認します。
対応状況と次の対応の変更を確認する
対応状況と次の対応を変えて「変更を反映」を押し、変更内容が一覧に表示されるか確認します。絞り込みも変更し、該当する案件だけが表示されるか確認します。
CSVの内容を確認する
見本の「全件をCSV出力」で保存し、文字や列が崩れていないか確認します。CSVには、出力した時点の一覧が入ります。
実運用のデータ保存先を決める
この見本の入力内容は、再読み込みで消えます。会社で使う場合は保存先を決め、画面を閉じて開き直してもデータが残ることと、復元方法を確認します。
会社で使う前に、保存先と利用者を決める
誰が登録・閲覧・変更できるか、データの保存先、バックアップの方法を決めます。複数人で使う場合は同時更新、連絡先を扱う場合はアクセス制限と削除方法も確認します。
お客様向けの受付フォームを公開する場合は、通知先・受付後の案内・個人情報の扱いを決めてから作成します。