
ふわっとしたDXの要件をChat先生の力を借りて打ち合わせ中に固める話(ChatGPT部, 大城)
こんばんは、ChatGPT部、部長の大城です。めっちゃ久々の記事。
普段は本業でデータ活用の支援を行なっているのですが、ChatGPT-4を使いながらDXやIT要件を固めるのがめっちゃ効率的でしたので、ご共有。
( ライブコーディングというかライブ指示出し&可視化、本業で使ってて、久々に感動しました )
やりたいこと & ダイジェスト
今回は報告書作成の自動化をテーマにしてみました。調査や実験した内容があちこちに散らばっているものを改善するという例。定型フォーマットにしてデータベース化、そして登録ツールなどがあると良い感じ。
IT屋さん同士の会話なら別として、通常はお客さんとしては「DXやIT化で、具体的に何をやれば良いのか?」となりますので、そこをモック的なものをその場で作って見せつつ議論するという使い方です。
ダイジェスト
Chat先生に都度こういうものを作ってもらいながら議論しました。



ということで以下、その実行方法です。
始め方・プロンプト
最初はこんな感じで依頼(プロンプト)を出します。
[ ChatGPTへの依頼事項 ]
以下の内容に基づいて、要件定義の支援をお願いします。
処理が長すぎると途中でエラーになることがあるので、ある程度の区切りで次の実行を確認してください。
[ 報告書自動生成PJ ]
・概要:これまで手作業で行なっていた報告書の作成の自動化プロジェクト
・ステップ:
1.フォーマット例を参考に、outputイメージの作成(ダミーデータ)
2-1.上記をデータベースとして実現するための設計案(テーブル定義)
2-2.テーブル間のデータ構造・リレーション
3.上記のデータを入力するためのUI検討
・フォーマット例
・報告日、案件名、担当者名
・概要
・実験データ(表形式)
・ネクストアクション案
あとは適宜あいづちを打ちながら、調整すればOKです。
0. Chat先生の回答など(全体ステップ)
チャット先生の回答はこちら
プロジェクト「報告書自動生成」の要件定義を支援するために、提供された情報に基づいて、それぞれのステップの詳細を検討していきましょう。
1. フォーマット例を参考にしたOutputイメージの作成
まず、ダミーデータを用いて報告書のフォーマット例に基づくOutputイメージの作成が必要です。このイメージは、報告書のレイアウト、デザイン、含まれるべき情報の種類(報告日、案件名、担当者名、概要、実験データ、ネクストアクション案)を示します。このステップでは、実際にどのような情報が報告書に含まれるか、そしてその情報がどのように整理されるべきかを示す具体的な例を作成します。
2-1. データベースの設計案(テーブル定義)
データベース設計では、報告書に必要な情報を管理するためのテーブル定義を行います。以下のようなテーブルが考えられます。報告書テーブル:報告日、案件名、担当者名、概要、ネクストアクションの案を含む。
実験データテーブル:実験に関する具体的なデータを表形式で管理。
2-2. テーブル間のデータ構造・リレーション報告書テーブルと実験データテーブルは、報告書ごとに一つ以上の実験データが存在することを考慮して、1対多の関係が考えられます。
担当者名は、別の担当者テーブルに格納し、報告書テーブルとリレーションを持たせることで、担当者の情報を再利用可能にする設計も考えられます。
3. UI検討
報告書とそのデータを効率的に入力、編集、閲覧できるUIの設計が重要です。UI設計では以下の点を考慮する必要があります。報告書作成ウィザード:ユーザーがステップバイステップで報告書を作成できるように案内する。
データ入力フォーム:実験データなどの詳細情報を簡単に入力できるフォーム。
報告書のプレビュー機能:作成中の報告書をリアルタイムでプレビューし、最終的な出力を確認できる。
これらの要素は、最終的な報告書の品質を保証し、作成プロセスをスムーズにするために不可欠です。次のステップとして、これらの概念をさらに詳細に検討し、具体的な設計案に落とし込んでいく必要があります。
いい感じですね。では次に具体的なステップに入っていきます。
1. outputイメージの作成
データはダミーで、以下のような指示を出しています。
[わたし]
いい感じですね。では、1のステップから具体化をお願いします。 ある程度体裁の整った、報告書のoutputイメージがあると嬉しいです。 内容はダミーで良いです。
チャット先生の回答はこちら。
いくつか抜粋していますが、全ログを最後にURL載せておきますね。(->画像付きのログなのでなぜかシェアできませんでした・・最初のプロンプトがあれば再現できると思いますので、ご興味お持ちの方はお手元で実行してみてください)
[ ChatGPT-4 ]
報告書のOutputイメージを具体化するために、以下の内容でダミーデータを用いた報告書の例を作成します。
報告書のフォーマット例報告日: 2024年3月7日
案件名: 新型エネルギー源の開発研究
担当者名: 山田太郎
概要
このプロジェクトでは、再生可能エネルギーの一環として新型エネルギー源の開発に取り組んでいます。本報告書では、最近の実験結果と次のステップについて報告します。
実験データ
以下は最近行われた実験のデータです(表形式)。
実験ID実験日実験結果観察点0012024年3月1日成功エネルギー効率が向上0022024年3月3日部分的に成功効率は良好だが、コストが高い0032024年3月5日失敗材料の耐久性に問題あり
ネクストアクション案材料の耐久性に関する追加実験を行う。
コスト削減に向けた代替材料の調査を開始する。
次回の会議で、実験002のコスト問題についての議論を行う。
HTMLでイメージを作ってもらってダウンロード
HTML形式にしてもらってダウンロードするとこんな感じです。
プロンプトはこちら
[ わたし ]
ありがとうございます。 先ほどのテキスト項目のみで構いませんので、HTML / CSSで作成し、ダウンロードできる状態にしてもらえますか?

