はじめに
デジタルエンジニアリング部 Eビジネスエンジニアリング課の杉山です。
フロントエンドを主軸に開発等に携わっています。
直近まで私が参画していた案件では、詳細設計を担当していました。
「詳細設計」と聞くと、大抵Excelやスプレッドシートで作成することが多いと思います。
しかし当該案件ではExcelではなく生成AIを用いてMarkdownファイルとして作成する手法を取っており、少ない工数で大量の詳細設計を作成することができました。
今回は、そんな生成AIを活用して詳細設計を執筆する方法を解説します。
Markdownファイルとして作成するメリット
詳細設計書をMarkdownファイルとして作成することで、以下のようなメリットがあります。
- Git管理ができるので、差分の確認やバージョン管理がしやすい
- 今後実装に着手する場合、生成AIのインプットとして使える
概要
対象：エンジニア全般
ゴール：AIを活用して簡単な詳細設計を出力できるようになる
前提
-
基本設計書(ExcelでOK)があること
-
GitHub Copilot（以下、copilot）が利用できること
-
VSCodeに以下の拡張機能がインストールされていること
ハンズオン
今回は、画面仕様の詳細設計書の作り方を解説します。
1. 基本設計書をMarkdownに変換
まず、既にできている基本設計書がExcelの場合、Markdownファイルにする必要があります。
今回は、以下のような基本設計書を用意しました。
VSCodeを起動し、「documents」と「tmp」のフォルダを作成します。
「documents」が詳細設計書、「tmp」が詳細設計書作成のための資材置き場とします。
次に、以下のようなプロンプトでcopilotに指示を出します。
copilotは今回「Agent」で「Claude Sonnet 4.6」を使用しています。
以下のExcelをmdに変換したファイルを作成してください。
内容を1つも漏らさずに変換してください。
Excel：
tmp\基本設計書.xlsx
出力先、ファイル名：
tmp\基本設計書.md
上記をcopilotに送信すると、Excel読み込みが行われます。
この時、pythonコマンドの実行やpythonファイルの作成を提案されるので全て「許可」ボタンを押下して進めます。
ファイルの読み込み、Markdownへの変換が完了しました。
出力されたMarkdownファイルを確認し、修正が必要なら手作業or再度AIに指示して修正してください。
「1.画面レイアウト」シートにはExcel上に画像（画面レイアウト図）が貼付されていますが、テキストデータとして抽出できないため、元のExcelファイルを参照するよう注記しています
とcopilotが返答しています。
ここで作成した「基本設計書.md」はあくまでも詳細設計書を作成するための一時ファイルのため、画像を参照したい際は元のExcelをご確認ください。
2. フォーマットの用意
詳細設計書を作成するためにもう一つ必要な資材があります。
それがフォーマットです。copilotにこれをインプットとして持たせることで、そのフォーマット通りに詳細設計書を出力してくれます。
基本設計書と同じく、tmpフォルダに格納しておきます。
今回は以下のようなフォーマットを用意しました。
## 画面名_画面仕様書
**作成者と作成日を記載**
### 1. 入出力項目
- 他画面からの遷移でクエリパラメータ・パスパラメータ等が存在する場合は、以下の形式で表にして記載する。
- 存在しない場合は「なし」と記載する。
| 項目名 | 種別 | 型 | 説明 |
| --- | --- | --- | --- |
| （例）userId | クエリパラメータ | string | ログインユーザーの ID |
---
### 2. 画面初期表示
#### 2-1. 初期表示フロー
次のルールに従い **Mermaid 記法** でフロー図を記載する。
| 条件 | 図の種類 |
| --- | --- |
| API 通信が発生する | シーケンス図（`sequenceDiagram`） |
| 画面内処理のみで完結する | フローチャート（`flowchart TD`） |
#### 2-2. 画面項目設定
API 通信がある場合、以下の **①②** をすべて記載する。
**① リクエスト情報**
| 項目 | 内容 |
| --- | --- |
| エンドポイント | `メソッド /パス` |
| API 名 | ○○取得 API |
| リクエスト項目名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| （フィールド名） | （型） | ◯ / − | （説明） |
**② レスポンスマッピング**
| レスポンスフィールド | 画面項目 | 説明 |
| --- | --- | --- |
| （フィールドパス） | （画面項目名） | （反映内容） |
#### 2-3. 制御項目
- 制御対象が存在する場合は表で記載する。
- 存在しない場合は「なし」と記載する。
| 制御対象項目 | 条件 | 制御内容 |
| --- | --- | --- |
---
### 3. アクションフロー
画面処理仕様をもとに、アクション（ボタン押下・入力イベント等）ごとにサブセクションを設ける。
フロー図の使い分けルールは **2. 画面初期表示と同一** とする。
> **Mermaid 使い分けルール（再掲）**
> - API 通信が発生する場合 → `sequenceDiagram`（シーケンス図）
> - 画面内処理のみで完結する場合 → `flowchart TD`（フローチャート）
#### 3-N. ○○ボタン押下（アクション名に置き換えること）
**① フロー図 / シーケンス図**
（Mermaid 記法で記述）
**② リクエスト情報**（API 通信がある場合のみ記載）
| 項目 | 内容 |
| --- | --- |
| エンドポイント | `メソッド /パス` |
| API 名 | ○○ API |
| リクエスト項目名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
**③ レスポンスマッピング**（API 通信がある場合のみ記載）
| レスポンスフィールド | 画面項目 | 説明 |
| --- | --- | --- |
**④ 画面項目チェック**（バリデーションが発生する場合のみ記載）
- 内容は基本設計書の「画面項目・制御仕様」を参照すること。
| 項番 | チェック対象項目 | チェック種別 | チェック内容 | エラーメッセージ |
| --- | --- | --- | --- | --- |
**⑤ 制御項目**（該当する場合のみ記載）
| 制御対象項目 | 条件 | 制御内容 |
| --- | --- | --- |
---
> アクションの数だけ `3-N` のサブセクションを繰り返す。
---
### 4. 備考
特記事項があれば記載する。存在しない場合は「なし」と記載する。
---
## 作成ルール
1. 各セクション・サブセクションの見出しは省略しないこと（内容がない場合でも「なし」と明記する）。ただし、`3-N` 内の **④ 画面項目チェック** と **⑤ 制御項目** は該当がない場合は省略してよい。
2. Mermaid 記法は正しい構文で記述し、レンダリングエラーが発生しないようにすること。
3. 表はすべてヘッダー行・区切り行（`| --- |`）を含めること。
4. 不明な情報がある場合は `（要確認）` と記載し、推測で補完しないこと。
5. 基本設計書の内容と矛盾しないよう整合性を確認すること。3. 詳細設計書の作成
基本設計書のMarkdownファイルとフォーマットが準備できたので、本題の設計書を作成します。
以下のようなプロンプトをcopilotに送信してください。
以下の基本設計書を基に、詳細設計書を作成してください。
格納先は「documents」、ファイル名は「ユーザー情報画面_画面仕様書」、作成者は「太郎」、作成日は「2026/4/1」。
また、詳細設計書を作成する際は以下のフォーマットを遵守して情報の洩れがないように気を付けて作成してください。
基本設計書：
tmp\基本設計書.md
フォーマット：
tmp\詳細設計書_フォーマット.md2～3分ほどで、詳細設計書のMarkdownファイルが作成されました！
フォーマットで指定した通り、API通信が発生するアクションではシーケンス図を記載しているのも確認できました。
あとは実際に基本設計書と見比べて仕様が違う部分だったり、平仄のずれを修正すれば完成です！
まとめ
今回は生成AIを活用して、画面の基本設計書から詳細設計書を作成する手順を紹介しました。
API仕様書など、ほかの設計書もインプット次第で作成できるので、設計が初めての方でもある程度の成果物ができる、という点でおすすめの手法です。
また、MarkdownファイルにすることでGit管理ができるため差分確認やバージョン管理がしやすく、今後実装に着手する場合も生成AIのインプットとして有用なので是非試してみてください！
