v0（ブイゼロ）の使い方｜v0.appで作って公開するまでの手順と事例15選

v0（ブイゼロ）は、作りたい画面やアプリを日本語で伝えるだけで、WebサイトやアプリのUIとコードを作ってくれるVercelのAIツールです。デザインやプログラミングの知識がなくても使えます。

2025年8月に「v0.dev」から「v0.app」へ名前と画面が変わったため、古い解説と見比べて迷う人も多いはずです。先に、今のv0の使い方を3行でまとめておきます。

この記事では、アカウント作成から公開までの手順、思いどおりに作るプロンプトの書き方、使うときの注意点、実際に作った活用事例15選を紹介します。

v0（ブイゼロ）とは？

v0は、プロンプトだけでWebサイトやアプリ、UIデザインなどが生成できるAIツールです。

生成したものは、チャットで細かく修正してブラッシュアップできるだけでなく、最新のReactやNext.jsに対応しているため、プロ顔負けの作品に仕上げられます。

さらに、参考画像や資料を読み込んで「このデザインをベースに作ってほしい」といった指示を出すと、高い精度の再現も可能です。

デザインやプログラミングの経験がなくても、v0なら短時間で高品質な作品を作り上げられます。

v0.dev から v0.app へ（2025年8月に変更）

v0を検索すると「v0.dev」と「v0.app」の2つのドメインが出てきますが、どちらも同じサービスです。

Vercelは2025年8月11日に、v0.dev から v0.app への変更を発表しました。UIパーツを作るツールから、アプリ全体を作るツールへと役割が広がったことに合わせた変更です。

同時にv0はエージェント型になり、Web検索で調べる・作業手順を計画する・エラーを自分で見つけて直す・外部ツールと連携するといった動きを自動で行うようになりました。そのため、1回のプロンプトで作り込める範囲が以前より広がっています。

この記事の操作画面は旧v0.dev時点のものですが、プロンプトを入力して生成し、修正を重ねて公開するという基本の流れは現在も変わりません。今の画面での流れは、使い方の手順のあとの「今のv0.appでの流れ」にまとめています。

v0の使い方

v0の使い方を3ステップで紹介します。

順番に見ていきましょう。

STEP

アカウント作成

v0の公式サイト（v0.app）にアクセスし、「Get Started」をクリックします。

上の「Sign In」をクリックし、以下のいずれかでログインします。

• メール
• GitHub
• GitLab
• Bitbucket

それぞれ選択したもので認証したら、アカウント作成は完了です。

STEP

プロンプト作成

v0の使い方は、赤枠に生成したいものをテキストで入力して「Send」をクリックするだけです。

それでは、お試しでタイマーアプリを作ってみましょう。

「使いやすい時間管理タイマーアプリを作成してください。色は青でお願いします。」のプロンプトを入力して、約25秒でできたアプリが以下です。

テキストのみで、しっかりと機能するアプリが完成しました。単にアプリを作っただけでなく、画面の左側には使い方やデザインの特徴も丁寧に記されています。

右側の画面、上部にある「Code」を押すとコードが見られ、「Preview」でプレビュー画面に切り替えられます。

さらに、ここからチャットで指示を出してポモドーロ機能をつけてブラッシュアップしました。

プロンプトを繰り返すことで簡単に修正ができます。

できるだけ具体的なプロンプトを作成したり、資料を読み込んだりすると質が高くて理想の作品に仕上がります。

STEP

作品の共有

生成したものを共有するときは、右上の「Publish」をクリックすると、共有リンクが発行できます。

今のv0.appでの流れ（公式クイックスタート準拠）

上の画面は旧v0.dev時点のものです。今のv0.appでは、生成したあとに「チャットで直す」「Designタブで直す」「コードを直す」の3つの直し方を選べます。公式のクイックスタートに沿って、現在の流れをまとめました。

Designタブはプレビュー上の要素を選んで直接直せるので、色や余白のように言葉で説明しにくい細かい調整に向いています。大きな構成の変更はチャット、細部はDesignタブと使い分けると効率的です。

