v0 by Vercelの使い方｜プロンプトからUIコードを自動生成する実践ガイド

「デザインはできないけれど、ブラウザで動く画面を自分で作りたい」「ちょっとしたLPやダッシュボードのモックをエンジニアに依頼する前に手元で試したい」—— そう感じたことはないでしょうか。生成AIの進化で、プロンプトを入力するだけでHTML/CSSどころかReactコンポーネントまで生成できる時代になりました。

その代表格が、Next.jsの開発元が提供する v0 by Vercel です。この記事では、非エンジニアの会社員や中小企業の担当者が v0 を使って、プロンプトから実際に動くUIコードを生成し、業務で使える画面を作るまでの流れを解説します。初期設定、プロンプトの書き方のコツ、生成結果の編集、そして現場で起こりがちな「うまくいかない時」の対処法まで、ひと通り押さえられる内容です。

v0 by Vercel とは？何が変わるのか

v0（ヴィーゼロ）は、Next.jsやVercelというWebサービスを提供しているVercel社がリリースした、生成AIによるUIコード自動生成ツールです。自然言語でやりたいUIを指示すると、React + Tailwind CSS + shadcn/ui を前提とした、そのままコピペで使えるコンポーネントコードを返してくれます。

従来、Webの画面を作るには「デザインをFigmaで描く → エンジニアがHTML/CSSに起こす → Reactコンポーネントに落とす」という何段階もの工程が必要でした。v0はこの工程を圧縮し、「頭の中のイメージを言葉にするだけで、ブラウザで動く画面が出てくる」という体験を提供します。

特徴を整理すると次のとおりです。

・プロンプト駆動: 「ダッシュボード画面、左サイドバーにメニュー、右上にユーザーアバター」といった日本語の指示だけでUIが生成される
・モダンな技術スタック前提: React・Tailwind CSS・shadcn/uiで出力されるため、現場のフロントエンドにそのまま組み込みやすい
・反復的な調整: 生成後も「ボタンを緑色に」「表に並び替え機能を追加」など追加指示で修正できる
・Vercelへのワンクリック公開: 生成した画面をそのままホスティングし、URLで共有できる

v0 を始めるための準備（ステップバイステップ）

1. アカウント作成とログイン

ブラウザで v0.dev にアクセスします。Vercelアカウント（GitHub・GitLab・Bitbucket・メールのいずれか）でサインアップすれば、すぐに利用を開始できます。無料プランでも一定回数のメッセージ送信が可能ですが、本格的に使う場合は有料プランへのアップグレードを検討しましょう（料金は執筆時点の2026年4月時点、Premium プランが月額20ドル前後）。

2. 画面の構成を理解する

ログイン後のホーム画面は、中央にプロンプト入力欄、左サイドに過去のチャット履歴、右上にアカウント設定という構成です。画面は大きく分けて次の3つの役割を持ちます。

・プロンプト欄: やりたいUIを自然言語で指示する
・プレビュー欄: 生成結果がリアルタイムに画面として表示される
・コードタブ: 生成されたReactコードを確認・コピーできる

3. 最初のプロンプトを投げる

v0 のプロンプトは、日本語でも問題なく通ります。最初は以下のような具体的な指示から試してみるとよいでしょう。

BtoB SaaSの管理画面ダッシュボードを作ってください。
・左サイドバーに「ダッシュボード」「顧客一覧」「請求」「設定」の4つのメニュー
・メインエリアは2×2のグリッドでKPIカード（売上、契約数、解約率、MRR）
・右上にユーザーアバターと通知アイコン
・全体はモダンでフラットなデザイン、紫系のアクセントカラー

送信すると、30秒ほどで実際に動くダッシュボード画面のプレビューと、Reactコンポーネントのコードが同時に出力されます。

実務で使える具体的なプロンプト術

1. 「画面の目的」から書く

いきなり部品の指示から始めるより、「誰が、何のために使う画面か」を冒頭に書いた方が、v0 は文脈を踏まえた自然なレイアウトを返します。

# 目的
中小企業の経理担当者が、月次の請求書送付状況を一覧で確認するための画面

# 必要な要素
・請求書ごとのステータス（送付済み/未送付/入金済み）が一目でわかる
・企業名・金額・送付日・期日の4列のテーブル
・ステータスはバッジ形式で色分け（緑=入金済み、黄=送付済み、赤=未送付）
・上部に「今月の合計金額」と「入金率」のサマリーカード

