生成AIを用いてRFPからReactモックを2時間で作ってみた

目次
はじめに
システム開発会社の営業担当者にとって、顧客からRFP(提案依頼書)を受け取ってから提案書を作成するまでのスピードは、商談の成否を大きく左右します。競合に勝つには、単なる文章ベースの提案ではなく、「動くものを視覚的に見せる」インパクトが必要です。
しかし、実際に開発チームへモック作成を依頼すれば、数日から数週間はかかるのが一般的。その間に商談の熱が冷めたり、他社に先を越されたりするリスクもあります。
では──午前中にRFPを受け取り、午後にはReactモックを持って顧客に提案できるとしたら?
本記事でご紹介するのは、その実現を可能にするClaude Codeを活用したワークフローです。Claude Codeは長文解析やコード生成に強みを持つAIツールで、RFPを入力するだけで機能一覧、ユースケース、ワイヤーフレーム、Reactモックといった成果物を段階的に生成できます。
つまり、「2時間でReactモックを作る」というのは、単なる営業の効率化ではなく、AIを中心に据えた新しい業務スタイルの一例です。営業提案はもちろん、要件定義・教育・業務改善など、あらゆる知識労働に応用できる可能性を秘めています。
従来のアプローチと課題
一般的な提案プロセス
- 顧客からRFPを受領
- 営業が要件を開発チームへ共有
- 開発チームがモックを作成
- 営業が提案書へ組み込み
- 顧客へ提案
課題
- 時間: 数日を要する
- コスト: 先行投資としての工数負担
- 機会損失: 提案タイミングを逃すリスク
- 品質: 短納期ゆえの営業要求と開発成果物のギャップ
「Vibe Coding」による高速モック生成
今回ご紹介するアプローチは、Vibe Codingと呼ばれる4段階のワークフローです。AIの創造性を引き出しつつ、構造化されたプロセスを踏むことで、RFPから直接モックを作り上げます。
ワークフロー全体像
- RFP → 機能要件書
- 機能要件書 → ユースケース
- ユースケース → ワイヤーフレーム
- ワイヤーフレーム → Reactモック
フェーズ0: RFPの用意とClaude Codeの起動
RFP風のテキストの用意とClaude Codeの起動については本記事では割愛します。
今回利用するRFP全文
ChatGPTにざっくりお願いしてRFPを作ってもらいました。
クリックで開閉
# 社員特性分析・活用システム 開発提案依頼書 ## 背景・現状の課題 自社では全社員を対象に**ストレングスファインダーの34資質**および**FFS理論の5因子**による性格特性分析を実施し、各社員の特性データを保有しています。現状、この特性データは個別のレポートやスプレッドシートで管理されており、社員同士の特性の比較や有効活用が十分に行われていません。例えば、社員同士の相性やチーム内の特性バランスを客観的に把握することが難しく、社員一人ひとりの強みを活かしたマネジメント手法の共有も属人的になっています。 このような状況を改善し、**社員の特性データを組織全体で有効活用する**ためのシステム構築を検討しています。本提案依頼書(RFP)は、外部開発ベンダー様に対し、当社の要件を明確に提示し、適切な提案および見積もりをいただくことを目的としています。 ## システム導入の目的・ゴール 本プロジェクトの目的は、各社員の性格特性データを一元管理し、それらを活用して以下を実現することです。 - **社員の「取扱説明書」の動的生成:** 各社員の特性に基づいて、その人の一般的な特徴や効果的な接し方、マネジメント方法を自然言語で出力し、社員自身および周囲の同僚・マネージャーが活用できるようにする。 - **社員同士のマッチング・相性診断:** 特定の二人の社員について、性格特性の類似点・相違点を分析し、関係性の可視化や相性の良し悪し、協働する上での留意点や関係改善のアドバイスを提供する。 - **チームビルディング支援:** 複数名のチーム構成におけるメンバーの特性バランスを分析し、チーム全体の強み・弱みや潜在的な課題を可視化、効果的なチームビルディングの提案を行う。 - **類似・補完関係の発見:** 社員データをベクトル化し、特定の社員と「似た特徴を持つ社員」や「互いに補完し合える関係の社員」を高速に検索できるようにする。これにより、メンター/メンティーのマッチングやプロジェクトチーム編成時の参考情報を提供する。 最終的なゴールは、社員一人ひとりの特性を活かした**個別最適なマネジメント**と**チーム最適化**を支援する社内システム(いわば「社員の取扱説明書」システム)を構築することです。これにより社員のエンゲージメント向上や生産性向上、人材配置の最適化を図ります。 ## 開発範囲・対象ユーザー - **対象システム:** 社員特性分析・活用システム(Webアプリケーション) - **主な利用者:** 当社社員(一般社員 500〜1000名規模)および管理者(人事担当者等)。 一般社員は自分および他社員の特性閲覧や相性診断結果の閲覧が可能です。管理者は全社員のデータ管理やマスタ編集、全機能の利用が可能です。 - **利用形態:** 社内システムとして社内ネットワーク上で利用(社外からアクセス不可の想定)。社員一人ひとりにログインアカウントを発行し、権限に応じた機能を提供します。 本RFPで求める開発範囲には、要件定義・設計・実装・テスト・導入までの一連の作業を含みます。運用・保守については本開発範囲には含めませんが、将来的な保守運用についての提案があれば別途ご提示ください。 ## 開発前提・技術環境 本システムの開発にあたっては、以下の技術要件・環境を前提とします。 - **フレームワーク:** Laravel (バージョンは最新安定版を想定) ※当社内での保守性・他システムとの整合性を考慮し、Laravelによる実装を希望します。 - **Webサーバ:** Nginx (Linux環境を想定) - **データベース:** MySQL (バージョンは最新安定版を想定) - **ベクトルデータベース:** 特性データの類似検索に適したベクトルDBを利用してください(詳細は後述の要件参照)。具体的な製品・ライブラリはベンダーにて選定いただき、提案時に選定理由を説明してください。**検索精度**と**運用性(スケーラビリティや保守負荷)**を重視します。 - **AIサービス:** OpenAI社のAPI(GPT系モデル)を利用した生成AI機能を組み込む想定です。現時点ではOpenAI APIを前提としますが、提案内容によっては他の生成AIサービス利用も検討します。 ※APIキー等の契約は当社側で用意予定ですが、開発時にはテスト用にベンダー側アカウントを利用いただいても構いません。 - **その他:** 開発言語はPHPを基本とします。必要に応じてPython等他言語でベクトル処理を行うコンポーネントを併用する提案も受け入れ可能ですが、その場合はLaravelとの連携方法を明示してください。 上記の環境以外に特筆すべき事項(開発にあたり前提となる事項、利用ライブラリの制約など)があれば、提案時にお知らせください。 ## 機能要件 本システムで実現すべき主要機能は以下の通りです。 1. **社員一覧画面(検索・フィルター機能付き):** 全社員の基本情報と主要特性を一覧表示する画面を提供します。社員名や部署、特定の資質キーワードなどで検索・絞り込みが可能です。 - *要件詳細:* 一覧には氏名、部署などの基本情報に加え、ストレングスファインダー上位資質や主要な特性指標をアイコンや簡易グラフで表示し、一目で特徴を把握できるようにします。検索は部分一致による名前検索のほか、特定の資質を持つ社員のフィルタリング(例:「責任感」が高い人を検索)等ができると望ましいです。 2. **社員個別プロフィール画面(特性表示・編集、AI生成情報の表示):** 各社員ごとの詳細ページを提供します。その人のストレングスファインダー結果(34資質の順位や主要資質)、FFS理論5因子のプロファイル、その他特性に関するデータを表示します。また以下の要素を含みます。 - **特性データの編集:** 権限に応じて編集可能な項目をフォームで編集・更新できるようにします(詳細は後述の権限要件参照)。編集履歴も確認できるようログを保持してください。 - **AI生成による解説表示:** その社員の特性プロフィールに基づいた「一般的特徴」や「効果的な接し方」「適したマネジメント手法」といった解説文を、OpenAI API等を用いて生成し表示します。生成された文章はユーザーが読みやすいよう段落整形し、箇条書き等も交えて表示してください。必要に応じ、再生成(リフレッシュ)ボタンで新たな解説を得られるようにすることも検討します。 3. **社員の取扱説明書生成画面(個人レポート出力):** 選択した特定の社員について、その人の「取扱説明書」とも言える詳細レポートを生成・表示する機能です。これは上記プロフィール画面のAI解説をさらに拡充し、一つのレポート形式でまとめたものとなります。 - *要件詳細:* レポートには該当社員の基本情報(氏名、所属、役職など)と特性サマリー、ストレングスファインダーとFFSの結果要約、およびAI生成の詳細解説(性格傾向、長所・短所、動機づけポイント、周囲への働きかけ方のコツ、効果的なマネジメント方法等)を含めます。可能であればPDFなど文書としてエクスポートする機能も検討してください(必須ではありませんが提案下さい)。 4. **社員同士の相性診断画面:** 社員Aと社員Bの2名を選択すると、両者の性格特性の**類似点・相違点**を分析し、関係性の可視化とアドバイス提示を行う機能です。 - *要件詳細:* 二人の特性データから、共通する強みや補完し合える点、潜在的な摩擦ポイントなどを抽出し、AIによる文章生成で「相性コメント」や「良好な協働のためのアドバイス」「衝突を避けるための工夫」等を表示します。また、二人の特性を比較する簡易な**視覚化**も行います。例として、5因子のスコアをレーダーチャートやバーグラフで二人分重ねて表示し、どの因子で差異が大きいか一目で分かるようにする、といったUIを想定しています。この視覚化により、ユーザーは二人の関係性を直感的に理解できるようになります。 5. **チームビルディング診断画面:** 複数名(例:プロジェクトチームや部署単位など任意のグループ)の社員を選択すると、そのチーム全体の特性構成を分析し、チームビルディングに関する示唆を提示する機能です。 - *要件詳細:* 複数人のストレングスファインダー上位資質の分布やFFS因子の傾向を集計し、チームとしての強み・弱みを可視化します。例えば、「メンバーに共通して不足している資質」や「特定の因子に偏っている傾向」などを検出し表示します。加えて、AI生成により「このチームの傾向」「想定される課題」「パフォーマンス向上のための提案(例:○○タイプの人材を加えるとバランス向上する等)」を文章で提示します。結果はチームビルディングの参考資料として活用できるレポート形式で表示してください。 6. **類似・補完関係にある社員検索(ベクトルDB活用):** 特定の社員あるいは特性条件に近い社員を検索できる機能です。ベクトルデータベースに各社員の特性ベクトルを格納し、類似度検索を行うことで実現します。 - *要件詳細:* ユーザーがある社員を選択した場合、その社員の特性ベクトルに最も近い他の社員(類似した特徴を持つ人)をトップN件リストアップします。また、可能であれば「補完関係」にある社員も提示します。補完関係とは、ある社員の弱みを補う強みを持つような関係性を指し、ベクトル的に正反対の位置にいるが組み合わせるとバランスが取れるペア、等の指標で捉えられるものとします。この定義やロジックについてはベンダー側で適切に設計いただき提案してください。検索結果の一覧には、該当社員名と簡易プロフィール、類似度スコアなどを表示してください。 7. **管理者向け機能(マスタ管理・設定):** 管理者ユーザーが利用する機能です。全社員の特性データを管理・メンテナンスするほか、システム全体の設定を行います。具体的には以下を含みます。 - **資質マスタ管理:** ストレングスファインダーの34資質およびFFS理論5因子について、その名称や一般的な定義・解説文を管理者が登録・編集できるようにします。各資質/因子の一般的特徴説明は社員個別画面等で利用されるため、最新情報に保つことができます。 - **AI生成用テンプレート編集:** 社員の特徴や相性診断レポートをAI生成する際のプロンプトテンプレートや定型フォーマットがあれば、管理者が調整・編集できるようにします。(例:文章出力の口調や項目構成を統一するためのひな形となるテキストを管理画面で編集可能にする) - **ユーザー管理・権限設定:** システムにログインできるユーザー(社員)の登録・削除や、管理者権限の付与設定を行います。社員基本情報(氏名、部署等)は人事マスタからのインポート機能があると望ましいですが、範囲外の場合はCSV一括登録や手動入力でも構いません。 - **監査ログ閲覧:** 編集履歴やシステム利用ログを管理者が確認できる機能。誰がいつどの項目を編集したか、AI生成を実行したか等の履歴を確認できるようにします。セキュリティ監査やトラブルシューティングに備えます。 以上が主な機能要件です。ベンダー様におかれましては、上記要件を満たすための画面設計やUIフローを検討の上、提案してください。特にAIによる文章生成機能やベクトル検索のUIについてはユーザビリティを考慮した創意工夫を期待します。 ## ユーザー権限とデータ管理要件 本システムでは、データの閲覧・編集権限を以下のように制御します。 - **一般社員ユーザー:** 自分自身のプロフィール画面を閲覧・編集可能(自身の特性データを更新できる)。他の社員のプロフィール画面は閲覧のみ可能で編集権限なし。ただし他社員のAI生成コンテンツ(取扱説明書、相性診断結果等)は閲覧できるものとします。 *補足:* 一般社員が編集できる項目は主に自分自身の特性に関する自己申告情報(例:各資質に関するコメント欄など)に限定し、ストレングスファインダーやFFSの客観テスト結果そのものは原則編集不可とします。テスト結果の数値データ自体は管理者のみ変更可とし、社員本人は閲覧のみ可能とします。 - **管理者ユーザー:** 全社員の全データに対する閲覧・編集権限を持ちます。社員の特性データ(テスト結果値含む)の登録・修正、資質マスタの編集、ユーザーアカウント管理等、システム上の全機能を利用できます。 - **一般的特徴データと個別特性データの管理:** 各資質・因子に関する**一般的特徴**(共通定義の説明文など)は管理者のみ編集可能とします。一方、各社員ごとの**個別特性**(自身の資質ランキングや自己PRコメント等)は、上記のとおり当人もしくは管理者が編集可能です。 - **権限に応じたUI制御:** 画面上、一般社員には編集ボタンや管理者向けメニューを表示しないなど、権限に応じて適切なUI制御を行ってください。誤って無権限ユーザーが編集操作できないようフロントエンド・バックエンド双方でチェックを実装してください。 - **データ保護と履歴:** ユーザーが自分自身のデータを編集した場合も履歴を残し、管理者はその差分を追跡できるようにします。また、不適切な変更や誤入力があった場合にロールバックできるよう、主要項目については変更履歴を一定期間保存してください。 ## 非機能要件 本システムの非機能上の重要要件は以下の通りです。 - **セキュリティ:** 社員の個人情報や性格特性というセンシティブなデータを扱うため、認証・認可を厳格に実装してください。社内システムとはいえ、外部への不正な情報流出を防ぐ措置(通信の暗号化、SQLインジェクション等の一般的な対策、アクセスログ監視など)は必須です。特にOpenAI API等外部サービスを利用する際には、送信するデータに必要以上の個人識別情報を含めない工夫や、APIキーの安全管理を徹底してください。また、編集履歴やアクセスログを保存し、監査証跡を残すこと。 - **スケーラビリティ:** 現時点の想定ユーザー数は500〜1000名規模ですが、将来的な社員増加やグループ会社展開も見据え、1000名を超えても性能劣化なく利用できるアーキテクチャとしてください。ベクトルDBやAI API利用においても、大量リクエスト時のスケール対応やスループット確保について考慮してください(必要に応じて負荷分散やキューイングの導入検討)。 - **パフォーマンス:** ユーザーがストレスなく利用できる応答性能を確保してください。社員検索や類似社員検索といったクエリに対しては、通常<1秒程度で結果を返すことを目標とします。AI文章生成機能については、外部API呼び出しの遅延がありますが、ユーザー体感でおおむね数秒〜10秒以内に結果を表示するよう工夫してください(例えば非同期処理や生成中インジケータ表示、結果キャッシュの活用等)。特に会議中に素早く相性診断結果を閲覧する、といったケースも想定されるため、可能な限り高速化に努めてください。 - **信頼性・可用性:** 社内業務で継続的に使われるシステムとなるため、一定の可用性を確保してください。目安として月稼働時間の99%以上のアップタイムを維持できる設計を目指します。万一システム障害が発生した場合にもデータが消失しないよう、トランザクション管理やバックアップを実施してください。ベクトルDBについてもデータ永続性や復元手段を考慮してください。 - **ベクトルDB選定と連携:** 類似検索の精度および運用性を重視し、適切なベクトルデータベースを選定してください。選定にあたっては、社員数規模(数千程度)でのベクトル格納・近傍検索において十分な性能が出ること、Laravel/PHP環境からスムーズに連携できること(公式のAPIやSDKがある、REST経由で呼び出せる等)、および運用コスト(自社サーバに導入可能か、クラウドサービス費用との比較)を考慮してください。提案時には推奨するベクトルDB製品名とその理由、ならびに本システムでの連携方法(例:Pythonのマイクロサービス経由で利用、Laravel上でライブラリ使用、etc.)を具体的に説明してください。 - **拡張性・保守性:** コード構成や設計は将来的な機能追加・変更に耐えられるようモジュール化・構造化してください。特にAI関連のロジック(プロンプト設計部分など)は後にチューニングしやすいよう分離し、ベクトル検索部分も他のデータソースに差し替え可能な設計が望ましいです。ドキュメント整備(設計書、ソースコードコメント、設定手順書など)も保守性向上の一環として重視します。 - **ユーザビリティ:** 社員が日常的に使うシステムとなるため、UI/UXデザインにも配慮してください。専門知識のない一般社員にも直感的に操作できる画面設計(例えばアイコンや色分けによるわかりやすい特性表示、説明文のツールチップ表示等)を期待します。特性分析結果は人によって受け取り方がデリケートな情報でもあるため、ポジティブな表現や誤解を招かない表示方法にも留意してください(例:弱みの指摘は直接的な表現を避け建設的な表現にする等、AI生成の文面調整)。 上記以外にも、本システムの構築にあたり考慮すべき非機能要件があれば適宜提案書内で補足してください。 ## 開発スケジュール・マイルストーン (参考) 本プロジェクトの希望スケジュール感は以下の通りです。詳細な日程はベンダー提案に基づき調整します。 - **提案書提出締切:** XX年XX月XX日(※日付は調整可能) - **ベンダー選定・発注:** 提出締切後約2週間以内を目処 - **キックオフ:** 発注後速やかに(XX年XX月上旬想定) - **要件定義・基本設計:** キックオフ後 ~ 約1ヶ月間 - **詳細設計・実装フェーズ:** 要件確定後 ~ 約3ヶ月間 - **テスト・受入試験:** 実装完了後 ~ 約1ヶ月間(ベンダー内部テストと当社受入テスト) - **本番リリース:** XX年XX月(上記スケジュール例ではキックオフから約5ヶ月後を想定) ※上記はあくまで目安です。ベンダー様側で最適なスケジュール提案があれば考慮します。重要なのは、当社の期待する完成時期(例:年度内リリース等)に見合った計画であること、および無理のない工程で品質を確保することです。提案時には**想定スケジュール**を工程ごとにご提示ください。 ## 提案内容に関する要望 本提案依頼に対し、ベンダー様からご提出いただく提案書には、以下の内容を含めてください。 - **開発概要とアプローチ:** 当社要件に対する開発アプローチの概要説明。特に生成AIの活用方法(使用予定のモデル例:GPT-4など)やベクトルDBの利用方法について、どのように実現するか方針を記載してください。また、本システムに類似する過去の開発実績があれば簡潔に紹介してください。 - **提案システム構成図:** アーキテクチャ図やモジュール構成図があればなお望ましいです。フロントエンド・バックエンド・外部サービス(OpenAIやベクトルDB)の連携関係が分かる図を提示してください。 - **使用技術詳細:** フレームワーク(Laravel 11)以外に利用予定の主要ライブラリ、外部サービス、ベクトルDB製品名、AIモデルなどを具体的に記載してください。ベクトルDBについては前述の選定理由も含めてください。 - **機能実現方法の詳細:** 機能要件1〜7それぞれについて、どのように実装するかの簡単な説明。特にAI生成部分ではプロンプト設計の考え方(どの特性データを入力にし、どんな出力フォーマットを得るか)や、リアルタイム生成か事前キャッシュかなど運用方法も触れてください。 - **プロジェクト体制:** 開発に携わる想定メンバー構成(例:プロジェクトマネージャー1名、リードエンジニア1名、LaravelエンジニアX名、AIエンジニアY名、テスターZ名など)を提示してください。主要メンバーのご経歴や役割も可能な範囲でご紹介ください。 - **開発スケジュール案:** 前項で述べたマイルストーンを踏まえた具体的な開発スケジュール案を提示してください。各工程(要件定義、設計、実装、テスト、納品)の期間と成果物を明示してください。 - **費用見積:** 本開発にかかる費用の見積を詳細内訳付きで提示してください。可能であれば機能モジュール単位や工程単位での内訳、および人月ベースの積算根拠も明記ください。併せて、OpenAI API利用料やベクトルDB運用費用などランニングコストが発生する部分についても試算してください(これらは参考情報として)。 ※提案いただいた費用は契約前提ではなく交渉の起点とさせていただきます。 - **納品物・成果物:** 納品物の範囲を明確にしてください(プログラム一式のソースコード、システム設計書・仕様書、テスト結果報告書、操作マニュアル等を想定)。ソースコードの受け渡し方法(リポジトリ共有等)やドキュメント類の形式についても記載ください。 - **サポート/保守提案(任意):** 本開発完了後の運用保守フェーズに関するサービス提案があれば記載してください(例:年間保守契約、問い合わせ対応、機能追加時の優遇等)。必須ではありませんが、提案いただいた場合は参考情報として検討します。 - **その他付加価値提案(任意):** 上記要件以外に、本システムの価値を高める提案があればご自由に記載ください。例えば、分析結果の可視化ダッシュボード追加、モバイル対応、他の人事システムとの連携など、当社が想定していない有益な機能や手法があれば積極的にご提案願います。 ## 注意事項・その他 - **秘密保持:** 本提案依頼書の内容および提案に際して知り得た当社の情報を第三者に漏洩しないようお願いいたします。提案参加にあたって必要な場合、NDA(秘密保持契約)を締結させていただきます。 - **知的財産権:** 開発の成果物(ソースコードや設計書含む)の知的財産権は原則として当社に帰属するものとします。提案時に特別なライセンス条件等がある場合は明示してください。 - **契約形態:** 本開発は請負契約を想定しています。検収基準や支払条件等の詳細はベンダー選定後の契約時に協議させていただきますが、何かご要望等あれば提案書中に記載ください。 - **問い合わせ対応:** 提案準備期間中に不明点・質問等がございましたら、XXXXXXXX(当社担当:〇〇)までメールにてお問い合わせください。質問受付期限はXX月XX日まで、回答は随時メールにて返信いたします。また、質疑応答で共有すべき事項があれば全提案候補ベンダーにフィードバックいたします。
フェーズ1: RFP → 機能要件書
自然言語で記述されたRFPを、AIにより機能一覧へと構造化します。
【INPUT】RFP: 社員特性分析・活用システム 開発提案依頼書
【OUTPUT】機能一覧
プロンプト例
RFP.mdファイルを読み込み、どんな機能が必要かを整理して、機能一覧としてRequirements.mdファイルを作ってください
左:RFP 右:機能一覧
フェーズ2: 機能要件書 → ユースケース
機能をユーザー行動に落とし込み、ユースケース文書とフローチャートを生成します。
【OUTPUT】ユースケース
プロンプト例
Requirements.mdの機能から、最も重要な機能のユースケースを作ってください。UseCases/UC001_[機能名]/フォルダを作って詳細なユースケース文書とflow_diagram.pumlを作成してください
残りの機能についても、同じようにユースケースを作ってください。各機能ごとにフォルダと文書を作成してください
ユースケース
UML
フェーズ3: ユースケース → ワイヤーフレーム
ユースケースをもとにHTMLベースのUIを生成。実際の操作イメージが視覚化されます。
【OUTPUT】ワイヤーフレーム
プロンプト例
UC001の画面をHTMLとTailwindCSSで作ってください。Wireframes/UC001/フォルダに画面ファイルを作成してください
残りのユースケースについても、同じように画面を作ってください
ワイヤーフレーム
フェーズ4: ワイヤーフレーム → Reactモック
静的なワイヤーフレームをReactコンポーネント化し、実際に動作するモックを完成させます。 SPA(Single Page Application)として動作し、そのまま顧客へのデモに利用できます。
【OUTPUT】Reactモック
プロンプト例
ReactMocksフォルダにReactアプリを作成し、アプリの基本構造を準備してください
UC001の機能をReactコンポーネントで作ってください
残りのユースケースについても、Reactコンポーネントを作ってください
Reactモックデモ動画
営業活動へのインパクト
- 提案スピード: 従来の10日が2時間に短縮
- 提案品質: 視覚化されたデモで顧客理解度向上
- 顧客体験: 要求がすぐに実現したかのようなインパクトの強い体験
技術的実現方法
- AIツール: Claude Code(長文解析・コード生成に強み)
- 開発環境: Node.js, React, TailwindCSS, PlantUML
- 今回利用したリポジトリ(hands-onブランチに成果物): GitHub
補足:Claude Code以外で試した結果
- Amazon Q CLIでもClaude Codeと同水準のモックが完成しました。
- Gemini CLIだと全体的に品質が低めだったため、あまりおすすめしません。
まとめ
「RFPから2時間でReactモックを作る」という事例は、単なる営業スピードアップではなく、知識労働そのものの進め方を根底から変えるヒントです。
-
要件定義の革新
膨大なRFPや議事録を読み込ませるだけで、AIが機能一覧やユースケースを瞬時に提示。合意形成までの数週間を、わずか数時間に短縮できます。 -
教育・研修の進化
新人や非エンジニアが「AIを相棒にプロトタイピング」を経験することで、AIネイティブな人材育成が可能に。教えるより「一緒に作る」ことで学びが加速します。 -
あらゆるテキスト起点業務の高速化
提案書、社内企画、業務改善レポート──。一度仕組みを整えれば、「テキストを渡せば形になる」という新しい業務スタイルが広がります。
つまり、この手法は「AIが補助する」のではなく、AIを中心に据えたワークフロー設計へとシフトする第一歩です。営業提案はもちろん、要件定義・社内開発・教育・業務改善まで、組織全体に展開できるポテンシャルがあります。
現在2025年時点では、それは単なる効率化だけではなく、顧客に驚きと信頼を与え、組織に新しい競争力をもたらすことができるかもしれません。
アジアクエスト株式会社では一緒に働いていただける方を募集しています。
興味のある方は以下のURLを御覧ください。