LLMを活用したドキュメンテーションのすすめ（ワイヤーフレーム編）

エクストーンの豊田です。エクストーンでは今年生成系LLMの活用に力を入れておりまして、企画や設計など様々な分野でLLMを有効活用できないか模索しています。

そんな中、Webアプリケーションの詳細仕様のドキュメントを作るに当たって、LLMが有効活用できそうな事例ができたので、ここで紹介させていただきたいと思います。

Webアプリケーションの詳細設計

機能要件を満たすためにどのような機能が必要かという設計とドキュメンテーションについて、LLMを活用した事例を紹介します。今回はChatGPTのGPT-4oモデルを利用して行います。

GPT-4oにおいては以下の情報を正確にChatGPTに伝えると回答の精度が上がると考えています。

前提条件
出力してほしいもの、アウトプットのフォーマット

簡単に言うと、正解が明確に導き出せるだけの情報が入力として与えられれば、基本的にはその通りの回答が得られることが多いです。期待するアウトプットが得られない場合は以下のケースが考えられます。

答えのない質問をしている（アイデアを求めていたり等）
与える前提条件が不足している

前者についてもやり方次第では上手くいく方法はあるのですが、今回は割愛します。

情報を小出しに順番に与えたい

ChatGPTに情報を与えるに際して、こちら側の仕様が決まっていること、決まっていないこと等諸々あるかと思います。まとめて情報を渡そうとした場合、情報に不足があるとそれが決まっていない事項なのか、単に書き漏れたのかの判別が大変になってきます。

そのため、ChatGPTには「これから順番に情報を伝えていく」と最初のプロンプトで伝えた方がいいです。私は最初に以下のようなプロンプトを記述しました。

私はGitHubのOrganizationの管理を行っています。OrganizationにはMembersの他にOutside collaboratorsが存在し、Organization外部の開発者を特定のプロジェクトに参加させるために利用しています。

GitHubの請求はOrganization一括で行われますが、予算管理上はプロジェクトごとに行いたいです。そのため、どのプロジェクトに参加しているOutside collaboratorsかをユーザーごとに識別して管理したいです。

どのプロジェクトに参加しているのかはGitHubのリポジトリと関係なく、別に管理したいです。

上記を実現するWebサービスを作成したいので、設計を手伝ってください。この後、個別にやってもらいたいことを指示します。

内容としては以下の情報を伝えています。

背景情報
自分がやりたいこと
ChatGPTにお願いしたいこと
進め方の手順

結果として、いかのような回答が返って来ます。

Webサービスの設計をお手伝いします。以下のステップに分けて進めていきます。

### Step 1: 基本機能の定義

- **ユーザー管理**: Organization Members と Outside collaborators の管理。
- **プロジェクト管理**: プロジェクトの作成、編集、削除。
- **プロジェクト参加管理**: Outside collaborators のプロジェクトごとの参加状況の管理。

### Step 2: データベース設計

- **ユーザーテーブル**: Organization Members と Outside collaborators の情報。
- **プロジェクトテーブル**: プロジェクトの情報。
- **参加テーブル**: ユーザーとプロジェクトの関連情報。

### Step 3: ユーザーインターフェース

- **ダッシュボード**: ユーザーがログインし、プロジェクトと参加状況を確認・管理できる画面。
- **プロジェクト管理画面**: プロジェクトの作成・編集・削除。
- **ユーザー管理画面**: ユーザーの情報とプロジェクト参加状況の管理。

### Step 4: API設計

- **認証API**: ユーザーの認証と認可。
- **ユーザー管理API**: ユーザー情報の取得・更新。
- **プロジェクト管理API**: プロジェクトのCRUD操作。
- **参加管理API**: プロジェクト参加状況の管理。

### Step 5: 予算管理機能

- **プロジェクトごとの予算管理**: プロジェクトごとに予算を設定し、消費を管理。
- **コストレポート**: プロジェクトごとのコストレポートの生成。

### Step 6: セキュリティと権限管理

- **ユーザー権限**: 管理者、メンバー、コラボレーターなどの権限設定。
- **セキュリティ**: データ保護とアクセス制御。

---

### 最初のステップ: 基本機能の定義

まずは、基本機能の詳細な要件を固めましょう。具体的には以下の質問に答えていただけると助かります：

1. **ユーザー管理**:
    - Organization Members と Outside collaborators の区別はどのように行いますか？
    - ユーザー情報にはどのような属性が必要ですか？
