AI提案書作成支援
ヒアリングの内容から提案書の構成・本文・見積のドラフトを作り 営業担当が直して提案書と見積書を PDF で出す。部長の承認まで1つの台帳でつなぐ
- 想定業務
- 商談後の提案書づくりと社内承認
- 主な画面
- 案件パイプライン、案件一覧・詳細、提案書エディタ、見積書（PDF・角印）、プレビュー（提案書 PDF）、承認ワークフロー、活動ログ、設定
画面右上でロールを切り替えられる
受託開発サンプル
AI駆動型システム開発 受託サンプル
4つの業務システムを動くデモとして公開している。会社名・人名・数値はすべて架空
- 動くプロトタイプ
- 4システム
- ソースコード納品可
ログイン不要・登録不要。提案書・ロープレ・施工管理はブラウザの中だけで動く。営業支援（SFA）は架空データの閲覧のみ
4つのサンプル
商談で見せる想定で、1システムあたり8画面以上を作り込んでいる。ダッシュボードから業務の流れを一周できる
AIロープレ
AIが顧客役を演じ 営業や接客の会話を音声かテキストで練習する。終了後に5軸の評価と定量の指標が出る
- 想定業務
- 新人教育・ロールプレイング研修
- 主な画面
- 受講者ダッシュボード、マネージャーダッシュボード、シナリオ、商材資料（シナリオ生成）、セッション、評価結果、履歴・推移、受講者管理
画面右上でロールを切り替えられる
施工管理
現場・工程表・日報・写真・安全点検・原価を1つの台帳で回す。原価は着地予測まで出し 週報のドラフトはAIが下書きする
- 想定業務
- 工事現場の進捗・原価・安全の管理
- 主な画面
- 会社ダッシュボード、現場一覧・詳細、工程表、日報、写真、安全点検、原価、週報
画面右上でロールを切り替えられる
営業支援（SFA）
顧客・案件・商談・タスクから見積・受注・月別売上・請求入金までを1つの台帳でつなぐ。公開デモは架空データを閲覧のみで確かめられる
- 想定業務
- 営業の案件管理と商談後の提案づくり
- 主な画面
- 営業ホーム、相談受付、顧客・担当者、案件、商談履歴、タスク、提案、見積、受注・契約、読み、月別売上、請求・入金
ログインなしで開く閲覧のみのデモ。登録・更新はできない
モックアップの流れ
提案書・ロープレ・施工管理の3本はこの手順で作っている。設計書を1本に固定し、実装をAIエージェントへ分け、別の担当がレビューする
- 01
ヒアリング
業務の流れと詰まっている箇所を聞き取り、扱うデータと画面の範囲をその場で決める
- 02
設計書 system.md
課題・機能・画面一覧・データモデル・AI利用箇所を1本の設計書へ落とす。以降の入力はこれだけ
- 03
AIエージェントで実装
設計書を渡して画面ごとに担当を分け、並列で組み立てる。人はスコープとレビューを持つ
- 04
レビュー
実装した担当とは別のレビュー担当が 要件の充足・退行・アクセシビリティ・機密を見る
- 05
公開・ソース納品
静的サイトとして公開し、リポジトリごと引き渡す。以後の改修は手元でも続けられる
作り方
- 画面
- Next.js 16 の静的書き出し（React 19 / Tailwind 4 / shadcn-ui）
- 配信
- Cloudflare Pages。サーバーを常時動かさない構成
- AI応答
- Cloudflare Pages Functions から Claude を呼ぶ。鍵が無いときと通信に失敗したときはデモ台本へ落ちて画面が止まらない
- デザイン
- 自社のデザインハーネス（fv-design-harness）のトークンと、デジタル庁デザインシステム（DADS）の基礎を守る
- データ
- 提案書・ロープレ・施工管理は架空のシードとブラウザ内の localStorage でサーバーへ保存しない。営業支援（SFA）は共有の Durable Object（SQLite）に置いた架空データを閲覧のみで見せ 毎日入れ直す