BACKGROUND
設計パターンを読むだけでは、曖昧な依頼から必要な条件を聞き出し、構成に落とし込む練習ができません。要件定義から設計の見直しまで、自分の手で繰り返せる場所がほしくてつくりました。
APPROACH
シナリオごとにAIクライアントへ質問し、サーバーやDBなどの部品を配置・接続します。技術選定の理由も添えて評価に送り、可用性・拡張性・安全性・保守性・コスト・実現性の6軸から設計を振り返る流れにしました。
HOW IT WORKS
- 01
題材を選ぶ
プリセットまたは自由なテーマで設計を始める
- 02
要件を聞く
AIクライアントへの質問で予算や規模、制約を確認
- 03
構成を描く
部品を配置・接続し、技術選定の理由を書き添える
- 04
見直す
6軸の評価と改善提案を読み、設計を修正する
ARCHITECTURE
DESIGN DECISIONS
対話とキャンバスをひとつの練習環境に
React Flowの構成図と要件ヒアリングを同じプロジェクトで扱います。図だけでなく部品ごとのメモも評価へ渡し、構成を選んだ理由まで振り返れるようにしました。
画面配信とAIを呼ぶAPIを分ける
フロントエンドはCloudflare Workers Static Assets、Rust / AxumのAPIはCloud Runへ配置。GeminiのAPIキーはSecret Managerからサーバーだけへ渡し、プリセットの隠れた要件もサーバーで管理します。
練習の成果を手元へ持ち帰る
構成図・会話・評価をJSONファイルとして保存し、読み込み直して練習を続けられます。シナリオを共有する挑戦状のURLも用意し、同じ題材で別の設計を試せるようにしました。
結果をXで共有し、同じ題材に挑戦する
評価画面の「結果をシェア」から、シナリオ名・総合スコア・挑戦用URLを添えたXの投稿画面を開けます。リンクを受け取った人は同じ題材に挑戦でき、それぞれの設計を見比べられます。
VERIFICATION
- 公開アプリでシナリオ選択から対話・設計・評価まで利用可能
- 構成図の接続操作とJSON保存・復元を本番環境で検証
- CloudflareとCloud RunへGitHub Actionsで配信
STATUS & NEXT
Webアプリを公開中です。勤怠管理・画像投稿SNS・自由設計を題材に、要件ヒアリング、構成図作成、AI評価、JSON保存・復元、Xへの結果共有と挑戦状の共有を利用できます。