2. **プロジェクト管理**:
    - プロジェクトにはどのような属性（名前、説明、開始日、終了日など）が必要ですか？
3. **プロジェクト参加管理**:
    - Outside collaborators のプロジェクト参加情報にはどのような属性が必要ですか？

これらの質問に答えていただければ、次のステップで具体的なデータベース設計に進むことができます。

ステップを小出しにするメリットとしては、進め方に不満がある場合はこのタイミングでChatGPTに指示して修正することが出来ます。今回は自分の意図通りの進め方だったのでこのままChatGPTの質問に回答していく形で進めていきます。

実際にはこの後、質問に答えていくとChatGPTがモデル定義の時点で先に実装コードを提案しようとしたので、軌道修正して先にユーザーインターフェイスの設計を行うように進めています。

画面構成のワイヤーフレームの作成

画面構成の設計についてはChatGPTに今まで与えた情報から提案してもらうことにしました。そのために実際のユースケースを伝え、そのユースケースを実現可能な画面構成を提案してもらうことにしました。

先に画面構成の設計をユースケースから行いたいです。

- プロジェクト毎に、参加しているメンバー一覧が確認できる
- 毎月のGitHubの支払いごとに、各プロジェクトの負担分（メンバー数*4$）を計算し、月ごとにプロジェクトごとの負担額を確認できる
- Outside collaboratorsをプロジェクトにアサインすることが出来る
- Outside collaboratorsをプロジェクトからアサインを外すことが出来る
- GitHubの請求とプロジェクトを紐づけることが出来る

上記のユースケースを満たす画面構成をワイヤーフレームとして定義してください。

ワイヤーフレームの定義を出力として提案するようにChatGPTに依頼しました。結果、以下のような応答が返って来ます。

### ユースケースを満たす画面構成のワイヤーフレーム

### 1. ダッシュボード画面

- **目的**: 全体の概要を表示し、各機能へのアクセスを提供
- **構成**:
    - ヘッダー: ロゴ、ユーザーメニュー（ログアウトボタン）
    - メインエリア:
        - プロジェクト一覧
        - 支払い概要
        - Outside collaborators の一覧と管理リンク

### 2. プロジェクト一覧画面

- **目的**: 各プロジェクトの詳細と参加メンバーの管理
- **構成**:
    - ヘッダー: 戻るボタン、プロジェクト追加ボタン
    - メインエリア:
        - プロジェクトカード: プロジェクト名、担当ディレクター、参加メンバー数、月ごとの負担額リンク
        - プロジェクト詳細リンク

### 3. プロジェクト詳細画面

- **目的**: プロジェクトの詳細と参加メンバーの管理
- **構成**:
    - ヘッダー: 戻るボタン、プロジェクト編集ボタン、プロジェクト削除ボタン
    - メインエリア:
        - プロジェクト情報: 名前、担当ディレクター
        - 参加メンバー一覧: GitHubアカウント名、アサイン解除ボタン
        - メンバー追加ボタン: Outside collaborators をプロジェクトにアサインする

### 4. 月ごとの負担額画面

- **目的**: 各プロジェクトごとの月ごとの負担額を確認
- **構成**:
    - ヘッダー: 戻るボタン
    - メインエリア:
        - 月別負担額リスト: 月、プロジェクトごとの負担額（メンバー数 * 4$）
        - 支払い総額

### 5. Outside collaborators 管理画面

- **目的**: Outside collaborators をプロジェクトにアサインする、またはアサイン解除する
- **構成**:
    - ヘッダー: 戻るボタン
    - メインエリア:
        - Outside collaborators 一覧: GitHubアカウント名、アサイン状況、アサイン/アサイン解除ボタン
        - プロジェクト選択ドロップダウン

### 各画面のワイヤーフレーム

### 1. ダッシュボード画面

    ```
    +--------------------------------------------------+
    | ロゴ                           ユーザーメニュー |
    +--------------------------------------------------+
    | [プロジェクト一覧] [支払い概要] [Outside協力者管理] |
    +--------------------------------------------------+
    | プロジェクト名 | 担当ディレクター | 参加メンバー数 | 月ごとの負担額 |
    +--------------------------------------------------+
    | プロジェクト1  | ディレクター1   | 5             | リンク         |
    | プロジェクト2  | ディレクター2   | 3             | リンク         |
    +--------------------------------------------------+

   ```