報告書っぽい雰囲気ですね。これをイメージしつつ、データベースの構造や入力ツールの画面などを考えてもらいます。
余談:outputイメージ、でなぜか画像生成
ちなみに「outputイメージを作成してください」と指示をすると、なぜか画像生成でイメージを作ってくれてました。いや、正直はここまではいらないのですが、まぁ営業資料としてはありかも?

2. データベースのテーブル設計
こちらも丸投げで進めていきましょう。今回はテーブル定義とテーブル間の関係性について。
・ステップ:
1.フォーマット例を参考に、outputイメージの作成(ダミーデータ)
2-1.上記をデータベースとして実現するための設計案(テーブル定義)
2-2.テーブル間のデータ構造・リレーション
3.上記のデータを入力するためのUI検討
指示はこんな感じ。褒めて伸ばすスタイル。
[ わたし ]
いい感じです!では次に、2のステップの検討をお願いします。
Chat先生はこんな感じの返事をくれました
プロジェクト「報告書自動生成」のステップ2、つまりデータベース設計に進みます。ここでは、報告書に含まれる情報を管理するために必要なテーブルとその間のリレーションを定義します。
テーブル定義
以下のテーブルとそのフィールドを考慮に入れます:報告書テーブル (Reports)
報告書ID (ReportID):主キー
報告日 (ReportDate)
案件名 (ProjectName)
担当者ID (PersonInChargeID):外部キー(担当者テーブルへの参照)
概要 (Summary)
ネクストアクション (NextActions)
実験データテーブル (ExperimentalData)
実験ID (ExperimentID):主キー
報告書ID (ReportID):外部キー(報告書テーブルへの参照)
実験日 (ExperimentDate)
実験結果 (Result)
観察点 (Observations)
担当者テーブル (PersonsInCharge)
担当者ID (PersonInChargeID):主キー
担当者名 (Name)
テーブル間のリレーション報告書テーブルと実験データテーブルは1対多のリレーションを持ちます。これは、1つの報告書に対して複数の実験データが存在する場合があるためです。
報告書テーブルは担当者テーブルに対して多対1のリレーションを持ちます。これは、1人の担当者が複数の報告書を担当する可能性があるためです。
ER図
この段階では、上記のテーブルとリレーションを視覚化するためのER図(エンティティ関係図)を作成すると良いでしょう。しかし、ここではテキストベースでの説明に留め、具体的なER図の作成は行いませんが、データベース設計の次のステップとして推奨されます。
これでデータベース設計の基本的な枠組みができました。次に、この設計に基づいてデータベースを実装し、報告書データの管理ができるように進めていくことができます。
これだけではちょっと文字が多すぎるので、表にしたり可視化します。
テーブル構造を表形式で、かつキーも設定してもらう
プライマリキー(連番など)や外部キー(テーブル間を繋ぐための項目)、といったテーブル設計の要素もいれつつ、テーブル設計の例をしめしてもらいました。この辺も設計しながら議論すると、「あれ、キー足りなくない?」とか「こういうテーブルも必要かも?」みたいな話になるので、結構おすすめです。
(最新のマスタテーブルがどこにあったっけ、とかそういう話にもなりやすいです)
プロンプトはこんな感じの丸投げ。
[ わたし ]
表形式で、テーブル構造を表現してもらえますか?各種keyの設定もお願いします。
Chat先生の表形式の回答


