ワタシハv0チョットデキル！〜v0を活用したプロトタイピングを考える〜

【フロントエンドカンファレンス北海道2025】

本セッションでは、ちょっと株式会社の実務において、生成AIサービス「v0」をどのように活用しているかをご紹介します。
私たちはフロントエンド開発を中心に、多様なお客様案件を手掛けており、要件整理からUI設計、社内提案用のたたき台づくりまで、プロトタイピングのスピードが成果を大きく左右します。
本セッションでは、実際の社内ワークフローでv0をどう取り入れているのか、活用における工夫や課題を共有するとともに、今後どのようにプロジェクトの品質向上や効率化につなげていくのか展望を語ります。
明日からの開発現場に活かせる実践的なヒントを持ち帰っていただければ幸いです。

Transcript

1. ワタシハ v0 チョットデキル！ ~ v0 を活用したプロトタイピングを考える ~ ちょっと株式会社 後藤 滉希
2. ちょっと株式会社　フロントエンドエンジニア Kind Burger 北海道は 6 年ほど住んでいます （ちょっと社にくるまで） • IoT / AI / AR など最新技術検証でプロトタイプをよく作ってた ◦ XD で頑張って作るのが好きでした :) • その他に、クリエイター支援サイトの開発など （2024/11 ~ ちょっと社では） • Vue2 -> Vue3 アップデート • App Router でのサイト開発 • Orizm（自社 CMS）でのサイトリニューアルなど 軽く自己紹介
3. • v0 とは？ • v0 はなにができるのか？ • 導入事例をながめる • v0 を業務で活用できる？ • v0 やってみよう！ • まとめ 目次
4. v0 とはなにか？
5. “Turn your ideas into real web apps with v0.” • Vercel が提供する生成 AI ツール • 汎用的な AI ツールとは異なり、Vercel エコシステムに最適化 されている • デザインからプロダクトまでを加速させる v0 とはなにか？
6. v0 とはなにか？ - 対話型 UI でプロンプトを与える
7. v0 とはなにか？ - 画面プレビュー
8. v0 とはなにか？ - コードエディター
9. v0 とはなにか？ - デザインモード
10. • プロンプトからアイデアをかたちにする ◦ 入力：自然言語 / 手書きのスケッチ / 画像 / デザインツールで作成したデータ ◦ 出力：React / Next.js / Tailwind CSS / shadcn/ui などモダンな技術のコード • アプリケーションを改良する ◦ プロンプト / 画面プレビュー / コードエディター / デザインモード ＝＞ 素早く繰り返し調整して、アイデアを迅速に洗練させるツール v0 とはなにか？
11. v0 はなにができるのか？
12. • エージェントとしてプロンプトを解釈する • 実用的な Next.js / Tailwind CSS などのコードを生成する • GitHub リポジトリとの連携 • チームでの共同作業 • 外部ライブラリやフレームワークとの統合 v0 はなにができるのか？
13. • エージェントとしてプロンプトを解釈する ◦ v0.dev -> v0.app ◦ 8/11 エージェント的側面が強化 ▪ プロンプトの目的を理解 ▪ 仕様書の作成 ▪ 作業計画を立てる ▪ 必要な情報を検索 ▪ ファイルの読み取り …etc v0 はなにができるのか？
14. • 実用的な Next.js / Tailwind CSS などのコードを生成する ◦ v0 には Vercel の世界トップクラスの専門知識が組み込まれている ◦ Next.js / React / その他最先端技術 の開発者たちによって作られ、改良され続けている ◦ 現代の Web 開発標準に沿って、生成されるコードやインタラクションの一つひとつにベストプラクティ スが組み込まれている v0 はなにができるのか？
15. • GitHub リポジトリとの連携 ◦ チャットごとに GitHub リポジトリ（ブランチ）を紐付けることができる ◦ v0 とリポジトリでの変更をお互いに push / pull できる • チームでの共同作業 ◦ リンク 1 つでプロトタイプを共有可能 v0 はなにができるのか？
16. 導入事例をながめる
17. • How our studio uses v0 to deliver quality, speed and performance 導入事例をながめる - Roboto Studio
18. • How our studio uses v0 to deliver quality, speed and performance ◦ Roboto Studio は AI・最新Web技術を扱う制作会社 ◦ v0 によってワークフローが劇的に変わった ◦ アイデア出し： ▪ クライアントとの打ち合わせ中に v0 を使い、具体的なものを見ながら議論を深める ◦ プロトタイピング： ▪ 従来は Figma で細かくワイヤーフレームを作成し管理する手間があった ▪ v0 によってコードベースのコンポーネントを生成しプロトタイプを構築できる ▪ v0 はデフォルトでアクセシビリティ対応済みなので state を考えなくて良い ◦ 実装： ▪ v0 は外部ライブラリやフレームワークと接続することも容易だった 導入事例をながめる - Roboto Studio
19. • How our studio uses v0 to deliver quality, speed and performance ◦ 節約した時間は、競争優位に関わる領域のタスクに取り組めた ▪ ユーザー体験の強化 ▪ パフォーマンス最適化 ▪ アクセシビリティ改善 ▪ カスタム機能の開発 ▪ セキュリティ強化 ▪ コンテンツ戦略と SEO ▪ クライアントへのレクチャーとサポート 導入事例をながめる - Roboto Studio
20. • Rethinking prototyping, requirements, and project delivery at Code and Theory 導入事例をながめる - Code and Theory
21. • Rethinking prototyping, requirements, and project delivery at Code and Theory ◦ Code and Theory は広告代理店と SIer の側面を持つ会社 ◦ これまでの開発プロセスに課題を感じていた ▪ 文章にまとめ、そこからワイヤーフレーム、モックアップを作るには時間がかかりすぎる ◦ v0 を導入してプロンプトから直接コード生成に取り掛かる ▪ 機能はドキュメントで説明されるのではなく、プロトタイプによって議論される ▪ フィードバックループが短縮され、より早く本番環境に反映できる ◦ v0 によって職種間を超えたコラボレーションが促進された ▪ 「コードが書けるか」に関係なく、デザイナーもストラテジストも参加できる ▪ 曖昧なアイデアをプロトタイプにして試行錯誤できる 導入事例をながめる - Code and Theory
22. • v0 によりアイデアを素早くプロトタイプにできた • より多くのアイデアのバリエーションを試すことができた • プロンプトを繰り返し調整することでアイデアを洗練させることができた • 開発初期の検証工数を削減できた分、より価値のある作業に時間を再分配 • 職種を問わずアイデアをかたちにして検証、チームが活性化された 導入事例をながめる - まとめ
23. v0 を業務で活用できる？
24. • 正直なところ、試行錯誤中です :) • いくつか小さく始めることを試してみています ◦ Next.js / Tailwind CSS が得意なので、小さな技術検証ツールを作ってもらう ◦ デザイナーのアニメーションイメージをプロトタイプにする ◦ 打ち合わせでお客さんの要求をかたちにしてみる ◦ Vercel、Supabase との統合 • 上手く行かないところもある :( v0 を業務で活用できる？
25. v0 を業務で活用するには？ • 小さく始める ◦ Next.js / Tailwind CSS が得意なので、小さな技術検証ツールを作ってもらう ◦ 筋の良いものを作ってくれる、個人的にとても上手くいっていると感じる使い方
26. v0 を業務で活用するには？ • 小さく始める ◦ Next.js / Tailwind CSS が得意なので、小さな技術検証ツールを作ってもらう ◦ 筋の良いものを作ってくれる、個人的に上手くいっていると感じる使い方
27. • 小さく始める ◦ デザイナーのアニメーションイメージを実際に動く UI にして検証する ◦ デザイナーとエンジニアの連携をスムーズにしてくれそう v0 を業務で活用できる？
28. • 小さく始める ◦ 打ち合わせでお客さんの要求をかたちにしてみる ◦ 動くものがある状態で要求事項の整理や提案を行い、具体的なイメージを持つ v0 を業務で活用できる？
29. • 小さく始める ◦ 打ち合わせでお客さんの要求をかたちにしてみる ◦ 動くものがある状態で要求事項の整理や提案を行い、具体的なイメージを持つ v0 を業務で活用できる？
30. • 小さく始める ◦ 打ち合わせでお客さんの要求をかたちにしてみる ◦ 動くものがある状態で要求事項の整理や提案を行い、具体的なイメージを持つ v0 を業務で活用できる？
31. • 小さく始める ◦ Vercel、Supabase との統合 ◦ Vercel エコシステムとの連携はチャットの指示であっという間にできる v0 を業務で活用できる？
32. • 小さく始める ◦ Vercel、Supabase との統合 ◦ Vercel エコシステムとの連携はチャットの指示であっという間にできる v0 を業務で活用できる？
33. • 小さく始める ◦ Vercel、Supabase との統合 ◦ Vercel エコシステムとの連携はチャットの指示であっという間にできる v0 を業務で活用できる？
34. • 上手く行かないところもある :( ◦ v0 デザインにデザインお任せすると似通っている（ shadcn/ui らしさを感じる） ▪ ちゃんとデザイン仕様、デザインデータ、デザイントークンなど与えてあげる ◦ プロンプトが曖昧だと余計な仕様が混じったプロトタイプになってしまいノイズ ▪ 効果的なプロンプトを与える • 目標を明確にすること • 期待する出力形式とか制約を伝える • 複雑なものは小さなステップに分けて依頼 ◦ データのプライバシーとトレーニングからの保護 ▪ オプトアウト機能はエンタープライズプランから ... :( v0 を業務で活用できる？
35. v0 やってみよう！
36. v0 やってみよう！ お題）飛行機の予約サイト 北海道行くために飛行機を予約したいけど分かりにくい... 羽田で予約したつもりが、成田になってた... 手荷物オプションが付けられてて高くなっちゃった... v0 使って自分で予約サイト考えてみるぞ！！
37. v0 やってみよう！ お題）飛行機の予約サイト
38. • 待っている間にプロンプトのコツをもう少し ◦ ゴールを定義する ▪ 基本方針、役割、タスクを明確に ▪ 初期ディスカッションの成果物から、 KPI・メモ・画像などをアップロード ◦ コンテキストを与える ▪ 取り組みの狙いを与える ▪ Figma デザインから、現在の状況とプロダクトでやりたいことを説明する ◦ 出力フォーマットを具体的にする ▪ 複雑なタスクは小さく分解し、処理しやすいプロンプトにする ▪ 制約を提示し、コンポーネントのインタラクティブな状態も含める ◦ デザイン原則を明確にする ▪ 階層構造 / 余白とレイアウト / タイポグラフィ / アクセシビリティ ▪ コンポーネントの再利用性 v0 やってみよう！
39. （できたもの） v0 やってみよう！
40. （できたもの） v0 やってみよう！
41. （できたもの） v0 やってみよう！
42. （できたもの） v0 やってみよう！
43. まとめ
44. • v0 は「迅速なプロトタイピングを愛する人々のためのツール」 ◦ v0 を活用してアイデアがすぐ動くプロトタイプになる ◦ 開発の早い段階からプロトタイプを用いた具体的な議論ができる • 今後の展望としては： ◦ プロトタイプを用いてお客さんと同じイメージを共有していく ◦ フィードバックループの短縮により、より価値のあるタスクへ時間を再分配する ◦ お客さんにとっても、ちょっと社にとっても、お互い幸せになれるワークフローを見つけたい！ まとめ