### 2. プロジェクト詳細画面

    ```
    +--------------------------------------------------+
    | [戻る]                 [編集] [削除]           |
    +--------------------------------------------------+
    | プロジェクト名: プロジェクト1                   |
    | 担当ディレクター: ディレクター1                |
    +--------------------------------------------------+
    | 参加メンバー                                    |
    | [アカウント名] [アサイン解除]                   |
    | [アカウント名] [アサイン解除]                   |
    +--------------------------------------------------+
    | [メンバー追加]                                   |
    +--------------------------------------------------+

    ```

### 3. 月ごとの負担額画面

    ```
    +--------------------------------------------------+
    | [戻る]                                          |
    +--------------------------------------------------+
    | 月別負担額                                       |
    | [2024年6月] プロジェクト1: $20                  |
    |               プロジェクト2: $12                  |
    | [2024年5月] プロジェクト1: $16                  |
    |               プロジェクト2: $8                   |
    +--------------------------------------------------+
    | 支払い総額: $56                                   |
    +--------------------------------------------------+

    ```

### 4. Outside collaborators 管理画面

    ```
    +--------------------------------------------------+
    | [戻る]                                          |
    +--------------------------------------------------+
    | Outside collaborators                            |
    | [アカウント名] [アサイン状況] [アサイン/解除]  |
    | [アカウント名] [アサイン状況] [アサイン/解除]  |
    +--------------------------------------------------+
    | プロジェクト選択 [ドロップダウン]               |
    +--------------------------------------------------+

    ```

### 次のステップ

1. これらのワイヤーフレームに基づいて、各画面の詳細設計を進める。
2. 画面遷移やユーザーフローを確認し、必要なAPIエンドポイントを設計する。

さらに具体的な要件や修正があれば教えてください。それに基づいて設計を進めます。

出力の定義があいまいだったのですが、このようにビジュアライズされた形でワイヤーフレームの出力を行ってくれました。おかげで3の画面が自分の意図していたものと違うことに気づくことが出来ました。修正を指示しましょう。

ワイヤーフレームについての修正をお願いしたいです。

「3. 月ごとの負担額画面」ですが、以下のように修正したいです。

- 1ページで表示するのは月ごとの支払い分のみ
- 1か月分の支払い合計を表示する
- 請求金額はGitHubのAPIから取得する
- 請求日を表示する
- 月ごとの特定の日の定期支払はプロジェクトのアサイン状態から自動的にプロジェクト毎の金額として表示する
- それ以外の請求は手動でプロジェクトと紐づけすることが出来る

上記を実現できるワイヤーフレームに修正してください。

修正する際に明確に指示を出すことで、対話的に修正することが出来ます。この後、あまり思ったような出力が得られなかったので、実際にこういう配置にしたい旨を画像として渡すことで望むワイヤーフレームを取得することが出来ました。

### 修正後の月ごとの負担額画面のワイヤーフレーム

### 3. 月ごとの負担額画面

- **目的**: 各プロジェクトごとの月ごとの負担額を確認し、請求金額を手動でプロジェクトに紐づける
- **構成**:
    - ヘッダー: 戻るボタン
    - メインエリア:
        - 月の選択ドロップダウン: 表示する月を選択
        - 請求日: GitHub APIから取得した請求日
        - 月の総請求額: GitHub APIから取得した請求金額
        - 定期支払いセクション: プロジェクトのアサイン状況に基づく自動計算結果
        - 手動紐づけセクション: 手動でプロジェクトに請求金額を紐づけるフォーム

### ワイヤーフレームの例

    ```
    +--------------------------------------------------+
    | [戻る]                                          |
    +--------------------------------------------------+
    | 月の選択 [ドロップダウン]                       |
    +--------------------------------------------------+
    | 請求日: YYYY/MM/DD                              |
    | 月の総請求額: $XXX                              |
    +--------------------------------------------------+
    | 定期支払い (例: 6/17)                            |
    | プロジェクト名   | 担当ディレクター | 参加メンバー数 | 負担額 |
    | プロジェクト1    | ディレクター1   | 5            | $20   |
    | プロジェクト2    | ディレクター2   | 3            | $12   |
    | その他          | -               | -            | 差額  |
    +--------------------------------------------------+
    | 手動紐づけ (例: 6/27, 7/1)                        |
    | 日付         | 金額   | 請求ID | プロジェクト選択 [ドロップダウン] | [紐づけボタン] |
    | 2024-06-27   | $5.07  | 1AU0MZM | [ドロップダウン]                   | [紐づけ]      |
    | 2024-07-01   | $2.13  | 1VKKPKYJ| [ドロップダウン]                   | [紐づけ]      |
    +--------------------------------------------------+

    ```

