🤖
Vercel×スマートバンクと考える〜v0を活用したAI時代のサービス開発〜 イベントレポート
蒸し暑さが本格化しはじめた 2025年6月25日、昼休みのオンライン会議室にはフロントエンド開発者、PM、デザイナーが続々と集まりました。タイトルは「Vercel × スマートバンクと考える 〜v0を活用したAI時代のサービス開発〜」。 Vercelのエンジニアリングチームと、家計簿アプリ「B/43（ビーヨンサン）」を運営するスマートバンクの開発陣が、v0 を軸に “つくるスピード” をどう塗り替えたか──デモを交えながら共有した55分をレポートします。
Vercel セッション
「v0が描くフロントエンドの未来」
登壇：上杉周作（@chibicode）・石原ニコラス（@_xkime）／Vercel Inc.
1. v0 基本デモ
上杉氏は画面共有を開くや否や、イベント告知ページの URL を v0 に貼り付けただけで、Next.js＋Tailwind CSS＋ShadCN UI のコードを自動生成。そのまま GitHub 私有リポジトリを作成しワンクリックで Vercel にデプロイするまでを 3分弱 で披露しました。 途中、ログインフォームを追加するプロンプトを投げ、ボタン遷移付きの複数ページ構成も生成。生成後に デザインモード を使ってフォントサイズをドラッグで調整し、「プロンプトなしの微修正」も可能である点を強調しました。
2. 開発を支える新機能
石原氏が続いて取り上げたポイントは次の5つ。
機能 | 概要 |
|---|---|
ロック | 既存ファイルを変更不可にして追加生成だけを許可。部分更新の誤破壊を防止。 |
マルチプレイヤー | チャット履歴をチーム全員で共有。プロダクトマネージャやデザイナも同じ会話に参加。 |
プロジェクト設定 | 知識ベース、環境変数、APIキーをプロジェクト単位で管理。 |
ネイティブインテグレーション | Supabase など外部DBを GUI 経由で接続。CRUD を含むコードを即生成。 |
API利用 | v0 の生成エンジンを外部 IDE（Cursor、Cline など）から呼び出し可能。 |
特に ShadCN Registry との連携例では、社内デザインチームが公開したカスタムコンポーネントをワンクリックで取り込み、プロンプト一つで “ポケモン第2世代カード” に変換するライブデモを実施。会場のチャットは「素材管理の面倒が飛ぶ」と湧きました。
3. “全員フルスタック” のビジョン
AI時代は「役割間コミュニケーションコスト」がボトルネック
v0 を通じて PM も営業もデザイナーも フロント〜バックエンドを跨いでデプロイできる 未来を目指す 加えて、v0 自体の開発にも v0 を用いる “セルフドッグフーディング” を実施しており、エージェント開発のフィードバックループ が回っている点をアピールしました。
スマートバンク セッション
「1か月でプロトタイプ50件 〜v0が加速したAI家計簿開発〜」
登壇：coyote（@coyotekojote）／スマートバンク
1. プロトタイプ月間の設計
目的：AIを用いた「家計管理の新体験」を発掘
体制：エンジニア・デザイナー・PM 計約15名を 5チームに分割
サイクル：2〜3日で動くものを作る → PMレビュー → 次の案へ、を4週間繰り返し 結果、約50件 の動作サンプルが誕生。「URLで共有→即フィードバック」が可能な v0 がボトルネックを解消したと振り返りました。
2. 本番投入に至った2つの機能
機能 | 役割 | v0 での活用 |
|---|---|---|
AI埋蔵金チェッカー | 支出データを分析し「潜在的節約額」を提示 | CSV を読み込む Web デモを v0 で実装。社内メンバーのリアル支出で検証し、ユーザー価値を確認。 |
AIスクショ読み取り | QR決済等のスクショを解析して一括記録 | モバイル固有機能のためネイティブ実装を選択。v0 は使用せず技術検証を直行。 |
「アイデアが具体的なときはネイティブ実装、未知数が大きいときは v0 で顧客体験を確かめる」 — 登壇者コメント
3. 社内横展開
RubyKaigi ブース用「お金タイプ診断」Webアプリ
デザイナーチームによる “ノックアウトデザイン” 用モック いずれも ノーコード要員0人 で短時間構築。非エンジニアが v0 を自己流に利用し始めた例として紹介されました。
質疑応答ハイライト
質問 | 回答（抜粋） |
|---|---|
v0 のパスワード保護は？ | 現在は Vercel プロジェクト設定で対応。今後 v0 から直接設定できるUIを検討中。 |
Claude Code / Cursor との違いは？ | v0 は Next.js + ShadCN のベストプラクティスがモデルに組み込まれており、追加プロンプトなしでも品質を担保できる。 |
スマホ UI の最適化は？ | 画面サイズをプロンプトに含めるだけで縦横固定レイアウトを生成可能。追加の手書きCSSは最小限。 |
まとめ ― 「つくる速さが、議論の深さを生む」
v0 × Vercel は「生成→GitHub→Vercelデプロイ」を数分で完結し、
仮説検証のループを“日単位”から“時間単位”へ短縮
非エンジニアの“作り手化”を後押し
スマートバンクの事例が示す通り、プロトタイプ総量の増加が機能選択精度を高める。
一方で「技術検証が本質」のタスクでは従来手法も健在。
v0は万能ではなく、選択眼こそが成果を左右 する。
生成AIが前提となった現在、“議論に耐えるモック” が数時間で手に入る時代が到来しました。 手を動かす敷居が下がった分だけ、何を作り、何を作らないか の判断がこれまで以上に問われます。 その取捨選択を支える武器として、v0 の進化はまだ始まったばかりです。
Yardでは、AI・テック領域に特化したスポットコンサル サービスを提供しています。
興味がある方は、初回の無料スポットコンサルをお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
Read next
Loading recommendations...