思いどおりに作るプロンプトの書き方

v0の公式ドキュメントは、「詳しく書くほど結果が良くなる」としています。何を作るか・誰が使うか・どんな部品が要るか・どんな見た目かを、最初の1回にまとめて書くのがコツです。

表の要素をつなげると、次のようなプロンプトになります。

料理教室の予約ページを作ってください。
・使う人：スマホで予約する料理初心者
・入れる部品：メイン画像、教室の特徴3つ、料金表、日付を選べる予約フォーム
・見た目：白ベースにオレンジのアクセント、やわらかい雰囲気
・条件：未入力の項目があると送信できないようにする

ページが多いアプリや機能の多いツールを作るときは、いきなり全部を頼まず、まず「どんな順番で作るか計画して」とv0に相談し、1画面ずつ作っていくほうが崩れにくくなります。これも公式が勧めている進め方です。

頼み方のコツはv0に限らず、ほかの生成AIにも共通です。目的・使う人・条件を省かずに伝える考え方は、Claude Codeの開発者「Claudeには同僚のように話しかけて」が話題。プロンプトで伝えるべき3つのことでも紹介しています。

作ったものを公開する・コードを持ち出す

公開は右上の「Publish」からです。初回はVercelのプロジェクト名、公開範囲、ドメインを確認して「Publish」を押すと、本番用のURLが発行されます。修正したあとは「Publish Changes」を押せば、同じURLのまま中身が更新されます。

独自ドメインを使う場合は、初回公開時のDomainsの画面で選ぶか、あとからプロジェクトの「Settings → Domains」で追加します。

v0の外で開発を続けたいときは、GitHub連携でリポジトリとつなぐか、コードをエクスポートして手元で編集します。GitHubとつないだプロジェクトでは、v0がプルリクエストを作ってから反映する仕組みです。

使うときの注意点

• 入力内容は学習に使われることがある：公式のFAQでは、プロンプトや作った内容がモデル改善に使われる場合があるとしています（Enterpriseとオプトアウトした場合を除く）。顧客情報や社外秘の資料は入れないようにしましょう。
• 生成したコードの権利はVercelのものではない：公式FAQに明記されています。ただし中身が適切かどうかの判断は使う側の責任です。
• 公開前に自分で動作を確かめる：見た目がそれらしくても、フォームの送信先やログイン、データ保存がきちんと動くとは限りません。仕事で使うものは、公開前に一通り操作して確認してください。

出典: v0公式ドキュメント「FAQs」

v0の活用事例15選

ここではv0の具体的な活用事例を15個、紹介します。

気になるものがあれば、ぜひチェックしてみてください。

1.デジタル名刺

大学生がデジタル名刺を生成した事例です。

すぐに生成できるため、紙の場合とは異なり情報が変更された場合でも、瞬時に新しい名刺にバージョンアップできます。

2.結婚式のWeb招待状

柔軟なカスタマイズ機能を活かして、結婚式のWeb招待状を生成した事例です。

時間がなくて忙しくても、凝ったオリジナルの招待状が手軽に作成できます。

3.デジタル漫画アプリ

画面をタップして読める、本格的なデジタル漫画アプリを生成した事例です。

オリジナル作品が簡単にデジタルで公開できます。

4.英語学習アプリ

インタラクティブな言語学習アプリを生成した事例です。

フレーズを記憶するだけでなく、リスニング対策としても利用でき、教育現場での活用が期待できます。

5.管理画面

複数のツールを使うことなく、v0のみで管理画面を生成した事例です。

必要な機能やレイアウトを組み合わせてカスタマイズできるため、プロジェクトの管理やデータ分析などのツールとしても適しています。

6.株価チャート

FXや株式、仮想通貨などの市場分析ができるTradingViewを取り込み、最新情報を反映させた株価チャートを生成した事例です。

動的なデータも扱えるv0は、ビジネスの場でも大いに役立つでしょう。

7.音楽レコード

音楽データを読み込み、メヌエットを流すレコードを生成した事例です。