### 詳細設計

- **月の選択ドロップダウン**: 表示する月を選択するためのドロップダウンメニュー
- **請求日**: GitHub APIから取得した月の請求日
- **月の総請求額**: GitHub APIから取得した月の総請求額
- **定期支払いセクション**:
    - プロジェクト名
    - 担当ディレクター
    - 参加メンバー数
    - 負担額（参加メンバー数 * 4$）
    - 差額は「その他」というプロジェクト名で表示
- **手動紐づけセクション**:
    - **日付**: 日割りの請求が発生した日付
    - **金額**: 請求金額
    - **請求ID**: 手動で紐づける請求ID
    - **プロジェクト選択**: 請求を紐づけるプロジェクトを選択するためのドロップダウンメニュー
    - **紐づけボタン**: 入力した情報をもとに請求金額をプロジェクトに紐づけるためのボタン

### 次のステップ

- このワイヤーフレームに基づいて各画面の詳細設計を進めます。
- 画面遷移やユーザーフローを確認し、必要なAPIエンドポイントを設計します。

追加の要望や修正があれば教えてください。それに基づいて設計を進めます。

このように対話的にChatGPTとコミュニケーションを行うことで、ワイヤーフレームの設計を行うことが出来ました。最終的にドキュメントにしたいので、改めてドキュメント出力の依頼をChatGPTに行いましょう。

ドキュメント出力: ページ一覧

まずは一覧のドキュメントを作りたかったので、以下のように依頼しました。

OKです！では次にワイヤーフレームのおさらいをしたいと思います。まずは定義されているページを以下の項目で表にまとめてください。

- ページID
- ページ名
- URL
- 概要

上記のプロンプトに対して、以下のような応答がChatGPTから得られました。

以下に、定義されているページを表形式でまとめました。

| ページID | ページ名 | URL | 概要 |
| --- | --- | --- | --- |
| 1 | ダッシュボード | /dashboard | 全体の概要を表示し、各機能へのアクセスを提供する |
| 2 | プロジェクト一覧 | /projects | 各プロジェクトの詳細と参加メンバーの管理を行う |
| 3 | プロジェクト詳細 | /projects/{id} | プロジェクトの詳細と参加メンバーの管理を行う |
| 4 | 月ごとの負担額 | /billing/{month} | 各プロジェクトごとの月ごとの負担額を確認する |
| 5 | Outside collaborators管理 | /collaborators | Outside collaborators をプロジェクトにアサイン/解除する |

これで、各ページの概要とURLが一目でわかる表が完成しました。次に、各画面ごとに呼び出されるAPIの一覧を定義しましょうか？

表形式でページの情報を取得することが出来ました。ついでにURLの提案もしてもらっています。URLも問題無さそうなので、次に各ページ毎の詳細仕様を出力しましょう。

ドキュメント出力: ページ詳細

おさらいを続けます。もう一度各ページのワイヤーフレームの詳細を表示してください。

上記のプロンプトに対して、以下のような回答が得られます。

### ワイヤーフレームのおさらい

### 1. ダッシュボード画面

- **目的**: 全体の概要を表示し、各機能へのアクセスを提供
- **URL**: `/dashboard`
- **構成**:
    - ヘッダー: ロゴ、ユーザーメニュー（ログアウトボタン）
    - メインエリア:
        - プロジェクト一覧
        - 支払い概要
        - Outside collaborators の一覧と管理リンク
- **詳細**:
    
    ```
    +--------------------------------------------------+
    | ロゴ                           ユーザーメニュー |
    +--------------------------------------------------+
    | [プロジェクト一覧] [支払い概要] [Outside協力者管理] |
    +--------------------------------------------------+
    | プロジェクト名 | 担当ディレクター | 参加メンバー数 | 月ごとの負担額 |
    +--------------------------------------------------+
    | プロジェクト1  | ディレクター1   | 5             | リンク         |
    | プロジェクト2  | ディレクター2   | 3             | リンク         |
    +--------------------------------------------------+
    
    ```
    

### 2. プロジェクト一覧画面

- **目的**: 各プロジェクトの詳細と参加メンバーの管理
- **URL**: `/projects`
- **構成**:
    - ヘッダー: 戻るボタン、プロジェクト追加ボタン
    - メインエリア:
        - プロジェクトカード: プロジェクト名、担当ディレクター、参加メンバー数、月ごとの負担額リンク
        - プロジェクト詳細リンク