2. デザインの「雰囲気」を具体的な言葉で伝える

「おしゃれに」「かっこよく」といった抽象的な指示より、参考になりそうなサービス名や具体的なデザイン用語を使うほうが精度が上がります。

・NG: おしゃれなランディングページを作って
・OK: Notionのトップページのような、白基調でミニマルなランディングページ。見出しは大きめ、本文は読みやすい行間、アクセントカラーは紫

3. 反復的に追加指示で磨き上げる

v0 の真価は「一発で完璧なものを出す」ではなく「会話を重ねて近づけていく」点にあります。生成結果を見て、気になる部分だけを指示して修正していきましょう。

KPIカードの数字のフォントサイズを少し大きくしてください。
また、カード全体にほんのり影を付けて立体感を出してください。
サイドバーの背景色は、もう少し濃いグレーに変更してください。

このように「修正したい箇所」「修正内容」をペアで書くのがコツです。「全体的にかっこよく」のような指示はブレるため避けましょう。

生成したコードを業務で活かす方法（Before/After）

Before: デザイン外注に2週間＋コーディング外注に1週間

従来、社内向けの管理画面モックを作ろうとすると、デザイナーに依頼してFigmaで作画してもらい、さらにエンジニアにHTMLに起こしてもらう必要がありました。かかる費用は数十万円、納期は3〜4週間。それでも「ちょっと見た目を試したいだけ」の段階では過剰投資になりがちです。

After: v0 で30分以内にブラウザで動くモックを用意

v0 を使えば、会議の合間に「こういう画面で進めたい」という叩き台を30分以内に作れます。できあがったURLを関係者に共有すれば、ドキュメントでの説明よりはるかに早く合意形成できます。

実際の活用シーンの例を挙げると次のとおりです。

うまくいかない時の対処法

1. プロンプトが曖昧で出力がブレる

「モダンなサイト」「きれいなデザイン」といった形容詞だけだと、毎回違うテイストの出力になります。必ず「目的」「想定ユーザー」「必要な要素」の3点セットをプロンプトに含めてください。それでもブレる場合は、先に紹介したように参考にしたい既存サービス名を明記すると安定します。

2. 日本語のレイアウトが崩れる

v0 は英語圏で訓練されているため、長い日本語ラベル（例: 「お問い合わせフォームはこちら」）でレイアウトが崩れることがあります。この場合は「ラベルの改行禁止」「ボタン幅を自動調整」などを明示的に指定しましょう。

3. コードを自分のプロジェクトに組み込めない

v0 の出力は React + Tailwind CSS + shadcn/ui を前提としています。既存のWordPressサイトや普通のHTMLページに直接は貼れません。次のような使い分けが現実的です。

・モック・デモ用途: v0のプレビューURLをそのまま共有する（開発環境構築不要）
・本番導入: エンジニアに「v0で生成したコードをベースに実装してほしい」と依頼する
・HTMLに変換したい: 生成コードをChatGPT・Claudeに貼り、「このReactコンポーネントを純粋なHTML+CSSに変換して」と依頼する

4. AI任せにしすぎない

v0 の出力は、あくまで「それらしく見える画面」です。実際に業務で使うには、文言のチェック、アクセシビリティ、入力バリデーション、API接続といった部分を人間が担う必要があります。「AIが万能」と思い込まず、叩き台として割り切って使うのが正解です。

他のAIコーディングツールとの使い分け

v0 はUI生成に特化していますが、コーディング支援のAIツールは他にも多数あります。状況に応じて使い分けましょう。

より詳細な比較は姉妹サイト DXマスター.JP でも解説していますので、DX推進の文脈でAIを位置づけたい方は併せてご覧ください。

本記事のまとめ

v0 by Vercel は、非エンジニアでもプロンプトだけで実際に動くWebの画面を作れる画期的なツールです。本格的な本番開発にそのまま使うのは難しくても、モック作成・仕様共有・提案資料のビジュアル化といった用途では、デザイン外注の時間と費用を数十分の1に圧縮できます。

まずは v0.dev にアクセスして、「自分が欲しい画面」をひとつ言葉にしてみてください。プロンプトのコツは「目的・想定ユーザー・必要な要素」の3点を明示すること。生成結果は会話を重ねて磨き上げれば、驚くほどのスピードで実用的なUIへと近づきます。