レコードだけでなく、自分好みのポッドキャストや音楽ストリーミングの一部としての応用も期待できます。

8.ランキング表の図解

SNSで利用できるランキング形式の図解を生成した事例です。

デザインに自信がなくても、情報を視覚的に分かりやすく伝えたいときに役立ちます。

v0で作った図解をCanvaに取り込み、記事・SNS・プレゼン資料用に仕上げる手順は、【図解作成ガイド】v0×Canvaで記事・SNS・プレゼン資料を無料で作る方法で画面つきで解説しています。

9.資料作成

メモを入れて、書籍の内容を資料に生成した事例です。

今回のようにメモでなくとも、過去の資料を読み込むと、デザインの質を担保した資料作りにも活用できます。

10.カレンダー付き画像

好きな画像をカレンダー付きの画像に生成した事例です。

デスクトップやスマホの壁紙として気軽に利用できます。

11.Web制作

5分程度で、ユニークなWebサイトを生成した事例です。

高品質なサイトが短時間で作成でき、コストを抑えながら魅力的なサイトを作りたいときに役立ちます。

12.LP制作

圧倒的なスピードでLPを生成した事例です。

キャンペーンやプロモーションを速く展開したいときや、デザインの壁打ちとしても利用できます。

13.空中ギャラリー

クリエイティブな展示、空中ギャラリーを生成した事例です。

v0はインタラクティブな表現が可能なため、デジタルアートの展示会や作品発表など、ユニークで魅力的な空間を作りたい方も楽しめます。

14.セミナーチラシ

実用化レベルのセミナーチラシを生成した事例です。

デザインの外注にコストをかけずに、v0で素早く効果的なチラシ作成ができます。

15.3Dロゴ

複雑な3Dロゴを手軽に生成した事例です。

ゼロから自分だけでデザインするよりもスピーディーに進められるため、色合いやレイアウトの異なるデザインのアイデアを効率よく複数のバリエーションで作成できます。

v0の料金プラン（2026年9月時点）

v0の料金プランは、使った分だけクレジットを消費する従量制です。2026年9月時点では以下の4プランが公開されています。

クレジットはトークン単位で消費され、使うモデルによって単価が変わります。v0には「Mini」「Pro」「Max」「Max Fast」の4つのモデルがあり、100万トークンあたり0.20⁠〜⁠50ドルの幅があります。

つまり、簡単な修正を何度も回すぶんには安く、重いモデルで一気に作らせると高くつくという料金構造です。まずは軽いモデルで試し、詰まったところだけ上位モデルに切り替えるのが無駄のない使い方になります。

使用頻度が増えてきたりビジネスやチームで利用したりする場合は、高度な機能が使える有料プランへのアップグレードを検討すると良いでしょう。

無料プランでもVercelへのデプロイ・Design Mode・GitHub同期は使えるので、「作って公開するところまで」をひと通り試してから有料プランを検討して問題ありません。

ただし無料プランは1日7メッセージまでです。修正を重ねるとすぐ上限に届くため、本格的に触るなら有料プランが前提になります。

v0の使い方に関するよくある質問

まとめ

v0の使い方は、①作りたいものをチャットで頼む（作る）→②チャットとDesignタブで直す（直す）→③Publishで公開するかGitHubにコードを持ち出す（公開する）の3段階です。無料プランでも公開まで試せるので、まずは小さなページを1つ作ってみるのがおすすめです。

プロンプトは、何を作るか・誰が使うか・必要な部品・見た目・条件を最初の1回にまとめて書くと、思いどおりの結果に近づきます。生成されたコードは手元で編集を続けられるため、試作から本番の開発まで使えます。

目的別：v0を使ったあとに読みたい記事

• 図解やSNS画像を作りたい：v0×Canvaで記事・SNS・プレゼン資料を無料で作る方法
• もっと作り込んだサイトを作りたい：Claude Opus 5で“リッチなサイト”を作る手順｜4ツール連携と「見せて伝える」指示のコツ
• AIへの頼み方を上達させたい：Claudeには同僚のように話しかけて。プロンプトで伝えるべき3つのこと