目的
その昔、 MDA (Model-Driven-Architecture) というのが注目されました。
クラスモデルやデータモデルからコード類を自動生成するというモノです。
あまり流行らなかった印象がありますが、生成AI時代にこの発想は使えるのではないか？
ということで、MDAをベースとして設計ツールを試作してみました。
メンション機能で成果物を連携！
ポイントは、データモデルがあれば、それをチャットからメンションして画面を作ったり、その逆もできるということです！
レポジトリ
プロジェクト概要
README.mdから AI臭のする記述を抽出しますね。
✨ Features
🖥️ Screen Design Documents
- 表示条件: Markdown形式での画面仕様記述
- 画面イメージ: モックアップ画像のアップロード・管理
- 項目定義: Fortune-Sheetによるスプレッドシート形式編集
- 補足説明: 詳細仕様のMarkdown記述
🗄️ Data Model Design Documents
- ER図エディタ: Mermaid記法によるビジュアルER図作成
- テキストエディタ: 構造化されたエンティティ定義
- 双方向同期: テキスト⇔ビジュアル自動変換
- 統計表示: エンティティ数、リレーション数、フィールド数
🤖 AI-Powered Design Generation
- 自然言語指示: 「ECサイトの設計書を作って」から自動生成
- 修正提案: 既存設計書への安全な変更提案
- @メンション機能: 設計書間の参照による高度な生成
- バックアップ: 全変更の自動バックアップ・復元機能
📋 Project Management
- プロジェクト階層: 複数設計書の統合管理
- エクスポート/インポート: JSON形式でのプロジェクト単位バックアップ
- 設計書タイプ: 画面設計、データモデル、API設計（準備中）
- 完全復元: 内容・画像・スプレッドシートの100%復元
🔄 Model Driven Architecture
利用イメージ
1. 要件をAIチャットに書いてメイン画面を作る
AIチャットに要件を伝え画面作成を依頼する
項目定義書が自動生成される(修正も可能)
質素な画面イメージも生成できる
なんていうか、、、すごい普通の画面w（ここはもうちょっとプロンプト頑張ろう＞俺）
2. 画面を元にしてデータモデルを生成AIで作る
画面設計書をAIチャットからメンションしてデータモデル案を作ってもらう！
こちらが出来上がったデータモデル(修正も可能)
3. データモデルを元にしてサブ画面をAIで作る
さっきとは逆にデータモデルからサブ画面（カテゴリー管理）を作る
ここでもメンション機能が便利！
出来上がったサブ画面
メイン画面とフレーバーが違う。（ここはもうちょっとプロンプト頑張ろう＞俺）
まとめて成果物をMarkdownに落とすことも可能！
長いので折りたたんでいます！
demo-project2 設計書
📋 プロジェクト概要
プロジェクト名: demo-project2
説明: Qiita投稿用
作成日時: 2025/10/24 6:01:06
設計書数: 2件
🖥️ 画面設計書 (1件)
1. Todo管理画面
📋 表示条件
表示条件
基本表示
- Todo入力フォームは画面上部に配置
- Todo一覧は画面左側にリスト表示
- 選択したTodoの詳細情報は画面中央に表示
- 選択したTodoのサブタスクは画面右側に表示
- 期限が近いTodoは黄色、期限超過は赤色でハイライト表示
- 優先度「高」のタスクは赤いアイコンで強調表示
アクセス権限
- 管理者：全機能利用可能
- 一般ユーザー：自身のTodoのみ閲覧・編集可能
- 閲覧者：閲覧のみ可能（編集不可）
画面遷移条件
- Todo新規作成ボタン：入力フォームを展開
- Todo保存時：AIによるサブタスク生成処理を実行
- Todoリストクリック：該当Todoの詳細とサブタスクを表示
- サブタスク完了チェック：親Todoの進捗率を自動更新
- すべてのサブタスク完了時：親Todoのステータスを「完了」に自動変更
AI連携条件
- タスク名・メモの内容からAIがサブタスクを自動生成
- サブタスク生成ボタンクリック時にAI APIを呼び出し
- 生成されたサブタスクはユーザーが編集可能
- サブタスク再生成ボタンで再度AI処理を実行可能
📊 項目定義
| 項目名 | 型 | 必須 | 説明 |
|---|---|---|---|
| タスク名 | 文字列(100文字以内) | ○ | Todoのメインタイトル |
| 期限 | 日付型 | ○ | タスクの完了期限。カレンダーから選択可能 |
| 優先度 | 選択型 | ○ | 「高」「中」「低」から選択 |
| メモ | テキストエリア(500文字以内) | - | タスクの詳細情報や補足事項 |
| ステータス | 選択型 | ○ | 「未着手」「進行中」「完了」から選択。サブタスクの状態により自動更新 |
| 作成日時 | 日時型 | ○ | システムが自動記録 |
| 最終更新日時 | 日時型 | ○ | システムが自動記録 |
| 担当者 | 文字列 | - | タスク担当者名 |
| タグ | 複数選択型 | - | タスクの分類用タグ（複数選択可） |
| サブタスクリスト | 配列 | ○ | AIが生成したサブタスクの一覧 |
| サブタスク名 | 文字列(100文字以内) | ○ | サブタスクの名称 |
| サブタスク状態 | 真偽値 | ○ | 完了/未完了の状態 |
| 進捗率 | 数値(%) | ○ | サブタスクの完了状況から自動計算 |
🖼️ 画面イメージ
AI生成画面イメージ:
📝 補足説明
補足説明
技術仕様
- AIによるタスクブレークダウンはOpenAI GPT-4 APIを使用
- サブタスク生成時のプロンプト設計が重要（タスク名、メモ、期限などの情報を含める）
- サブタスク数は最大10個まで生成（多すぎる場合は自動的に重要度で絞り込み）
- サブタスクの状態変更はリアルタイムでDBに反映
- 進捗率は完了したサブタスク数 ÷ 全サブタスク数で自動計算
- ドラッグ&ドロップでサブタスクの順序変更可能
セキュリティ
- ユーザー認証はJWTトークンベースで実装
- クロスサイトスクリプティング対策としてユーザー入力値のサニタイズ処理
- AIへのデータ送信時にはPII（個人識別情報）を自動検出・マスキング
- APIキーなどの機密情報はサーバーサイドのみで管理
パフォーマンス
- AIによるサブタスク生成は非同期処理で実装
- 生成中はローディングインジケータを表示
- サブタスク生成は平均2-3秒で完了するよう最適化
- Todoリストは仮想スクロールで実装し、大量データでもスムーズに表示
UX設計
- サブタスクの完了時には視覚的フィードバック（アニメーション）
- ドラッグ&ドロップによるサブタスクの並べ替え機能
- キーボードショートカットによる効率的な操作
- モバイル対応レスポンシブデザイン
拡張性
- サブタスクへのコメント追加機能を将来実装予定
- サブタスクの担当者割り当て機能を将来実装予定
- タスク間の依存関係設定機能を将来実装予定
🗄️ データモデル設計書 (1件)
1. Todo管理データモデル
🗄️ ER図
📋 エンティティ一覧
1. User
2. Todo
3. Category
4. TodoCategory
📝 補足説明
特になし
📄 エクスポート情報
- ツール: mdai-designer
- 形式: プロジェクト統合設計書
- 生成日時: 2025-10-23T21:01:06.137Z
-
総設計書数: 2件
- 画面設計書: 1件
- データモデル設計書: 1件
まとめと感想
生成AIで作った成果物をどう連携させるか？というのが悩ましいのですが、チャットからメンション機能を取り入れることで直感的になったと思います。
成果物もまとめてMarkdownとしてエクスポートできるので、SDD(スペック駆動開発)のインプットしても利用できそうです。
生成される画面がなんていうか、普通（普通未満）な感じなので、その辺はプロンプト頑張ることで改善が可能と思います！
MDAと生成AIの相性は結構いいのではないか？って思いました！