ちゃんとレビューしてないですが、多分それなりに設計できてるはず。
あと表形式だと見やすいですね。
実際はこの後に「ダミーデータを3件ずつ入れて表示して」みたいなことをやると、もう少し具体のイメージに近づきます。というか、せっかくなのでやりますか。
定義したテーブルに対して、ダミーデータを3件入れて表示してもらう
[ わたし ]
これらのテーブルに対して、ダミーデータを3件入れた場合のデータ例を表形式で示してもらえますか?先ほどの報告書のデモを参考にしてデータを作ってください。
Chat先生の回答はこちら。この形だとだいぶoutputとの関係性が見えやすいですね。



いい感じです。たまに文言変わってたりするケースもありますが、まぁその辺は後で修正すればOK (概要レベルの要件すり合わせのフェーズなので、厳密性はそこまでなくても大丈夫です )
ER図のアスキーアート
テーブル間の関係性はER図というものを書きますが、ここでは簡易的にアスキーアートで表現してもらいました。(探せばちゃんとしたER図を描くライブラリとかあるはず)
(余談ですが、昔はER図関係のプラグインもあった気がしますが、最近はGPTsに寄せる方針みたいなので正直プラグインはサービス継続性の観点からあまりおすすめしません。notebaleプラグインとかもなくなりましたし・・)
プロンプトはこちら
[ わたし ]
テーブル間の関係性をER図にしてもらえますか? アスキーアートでも良いです。
Chat先生の回答。アスキーアート、ChatGPT-3.5がで始めた頃によく指示していましたがChatGPT部では久々ですね。


1 : Nの関係性などもちゃんと定義してくれてます。
3. データ入力のUIの設計
では最後に、実験データ等を入力するUIを考えてもらいます。
手元のエクセルではなくここに適宜データを入れておけば、データベースに随時データが登録され、ボタン1発で冒頭の報告書ができる、といった算段です。(今回はそちらのツールのモック、ガワだけですね)
プロンプトはこんな感じ
[ わたし ]
いい感じですね。では、3つ目のUIの議論にいきましょう。 HTML / CSSでこれらのデータを格納・編集するための画面を考案してもらえますか?なるべく使い勝手が良い画面だと嬉しいです。1つの画面にサイドバーで履歴、一覧画面、データ登録・編集画面を含めてデザインしてください。 またファイルをダウンロードできるようにして欲しいです。
だいぶ注文の多い客だと思われそうですが、怒らないのがChat先生のいいところ。
Chat先生は裏でHTML / CSSをコーディング中。しばし待ちます。
長文の場合は途中で止まるかもなのでcontinueのボタンを押したりします。

outputがこちら。指示を色々出せばもう少しリッチにもできますが、ほんの1-2分でここまでできるのはさすが。

1時間程度の打ち合わせ中だと、この辺りまででタイムアップでしょうか。
でも、ここまで来たらあとはどういう報告書を作るか、データはどこから持ってきてどう構造化するか、ツールはどういう感じだと嬉しいか、といった具体の話に進めやすくなると思います。
( 手でホワイトボードに書いても良いのですが、それより早い・・ )
ということで、この辺を打ち合わせしつつプロンプトを投げれば、打ち合わせもめっちゃ効率化できる、という活用事例でした。
皆さんもどうぞ良いChatGPTライフを・・! (大城)