高速プロトタイピング
Acsimを活用した高速プロトタイピングの方法と実践例を解説します
はじめに
高速プロトタイピングでは、Acsimから出力した業務フロー、画面一覧、機能一覧、デザイン仕様書、プロンプトを使って、v0で画面プロトタイプを作成します。
目的は、実業務でそのまま使えるシステムを完成させることではなく、関係者間で画面イメージや操作感を素早く確認し、認識合わせをしやすくすることです。
ToBe業務フローの作成、および画面一覧・機能一覧を生成していることが前提となります。 なお、v0自体は、Acsimから出力された情報がなくても、自然言語のみでプロトタイプを作成すること自体はできます。Acsimから出力された構造化データを添付する方が、業務フローの情報などを参照できるため精度が高くなります。
v0はVercel社が提供する外部サービスであり、Acsimを開発提供するROUTE06が開発している機能ではありません。生成されたコードや画面はプロトタイプとして扱い、本番利用する場合はエンジニアによるレビュー、リファクタリング、セキュリティ確認を行ってください。
v0でできること・できないこと
v0は、自然言語の指示や添付ファイルをもとに、React/Next.jsベースの画面やアプリケーションを生成できるAIツールです。Acsimの高速プロトタイピングでは、特に以下の用途で活用します。
| できること | 注意点 |
|---|---|
| 画面イメージや操作感を短時間で形にする | 生成物は本番品質とは限りません |
| 非エンジニアもチャットで修正依頼しながら試せる | 複雑な業務ルールや権限制御は、後続の設計・実装で精査が必要です |
| Acsimで整理した業務情報をもとに、UIのたたき台を作れる | v0がAcsim内の情報を自動で参照するわけではないため、必要な情報を添付・入力する必要があります |
| 関係者レビュー用のプロトタイプを共有しやすい | 実データや機密情報の投入には注意してください |
v0はスピード重視で画面を作る、いわゆるバイブコーディング型のツールです。認識合わせには有効ですが、生成されたコードが常に保守しやすい構造になるとは限りません。開発に利用する場合は、エンジニアが確認・改善する前提で扱ってください。
事前に準備するもの
プロトタイプ生成を始める前に、以下を用意してください。
- Acsimで作成済みのToBe業務フロー
- 対象システムの画面一覧・機能一覧
- Acsimからエクスポートするプロトタイプ生成用ファイル
- Acsim Docsからダウンロードするデザイン仕様書
- v0にログインできるアカウント
1. メニュー「プロトタイプ生成」にアクセス
「プロトタイプ生成」画面を開き、表示されたガイドに従って必要データをエクスポートします。
システム選択 で対象のシステムアクターを選択し、画面下部にある まとめてエクスポート ボタンを押下してください。基本的には、すべてのファイルを選択して進めます。
エクスポートしたら「2.デザイン選択」へ進みます。
2. デザイン仕様書をダウンロード
「2.デザイン選択」画面を開いたら、デザイン仕様書をダウンロードする ボタンを押下します。
Acsim Docsのデザイン仕様書ダウンロードページに遷移するので、お好みのデザインテンプレートを選んで ダウンロード ボタンを押下してください。
デザイン仕様書は、v0に対して色、余白、コンポーネントの雰囲気などを伝えるための補助資料として使います。
ダウンロードが完了したら「3.プロンプト生成」へ進みます。
3. プロンプトを生成・コピー
「3.プロンプト生成」画面を開いたら、v0に入力するプロンプトをつくります。
基本は 固定プロンプト をそのまま利用してください。固定プロンプトには、Acsimの出力情報をもとにプロトタイプを生成するための基本的な依頼内容が入っています。
追加したい条件がある場合は、任意プロンプト に入力します。たとえば、以下のような内容を指定できます。
- 「まずは一覧画面と詳細画面を優先して作成してください」
- 「営業担当者がタブレットで確認する想定なので、横幅が狭い画面でも見やすくしてください」
- 「操作確認が目的なので、登録・編集・削除のボタンをクリックできる状態にしてください」
画面下部の 最終プロンプト（固定 + 任意） に表示されるテキストを コピー ボタンでコピーします。
テキストをコピーしたら「4.プロトタイプ生成」へ進みます。
4. プロトタイプを生成
「4.プロトタイプ生成」画面を開いたら、利用するAIサービスを選択してプロトタイプを生成します。
ここでは v0（ブイゼロ） を使用する手順を説明します。
4-1. v0にアクセス
v0でプロトタイプ生成 ボタンを押下すると、v0 のチャット画面が新しいタブで開きます。
前提として、v0のアカウントをお持ちの方のみが利用できます。
4-2. ファイルを添付し、プロンプトを貼り付けて実行
v0のチャット画面が開いたら、左側のチャット入力欄に以下の2つをセットして送信します。
- ファイルを添付 — ステップ1、2でダウンロードした業務フロー、該当システムの画面一覧・機能一覧、デザイン仕様書などを、ドラッグ&ドロップまたはクリップアイコン（添付ボタン）から添付します
- プロンプトを貼り付け — ステップ3でコピーした
最終プロンプト（固定 + 任意）のテキストを貼り付けます。なお、必ずこのプロンプトを使う必要はありません。作りたい画面や確認したい観点に合わせて、自由に修正・追記して構いません
ファイルとプロンプトの両方がセットされていることを確認したら、送信ボタンを押してチャットを実行してください。
圧縮ファイルは解凍せず、そのまま添付できます。添付や生成でエラーが発生した場合は、再試行するか、表示されたエラー文言をv0のチャットに貼り付けて対処方法を依頼してください。
4-3. モデルを選ぶ
v0では、Auto、Mini、Maxなどのモデルを選択できます。モデルは、賢さ・生成品質・速度・消費クレジットのバランスが異なります。
- Auto — v0側にモデル選択を任せたい場合に使います
- Miniなどの軽いモデル — クレジット消費を抑えながら、軽微な修正や小さな画面を試したい場合に向いています
- Maxなどの高性能モデル — 複雑な画面、複数画面の生成、精度を重視したい場合に向いています
最初から大きなプロトタイプを一度に作ろうとすると、時間やクレジットを多く使うことがあります。まず軽いモデルで方向性を確認し、難しい生成や仕上げだけ高性能モデルを使う進め方も有効です。
4-4. 生成結果を確認し、チャットで修正する
v0がプロンプトとファイルの内容を解析し、画面プロトタイプを生成します。
生成が完了すると、画面左側にv0の応答、画面右側にプロトタイプのプレビューが表示されます。プレビュー上でクリックやページ遷移など、操作感を確認できます。
生成された画面に修正を加えたい場合は、v0のチャットで追加の指示を送ります。たとえば、以下のように依頼できます。
- 「ヘッダーの色を青に変更してください」
- 「商品管理画面を追加してください」
- 「一覧から詳細画面へ遷移できるようにしてください」
- 「入力エラー時のメッセージを表示してください」
- 「画面の文言を業務担当者向けにわかりやすくしてください」
v0は一度の指示で完成させるよりも、生成結果を見ながら対話的に直していく使い方に向いています。大きな修正は「一覧画面を直す」「詳細画面を追加する」など、画面単位・機能単位に分けて依頼すると進めやすくなります。
4-5. ソースコードをダウンロードする
生成されたコードを確認したい場合は、画面右上の3点メニューを開きます。
メニュー内の Download ZIP を押すと、生成されたコードをZipファイルとしてダウンロードできます。
ダウンロードしたコードは、あくまでプロトタイプの確認用として扱ってください。実際の開発に利用する場合は、エンジニアがコード構成、依存関係、セキュリティ、保守性を確認したうえで、必要に応じてリファクタリングしてください。
4-6. Publishボタンは原則使わない
v0画面右上の Publish ボタンは、作成したプロトタイプをProduction環境として公開するための機能です。
通常、Acsimから作成するプロトタイプは社内・関係者限定で確認することを想定しています。Publish ボタンを押した後に表示される Publish to Production を実行すると、作成中の情報がインターネット上に公開されます。そのため、通常は Publish ボタンを触らないでください。
また、Publish機能を利用する場合は、v0/Vercel側の契約やオプション料金が必要になる場合があります。利用が必要な場合は、事前にAcsimのサポート担当へご相談ください。
関係者に画面を見せたいだけの場合は、Publishではなく次の「共有」機能を使ってください。
4-7. 関係者に共有する
同じチーム内のメンバーや関係者にプロトタイプを共有したい場合は、画面右上の共有ボタンを使います。
共有ダイアログでは、個別ユーザーの招待、チーム内共有、閲覧権限の設定、リンクコピーができます。基本的には、共有範囲を社内・関係者に限定し、権限は Can View から始めることをおすすめします。
- 個別に共有する — 検索欄から共有したいユーザーを選択します
- チーム内に共有する —
Everyone at ...を選択し、同じチーム内のユーザーが見られる状態にします - 権限を選ぶ — レビューだけでよい場合は
Can Viewにします - リンクを渡す —
Copy Linkで共有リンクをコピーします
Public やリンクを知っている人全員が見られる設定にすると、意図しない範囲に情報が共有される可能性があります。プロトタイプに業務情報や顧客情報が含まれる場合は、共有範囲を必ず確認してください。
4-8. 途中で止まった場合やエラーが出た場合
情報量が多い場合や生成内容が大きい場合、v0の応答が途中で止まることがあります。その場合は、チャットで 続けて と送ると、続きの生成を依頼できます。
エラーが表示された場合は、エラー文言をそのままチャットに貼り付けて、以下のように依頼してください。
それでもうまくいかない場合は、依頼範囲を小さくします。たとえば、すべての画面を一度に作るのではなく、「まずログイン後のトップ画面だけ」「次に一覧画面」「最後に詳細画面」のように分けて生成します。
4-9. クレジット残高を確認する
v0は生成内容に応じてクレジットを消費します。2026年6月時点のv0公式情報では、Teamプランはユーザーあたり月額30ドルの月次クレジットが含まれます。
残りのクレジットや利用状況は、v0画面右上のアカウント情報、またはUsage/Billing関連の画面から確認できます。個人に付与された月次クレジットは、同じチーム内の他ユーザーへ付け替えることはできません。
クレジットを使い切った場合は、追加購入が可能です。追加購入が必要な場合はAcsimのサポート担当へご相談ください。費用はお客様負担となります。
v0の料金体系やモデルごとの消費量は変更される可能性があります。最新情報は v0 Pricing を確認してください。
4-10. 生成物の扱い方
v0で作成したプロトタイプは、画面イメージや操作感を確認するためのたたき台として扱ってください。レビュー時は、以下の観点を見ると認識合わせに使いやすくなります。
- 業務担当者が見たい情報が画面上にあるか
- 操作の順番が実際の業務に合っているか
- 一覧、詳細、登録、編集などの画面遷移が自然か
- 表示文言が業務担当者に伝わる言葉になっているか
- 追加で必要な画面や項目がないか
本番開発に進める場合は、プロトタイプをそのまま採用するのではなく、要件、データ構造、権限、エラー処理、性能、セキュリティを確認したうえで、エンジニアが実装方針を整理してください。