お試し高速プロトタイピング

Acsimの成果物を活用し、v0を活用し高速でプロトタイピングを生成をお試しできます。上から順に作業を実施してみてください。高速、かつ質の高いプロトタイピング体験を楽しむことができます。

サンプルファイルのダウンロード

Acsimで生成される想定のファイルをダウンロードしてください。

Appendix：サンプル業務は以下をベースに作成しております。

この業務フローは、B2B商取引において商品の販売に関わる一連のプロセスを表しています。主要なステップには以下が含まれます。

1.毎月の仕入れ価格（原価）の確定
2.基準となる販売価格の策定
3.販売価格の確定（定常案件）
4.売上予算の策定
5.見積（個別案件）
6.受注依頼から注文請書の受領まで
7.商品の配送
8.仕入元への支払作業
9.バイヤーへの請求書送付

主な関係者は、バイヤー、自社営業担当者、自社営業担当の上長、自社基幹システム、メーカー営業担当者、加工業者営業担当です。フローには顧客要件の確認、価格交渉、注文処理、配送管理、請求処理など一連の業務が含まれています。

Appendix：サンプル画像は以下をベースに作成しております。

v0にアクセスする

v0にアクセスしてください。アカウントを作成していない場合は新規に作成してください。

※2025/03/19時点は無料で作成できます

v0で画面を生成する

初期画面を構築する

以下のプロンプトを貼り付けて、v0に貼り付けてください。更に、取得したサンプルファイル2つを添付して実行してください。

B2B商取引Webアプリケーションを作成する。
なお、作成する機能は自社営業担当者が利用するものに限定する。

生成された画面を触ってみてください。いくつかの画面が生成されていると思います。 Acsimで生成したインプットファイルを活用することで、初期から品質が高い画面が生成できるので、大きく調整せずにお客様と議論することが可能です。

機能を追加をやってみる

以下のプロンプトをv0に貼り付けてください。

引き続き、商品管理と注文管理を実装する。

追加で商品管理画面、注文管理画面が生成されますので確認してみてください。

自分でいろいろ試してみる

作成した画面に、ボタンを付けたり、項目を見直したりを指示すると修正されます。

v0のIntegration機能を使ってSupabaseと接続する

v0で作ったUIプロトタイプに実際のデータを保存できる機能を追加してみましょう。
v0の「Integration機能（外部連携）」を使うと、「Supabase（データベースサービス）」と簡単に連携できます。

Supabaseデータベースを作成する

v0の画面右上にある「Integrations」ボタンをクリックします。
表示されるリストから「Supabase」を選び、「Create」ボタンをクリックします。
「Create Database」画面で、
- 「Primary Region」はお住まいの地域に近いものを選択
- 「Installation Plans」は「PRO Plan」を選択
- 「Continue」ボタンをクリック
「Database Name」を確認し、「Create」ボタンをクリックします。
作成完了まで1〜2分待ちます。完了すると自動的にv0とデータベースが接続されます。

顧客データ管理機能を実装する

v0のエディタ画面に戻り、以下のプロンプトを入力します。

Supabaseを使って、顧客データを管理する機能を実装してください。
顧客の一覧表示、詳細表示、登録、編集ができるようにしてください。
顧客データには会社名、担当者名、電話番号、メールアドレスの情報を含めてください。

プロンプトを送信すると、v0がデータベースのテーブル設計を始めます。
SQLコードが表示されたら、画面下部の「Run Code」ボタンをクリックします。
このボタンをクリックすることで、実際にデータベースにテーブルが作成されます。
v0が自動的に顧客管理画面を生成します。
生成された画面で顧客データを追加したり編集したりしてみましょう。
入力したデータは実際にSupabaseデータベースに保存され、アプリ内で利用できるようになります。