v0（ブイゼロ）の使い方｜プロンプトだけでUIを生成するVercelのAI

v0はデザイナー向けのツールだと思われがちだが、現実は逆だ。むしろプログラミング未経験者やエンジニアが最も恩恵を受けている。Vercelが提供するこのAIツール、実はUI生成の入口として圧倒的に手軽。

v0の使い方を一言でまとめると、「作りたいUIを日本語で説明するだけで、Reactコンポーネントが出てくる」という話。コードを一行も書かずに、プロレベルのUI部品が手に入る。

僕の講座では2025年の夏からv0を導入している。受講者の反応は一様で「これが無料で使えるの？」という驚き。実際、基本機能は無料。有料プランもあるが、学習目的なら無料枠で十分足りる。

v0とは何か——プロンプトからUIを生成するVercelのAIツール

v0はVercel社が2023年に公開したAIツール。テキストで指示を出すだけでReactコンポーネントを自動生成してくれる。

たとえば「ダークモードのログインフォーム、メールアドレスとパスワード入力欄、ソーシャルログインボタン付き」と入力した。数秒後にはコードとプレビューが表示された。shadcn/uiとTailwind CSSをベースにした、そのまま実務で使えるクオリティの出力。

v0の使い方——アカウント作成から最初のUI生成まで

始め方はシンプル。5分あれば最初のUIが生成できる。

v0の使い方で差がつくプロンプトの書き方

v0の出力品質は、プロンプトの書き方で天と地ほど変わる。曖昧な指示では曖昧な結果しか返ってこない。具体的であればあるほど、意図に近いUIが出力される。

僕が半年間v0を使い込んだ結果、効果的なプロンプトには3つの要素があると分かった。レイアウト構造、色・フォントの指定、インタラクションの説明。この3つを含めるだけで、出力のヒット率が大幅に上がる。

プロンプトに「〜風」と付けるのも有効だ。「Notionのサイドバー風」「Stripeのプライシングページ風」といった具体的な参照があると、AIの理解精度が上がった。

v0で生成したコードをプロジェクトに組み込む方法

v0が出力するコードはReact + TypeScript + Tailwind CSS + shadcn/uiがベース。Next.jsプロジェクトにそのまま組み込める設計になっている。

ただし注意点が2つある。

僕の普段の使い方は、v0でUIの雛形を作り、Cursorで機能を実装する流れ。この組み合わせが現時点では最も効率的な開発パターンだと感じている。

v0の料金プラン——無料枠で十分か

v0には無料プランと有料プランがある。2026年2月時点の料金体系は以下の通り。

結論として、学習目的やプロトタイプ制作なら無料プランで十分。月200回の生成回数は、毎日6〜7回使える計算だ。業務で頻繁に使うなら有料プランに切り替える価値はある。

v0の使い方をさらに広げるTips

半年間使い込んで見つけた、公式ドキュメントにはあまり載っていないコツを3つ紹介する。

1つ目は、画像をアップロードして「これを再現して」と指示する方法。既存のWebサイトのスクリーンショットを渡すと、かなり高い精度でUIを再現してくれた。デザインの引き継ぎに使える実践的なテクニック。

2つ目は、生成結果に対して「もっとミニマルに」「余白を広げて」と追加指示を出すこと。v0は会話の文脈を保持するので、チャット形式で段階的にUIを洗練させていける。一発で完璧を目指すより、対話で詰めていく方が結果的に速い。

3つ目は、shadcn/uiの特定コンポーネントを名指しで指定する方法だ。「Dialogコンポーネントを使ったモーダル」「Commandコンポーネントを使った検索バー」のように指定すると、出力の安定性が上がる。

UIを作る敷居はここまで下がった。あとは試してみるだけ。v0.devにアクセスして、最初の1つを生成してみてほしい。