- **詳細**:
    
    ```
    +--------------------------------------------------+
    | [戻る]                 [プロジェクト追加]       |
    +--------------------------------------------------+
    | プロジェクト名 | 担当ディレクター | 参加メンバー数 | 月ごとの負担額 |
    +--------------------------------------------------+
    | プロジェクト1  | ディレクター1   | 5             | リンク         |
    | プロジェクト2  | ディレクター2   | 3             | リンク         |
    +--------------------------------------------------+
    
    ```
    

### 3. プロジェクト詳細画面

- **目的**: プロジェクトの詳細と参加メンバーの管理
- **URL**: `/projects/{id}`
- **構成**:
    - ヘッダー: 戻るボタン、プロジェクト編集ボタン、プロジェクト削除ボタン
    - メインエリア:
        - プロジェクト情報: 名前、担当ディレクター
        - 参加メンバー一覧: GitHubアカウント名、アサイン解除ボタン
        - メンバー追加ボタン: Outside collaborators をプロジェクトにアサインする
- **詳細**:
    
    ```
    +--------------------------------------------------+
    | [戻る]                 [編集] [削除]           |
    +--------------------------------------------------+
    | プロジェクト名: プロジェクト1                   |
    | 担当ディレクター: ディレクター1                |
    +--------------------------------------------------+
    | 参加メンバー                                    |
    | [アカウント名] [アサイン解除]                   |
    | [アカウント名] [アサイン解除]                   |
    +--------------------------------------------------+
    | [メンバー追加]                                   |
    +--------------------------------------------------+
    
    ```
    

### 4. 月ごとの負担額画面

- **目的**: 各プロジェクトごとの月ごとの負担額を確認し、請求金額を手動でプロジェクトに紐づける
- **URL**: `/billing/{month}`
- **構成**:
    - ヘッダー: 戻るボタン
    - メインエリア:
        - 月の選択ドロップダウン: 表示する月を選択
        - 請求日: GitHub APIから取得した請求日
        - 月の総請求額: GitHub APIから取得した請求金額
        - 定期支払いセクション: プロジェクトのアサイン状況に基づく自動計算結果
        - 定期支払い合計: 定期支払いの合計金額
        - 手動紐づけセクション: 手動でプロジェクトに請求金額を紐づけるフォーム
- **詳細**:
    
    ```
    +--------------------------------------------------+
    | [戻る]                                          |
    +--------------------------------------------------+
    | 月の選択 [ドロップダウン]                       |
    +--------------------------------------------------+
    | 請求日: YYYY/MM/DD                              |
    | 月の総請求額: $XXX                              |
    +--------------------------------------------------+
    | 定期支払い (例: 6/17)                            |
    | プロジェクト名   | 担当ディレクター | 参加メンバー数 | 負担額 |
    | プロジェクト1    | ディレクター1   | 5            | $20   |
    | プロジェクト2    | ディレクター2   | 3            | $12   |
    | その他          | -               | -            | 差額  |
    +--------------------------------------------------+
    | 定期支払い合計: $合計金額                        |
    +--------------------------------------------------+
    | 手動紐づけ (例: 6/27, 7/1)                        |
    | 日付         | 金額   | 請求ID | プロジェクト選択 [ドロップダウン] | [紐づけボタン] |
    | 2024-06-27   | $5.07  | 1AU0MZM | [ドロップダウン]                   | [紐づけ]      |
    | 2024-07-01   | $2.13  | 1VKKPKYJ| [ドロップダウン]                   | [紐づけ]      |
    +--------------------------------------------------+
    
    ```
    

### 5. Outside collaborators管理画面

- **目的**: Outside collaborators をプロジェクトにアサインする、またはアサイン解除する
- **URL**: `/collaborators`
- **構成**:
    - ヘッダー: 戻るボタン
    - メインエリア:
        - Outside collaborators 一覧: GitHubアカウント名、アサイン状況、アサイン/アサイン解除ボタン
        - プロジェクト選択ドロップダウン
- **詳細**:
    
    ```
    +--------------------------------------------------+
    | [戻る]                                          |
    +--------------------------------------------------+
    | Outside collaborators                            |
    | [アカウント名] [アサイン状況] [アサイン/解除]  |
    | [アカウント名] [アサイン状況] [アサイン/解除]  |
    +--------------------------------------------------+
    | プロジェクト選択 [ドロップダウン]               |
    +--------------------------------------------------+
    
    ```
    

これで、各ページのワイヤーフレームの詳細をおさらいできました。次に進めたいステップがあれば教えてください。

これで画面構成の一覧のドキュメントが出力されました。