活用プロンプト例

エージェント：ドキュメントエージェント

<aside> <img src="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" alt="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" width="40px" />

@会員情報更新 のユースケースドキュメントを参考に、必要なフロントエンド画面を設計し、 @VB画面設計書様式 の様式に沿って出力して。

</aside>

テンプレート

VB画面設計書様式.md

# 1. 基本情報

- 画面ID:
- 画面名:
- 機能概要:

## 2. 画面レイアウト

### 2.1 画面構成

以下の凡例に基づき、各オブジェクト名は具体的なファイル名やフォーム/コントロール名（例：Form1, btnSearch, dgvCustomerなど）で記述してください。

```mermaid
%%{init: {'theme': 'neutral', 'themeVariables': { 'fontFamily': 'Meiryo', 'fontSize': '15px'}}}%%
flowchart TD
    A["フォーム/ウィンドウ"]
    B["コントロール(CommandButton/ TextBox/ ComboBox等)"]
    C{"分岐条件"}
    D[["フォーム要素（TextBox, CheckBox等）"]]
    E[("データ表示（ListView, DataGridView等)")]
    G[("データベース")]
    F(["アクション（ボタン/イベント）"])
    H(["API"])
    classDef page fill:#d0d1ff,stroke:#333,stroke-width:2px,color:#000
    classDef component fill:#ffe680,stroke:#333,stroke-width:2px,color:#000
    classDef condition fill:#c2e0c2,stroke:#333,stroke-width:2px,color:#000
    classDef form fill:#ffcce0,stroke:#333,stroke-width:2px,color:#000
    classDef data fill:#c6c6ff,stroke:#333,stroke-width:2px,color:#000
    classDef action fill:#ffb3b3,stroke:#333,stroke-width:2px,color:#000
    classDef database fill:#bce2e8,stroke:#333,stroke-width:2px,color:#000
    classDef api fill:#bce2e8,stroke:#333,stroke-width:2px,color:#000
    class A page
    class B component
    class C condition
    class D form
    class E data
    class F action
    class G database
    class H api
    style A text-align:center
    style B text-align:center
    style C text-align:center
    style D text-align:center
    style E text-align:center
    style F text-align:center
    style G text-align:center
    style H text-align:center
線種 表記 意味
--> 実線矢印 画面遷移／親子関係
-.-> 点線矢印 イベント発火／アクション
--- テキスト --- ラベル付き線 関係説明（遷移、含む、表示等）
--o 白丸終端 関連付け（弱い結合）
--\* 黒丸終端 集約関係（強い結合）

3. 入力項目定義

3.1 フォーム項目一覧

No 項目ID 項目名 入力型 桁数 必須 初期値 表示条件

3.2 入力規則・バリデーション(VB仕様)

テキスト入力

数値入力

選択項目(ComboBox/ListBox等)

4. ボタン・アクション定義

4.1 ボタン一覧

ボタンID ラベル表示 表示条件 使用可否条件(Enabled/Visible)

4.2 アクション定義

（サンプル：btnSearch\_Click）

5. エラー・メッセージ定義

5.1 バリデーションエラー

コード メッセージ 表示方法（MsgBox等）

5.2 システムエラー

コード メッセージ 表示方法（MsgBox等）

6. バックエンド連携仕様

6.1 データ送信先定義

6.2 送信項目一覧

No 項目名 対応コントロール データ型 必須 備考

7. その他補足

7.1 画面遷移


### アウトプットイメージ

```markdown
# 1. 基本情報

- 画面ID: MemberInfoEdit\\_v2
- 画面名: 会員情報更新画面
- 機能概要:
  ログイン済みの会員ユーザーが「メールアドレス」「パスワード」「プロフィール画像」を安全かつ確実に変更・更新できるように設計された画面。バリデーション、エラー通知、本人認証、API連携、セキュリティ対策を含む。

***

## 2. 画面レイアウト

### 2.1 画面構成

```mermaid
%%{init: {'theme': 'neutral', 'themeVariables': { 'fontFamily': 'Meiryo', 'fontSize': '15px'}}}%%
flowchart TD
    A["MemberInfoEditForm_v2"]
    B["txtEmail(メールアドレス入力/表示)"]
    C["txtCurrentPassword(現在のパスワード)"]
    D["txtNewPassword(新しいパスワード)"]
    E["txtConfirmPassword(パスワード再入力)"]
    F["imgProfile(現プロフィール画像表示)"]
    G["fileProfileUpload(画像アップロード・選択)"]
    H["btnSave(保存)"]
    I["btnCancel(キャンセル)"]
    J["lblErrorMsg(各種エラー・結果通知)"]
    K["API: 会員情報更新"]
    L["lblSessionError(セッション切れ時通知)"]
    A --> B
    A --> C
    A --> D
    A --> E
    A --> F
    A --> G
    A --> H
    A --> I
    A --> J
    J --> L
    H -.-> K
    G -.-> K

3. 入力項目定義

No 項目ID 項目名 入力型 桁数 必須 バリデーション/備考
1 txtEmail メールアドレス テキスト 256 ○ フォーマット、重複チェック
2 txtCurrentPassword 現在のパスワード パスワード 64 △ メール/パス変更時のみ必須
3 txtNewPassword 新しいパスワード パスワード 64 △ 強度判定、英数混在
4 txtConfirmPassword パスワード再入力 パスワード 64 △ 新パス、再入力一致
5 imgProfile プロフィール画像 画像表示 現在登録画像
6 fileProfileUpload 画像アップロード ファイル △ jpg/png/gif, 最大2MB

4. ボタン定義

No ボタンID ボタン名 機能
1 btnSave 保存 入力値バリデーション→API送信
2 btnCancel キャンセル 編集終了・前画面へ遷移

5. メッセージ・通知枠

6. API連携

7. セキュリティ要件

8. 備考