[AIDD Lv.1]自然言語でWebアプリが作れる！ v0 を使ってみた！
“チャットするだけ”でアプリが動く──それが本当か試してみた。
v0に「スマホで動くローリングストックの在庫を管理するアプリ」と頼んだら、たった数分でデプロイ完了。
エラーも修正も対話で解決、その全プロセスを赤裸々に共有します。
v0とは？ 概要
v0は、Vercelが提供する「自然言語で指示するだけでWebアプリを生成できる」新しい開発体験を実現するAIツールです。チャット形式で「こんな画面がほしい」「Figmaのデザインを使いたい」といった要望を伝えるだけで、React/Next.js/Tailwind CSS/shadcn/uiといった最新フロントエンド技術で構築されたアプリを自動生成。そのままVercelにワンクリックでデプロイでき、開発未経験でもすぐに成果物をシェアできます。
また、v0で作ったプロジェクトはVercelダッシュボードと完全連携。GitHubとの同期や環境変数管理、API連携などもスムーズに扱えるため、「とりあえず動くものがほしい」という個人から、「複数人で本格的なサービスを作りたい」チームまで幅広く対応しています。
v0の主な特徴
自然言語プロンプトでUIとコードを同時生成
例：「チャットアプリのトップ画面を作って」「Figmaからデザインを取り込んで」などの指示に即対応。デザインモード&リアルタイムプレビュー
ビジュアルエディタでUIを直感的に編集、即座にプレビューして完成イメージを確認できます。Figmaインポート/スクリーンショット複製
Figmaで作ったデザインや既存の画面キャプチャをもとに、同じUIを再現。環境変数管理やAPI連携もラクラク
プロジェクト内でAPIキーやシークレット情報を暗号化して安全に管理。外部APIの組み込みもスムーズ。v0 APIで自動化・外部連携も
上位プランではAPI経由でv0のコード生成機能を呼び出せるため、RAGやAIワークフローにも統合可能。生成コードはshadcn/uiベースでエクスポートOK
生成物は自分の手元のプロジェクトにも簡単に取り込み、継続開発できます。Vercelダッシュボードとのシームレス連携
デプロイ、環境変数、チーム共有など一元管理。教育・ドキュメント用途にも対応
コード生成だけでなく、JavaScriptやPythonの実行・図解にも対応。学習用途にもおすすめです。
料金体系とプラン
Freeプラン（無料）
月額：0円
クレジット：毎月$5分
できること
基本的なチャット生成（AIによるWebアプリ作成）
v0-1.5-mdモデルの利用
作成したアプリのVercelデプロイ
GitHubとの同期
想定利用シーン：お試し・個人のちょっとした開発
Premiumプラン
月額：$20
クレジット：毎月$20分
できること
Freeプランのすべて
Figmaデザインのインポート
より高精度なv0-1.5-lgモデルの利用
v0 API（外部からの自動化）利用
優先サポート
想定利用シーン：本格的な個人利用・副業開発
Teamプラン
月額：$30／ユーザー
クレジット：ユーザーごとに毎月$30分（＋チーム共有分）
できること
Premiumプランのすべて
チーム内でチャット・クレジットの共有
チームでの共同編集・コラボレーション
集中請求（まとめて請求管理）
想定利用シーン：複数人・チーム開発、プロジェクト単位での活用
Enterpriseプラン
月額：個別見積（大規模組織・企業向け）
クレジット：個別対応
できること
Teamプランのすべて
SAML SSO（企業向けシングルサインオン）
トレーニングデータへの学習オプトアウト（AIにデータを学習させない設定）
優先アクセスや高度なサポート、専用機能
想定利用シーン：エンタープライズ、セキュリティ重視の現場
トークン課金（従量制）
月額固定費なし。使った分だけ支払い
料金例：100万トークンごとに$0.50〜$75（モデルや用途により異なる）
できること
モデル・API利用時の従量課金
入力/出力トークンごとに細かく料金設定
想定利用シーン：APIや大量利用、スポット的な用途
*詳細な料金は公式サイト参照 → v0.dev/pricing
v0ならではの便利なポイント
作ったアプリは自動でVercelプロジェクト化
ダッシュボードでデプロイ・環境変数・統合も一元管理。複数人開発やCI/CDもスムーズです。請求やメンバー管理もVercel側で集約
クレジットや支払い管理、メンバー追加/削除もVercelのダッシュボード一つでOK。幅広いユースケースに対応
ランディングページ
フルスタックアプリ
ブログやCMS
チャットボット
データ可視化/分析ツール
カスタマーサポートダッシュボード などなど
今後も進化中！
2024年5月にVercelはシリーズE資金調達（2.5億ドル）を発表。v0を中心に今後もアップデートが続く予定です。教育・解説にも役立つ
コードやアルゴリズムの図解生成、実行例表示など、学習コンテンツの自動作成も。
使ってみた
我が家のローリングストックを管理するアプリを作らせてみました。
結果、すぐに以下のようなアプリが作成でき、しかもデプロイして動かすことができました。
動作イメージ
以下のようなプロンプトで作成を開始しました。
ローリングストックの在庫を管理するアプリ。
ストックの写真を撮って賞味期限とアイテムを判断して登録を行う。
賞味期限が近い在庫を上位に一覧表示する。
賞味期限が1カ月を過ぎた在庫がある場合はユーザーに通知する。enhanceというアイコンがあったのでクリックしてみたところ、プロンプトを英語化してくれました。
Develop a mobile application for managing a rolling stock of items. The application should allow users to photograph
items, automatically determine the item type, and record the expiration date. The system should prioritize the display
of items nearing their expiration dates, presenting them at the top of the inventory list. Additionally, the application
must include a notification system that alerts users when an item's expiration date has passed by one month.写真の画像解析機能を依頼したので fal というモデルを使用するための登録を行うことになりました。
HITL(Human-in-the-Loop)が組み込まれている点がAIエージェントって感じがします。
少し待つとアプリが完成しました。
早速動かしてみるとエラーになりました。
Fix with v0 というボタンが表示されたので押してみるとエラー内容が自動でチャットに入力され原因の調査が開始されました。
調査結果として fal のAPIキーが設定されていなかったようです。
チャット欄に表示された Add API Key ボタンをクリックすると、APIキー入力のダイアログが表示されました。
APIキーを入力することで動くようになりました。
その後、数量の入力追加やカテゴリでのフィルタリング、使用して在庫が0になったら一覧から削除する機能などをチャットで依頼して機能追加できました。
無料プランだと20回くらいのチャットで制限が来るようです。
右上の Publish ボタンからデプロイすることができました。
1分くらいでデプロイすることができ、動かすことができました。
使ってみた感想
外部サービスが必要な場合は適切にHITL(Human-in-the-Loop)が組み込まれていて、必要なサービスを自分で探す必要が無く、提案を受け入れて開発が進むのは良いと思いました。
最初の数回はエラーが発生しましたが、Fix with v0 で修正ができて、動くようになってからは機能追加に集中できたので使いやすかったです。
シンプルで使いやすい画面が作られたのはとても好印象でした。APIキーを登録する管理画面ではAPIキーの取得方法などのヘルプも自動で作ってくれました。
画像認識の部分は上手く動きませんでした。OpenAIの o4-mini-high で動かすように依頼をしてみたのですが、まだResponse APIを知らないようで指示通りに直してくれなかったです。このあたりは今後機能向上に期待です。
まとめ
v0は「自然言語で伝えるだけでWebアプリが作れる」という時代を切り拓くサービスです。
エンジニアだけでなく、デザイナーやPM、非エンジニアの方にも門戸が広がっています。
もし、「作ってみたいけど自信がない…」そんな気持ちがあるなら、まずはFreeプランで遊んでみてください。きっと「これなら自分にもできそう」と感じるはず。あなたの新しいアイディア、v0と一緒に形にしてみませんか？
知識は武器とかけまして、レゴブロックと解く、その心は？
知識のひとつひとつは小さなレゴブロック
でも、組み合わせれば世界を変えるアイディアをカタチにする武器になる！
またKnowledge Oasisでお会いしましょう
案内人はkoふみでした
