営業マンがv0を使う話

営業担当者のv0活用の Tips

Transcript

1. 営業でも役立つv0 2025年04月12日 株式会社Digeon 松尾 庄馬
2. 2 Vercel v0とは Vercel v0は、フロントエンド開発に特化したAI搭載のUI生成ツール。 LLMを用いることで、テキストによる指示からアプリケーションのモックのコードを生成できる。 https://v0.dev/
3. 3 v0 Community Communityページ( https://v0.dev/chat/community )ではユーザーが公開したプロジェクトが参照できる。 実際のプロジェクトを見ることで、何か手を動かすきっかけを作りやすい。
4. 営業担当が感じるv0のメリット 4 ① プロトタイプの開発時間が削減できる ソフトウェアの提案時には、FigmaやXDなどで画面デザインやプロトタイプを作ることがある。 v0によってその工数が大幅に短縮できる。 ② プロトタイプを営業担当自身でつくれる 自然言語ベースで開発ができるため、営業担当のみで作業が完結しやすい。 社内のデザイナーやエンジニアには、レビューや一定以上の規模で相談すれば良い。 ③ 顧客コミュニケーションの円滑化 「前回話した内容をv0で作ってきました。」 「ここから要望との差分があれば教えてください。」 とすることで、相手側の要望を聞き出しやすくなり、コミュニケーションを円滑に進められる。
5. v0のTips
6. Figmaからのインポートは便利、ただし信用しすぎない 6 デザインがFigmaで作られてる場合は、FigmaからのインポートでUI生成ができる。 ざっくりそれっぽいものは作ってくれるが、完全再現されるわけではないので注意。 また当然ではあるが、明示的な指示がない限りはボタンやリンク等のアクションはほぼ作られないので注意。
7. 明示的なプロンプトを与える - 項目を明示する 7 ×イマイチな例 ◦ 良い例 ユーザーの登録画面を作ってください。 ユーザーの登録画面を作ってください。 ## 項目名 - 氏名：必須項目 - メールアドレス：入力必須、メールアドレスの形式によるバリデーションあり - パスワード：必須項目 - パスワード再確認：必須項目で「パスワード」と同じ内容は入力されているかのバリ デーションあり - ユーザー権限：入力必須で「一般」と「管理者」からの選択式の項目、デフォルト値は 「一般」。
8. 明示的なプロンプトを与える - 画面レイアウトを明示する 8 ×イマイチな例 ◦ 良い例 ユーザーのマスタ管理画面を作ってください。 ユーザーのマスタ管理画面を作ってください。 ## レイアウト 1. 上部にパンくずリスト "Home" > "ユーザー管理" 2. パンくずリストの直下にキーワード検索欄 3. キーワード検索欄の直下の左側に絞り込み条件、右側にCSVエクスポートのSecondaryボタンと"+ 新規作成"の Primaryボタン 4. その下にユーザー一覧テーブルを配置し、列は左から順に下記の要素 1. ユーザー名 2. メールアドレス 3. ユーザー権限 4. 三点ドットアイコンをクリックで、編集か削除の選択肢が出る 5. テーブルの下にページネーション
9. 動作が重くなってきたらフォークする 9 バージョンが50くらいになるまで色々と更新をかけていると、「重くなる可能性があるのでフォークしない か？」というメッセージが表示される。 恐らく過去のやり取りを全てcontextに含めており、50件ほどのやり取りをする中で、単純にreasoningの動作が重くなる・ コンテキストが不要なほど長くなりコード編集の精度が落ちる、といった課題が発生する可能性が想定される。 別段前のバージョンを捨てても構わないようなプロジェクトであれば、積極的にフォークして以前のやり取りを捨て、高速 に修正のサイクルを回していく方が望ましいケースもある。
10. 複数の変更をひとつにまとめる 10 v0の作業におけるボトルネックは、一度の編集でそれなりの処理時間を要することである。 また一方で一度に複数の編集指示をしても、それなりの精度で適切な変更を加えてくれる。 細かい指示を大量に出すのではなく、いくつか（5個以下程度が推奨）の変更点をまとめて指示する方が、高 速にプロトタイプ開発を進めやすい。 サイドバーの背景色を`#FAFAFA`に変更してください。 サイドバーをネスト可能にして、マスタ管理に従業員・部署がネ ストされるようにしてください。 サイドバーの背景色を`#FAFAFA`に変更してください。 次に、サイドバーをネスト可能にして、マスタ管理に従業員・部 署がネストされるようにしてください。