クリスv0の使い方って、プログラミングができなくても分かるもの？
うさみほはい、v0は作りたいものを文章で書くと画面とコードを作ってくれるので、最初の1本は会話だけで動かせます。
v0の使い方は、v0.appにログインして作りたいものを文章で書くところから始まります。
出てきた画面を見ながら会話を続けて直し、気に入ったらチャット上部のPublishから公開します。
指示文は英語である必要がなく、日本語で書けば返事も日本語です。
Figmaのリンクを貼る、スクリーンショットを上げる、という始め方も用意されています。
見た目の微調整はDesign mode、コードの確認はCodeタブという役割分担です。
v0の使い方は4段階｜指示・改良・接続・公開の順
先に全体像です。
v0の公式ドキュメントは、作業の流れを4つの段階に分けて説明しています。
| 段階 | この段階でやること | 使う場所 |
|---|---|---|
| ① 指示する | 作りたいものを文章で書く。画像やFigmaのリンクを添えてもよい | チャットの入力欄 |
| ② 直す | 会話を続けて機能を足す。見た目を整える。コードの行を指して直しを頼む | Design／Codeの各タブ |
| ③ つなぐ | データベース・AIモデル・外部API・GitHubを接続する | プロジェクト設定 |
| ④ 出す | Vercelへ公開し、ドメインを割り当て、チームに共有する | チャット上部のPublish |
この4段は、どれもv0.appの画面から進められます。
公開先のサーバーはVercelが受け持つので、自分で用意する作業は入りません。
以降の見出しでは、この4段をそれぞれ手順まで分解していきます。
全体の流れの原典は Quickstart（v0 公式ドキュメント） です。
v0の使い方の前に準備すること｜入口はv0.appの1ページだけ
準備は驚くほど少なく、必要なのはアカウントだけです。
v0はVercelが提供しているため、Vercelのアカウントがあればそのまま入れます。
Vercelを使っていない人も、v0.appの画面からそのままサインアップ可能です。
作業はブラウザでv0.appを開いて進めます。
iOS向けの専用アプリもあり、スマホからチャットを始めることも可能です。
- チャットの入力欄：やりたいことを書く場所。画像の添付とマイク入力のボタンも並ぶ
- プレビューのツールバー：CodeとDesignのタブが並び、コードを見る・見た目を整えるを切り替える
- Publish：チャット上部にある公開のボタン。初回だけ設定の確認が入る
- Project menu（…）：プロジェクトの三点メニュー。Settingsから連携・環境変数・ドメインを管理する
- コマンドパレット：Cmd+K（WindowsはCtrl+K）で、すべてのチャットとプロジェクトを横断検索する
この5か所を覚えれば、あとは会話をするだけで作業が進みます。
v0の使い方の基本｜最初のアプリが動くまでの4ステップ
いちばん基本の流れを、手順の形で並べます。
ブラウザで v0.app を開き、Vercelのアカウントでログインします。
アカウントが無い場合は、その画面からサインアップすれば大丈夫です。
画面からNew Chatを選ぶか、プロジェクトを作ってその中でチャットを開きます。
プロジェクトを先に作っておくと、公開先・ドメイン・環境変数を複数のチャットで共有できる点が便利です。
入力欄に、作りたいものを普段の言葉で書きます。
「追加・編集・削除ができるやることリストのアプリ」のような一行から始めて構いません。
英語で書く必要はなく、日本語で書けば日本語で返事が返ってきます。
生成が終わると、プレビューに動く画面が表示される流れです。
足りないところを「商品一覧に検索バーを足して」のように書くと、その場で作り直されます。
ここまでで、すでに動くWebアプリが1本できあがっています。
公式ドキュメントが最初の例として挙げている指示文は、次の4つです。
- 追加・編集・削除ができるやることリストのアプリ
- ヒーローセクションと料金を載せたSaaSのランディングページ
- グラフでユーザーの利用状況を見せるダッシュボード
- メールを送信する問い合わせフォーム
どれも一行で書ける短さで、作り込んだ指示文である必要はありません。
まず一行で出させて、そこから会話で育てるのがv0の想定している使い方です。
入力は音声でも構いません。
入力欄のマイクのアイコンを押して話し、チェックマークを押すと文字に変換される仕組みです（ログインが必要）。
変換された文章は送信する前に手で直せます。
v0のプロンプトの使い方｜具体的に書いて小さく分けるコツ
同じv0でも、指示文の書き方で結果が大きく変わります。
公式のプロンプトガイドが挙げるコツを、4つに整理したのが次の表です。
| コツ | 中身 | 悪い例と良い例 |
|---|---|---|
| 具体的に書く | 機能・見た目の好み・技術の条件まで書き込む | 「サイトを作って」ではなく「ヒーロー・実績一覧・問い合わせフォームを持つフリーランス向けのポートフォリオを、スマホ対応で」 |
| 大きな仕事を割る | 1回で全部を頼まず、機能ごとに分けて積み上げる | 「認証もカートも決済も管理画面も全部」ではなく「まず商品一覧をグリッドで」から始める |
| 技術を指定する | 使ってほしい言語・フレームワーク・保存先を明示する | 「Next.js 14のApp Router・Socket.io・MongoDB・NextAuth.jsで」のように並べる |
| エラー処理まで頼む | 通信失敗・入力不備・データが空のときの挙動を指定する | 「読み込み中の表示と、分かりやすいエラー文言を入れて」と足す |
とくに効くのが2つ目の「大きな仕事を割る」です。
複雑なものほど一度に頼まず、機能を1つずつ足していく進め方を公式は勧めています。
タスク管理アプリなら、追加と削除だけを作り、次に保存、次に完了チェックと絞り込み、という順です。
何から手を付けるか決められないときは、計画そのものをv0に頼めます。
「このアプリの開発を小さな手順に分けて」と書けば、v0が工程を並べて返してくれる仕組みです。
複数の要件がある大きなアプリなら、先にPRD（要件定義書）を書かせる進め方も用意されています。
生成を待つ間に次の指示を積んでおくことも可能です。
- 生成中でも、次の指示を最大10件まで積んでおける
- 積んだ指示は、上から順番に自動で実行される
- 実行される前なら、並べ替え・編集・削除ができる
書き方の全文は Text Prompting（v0 公式ドキュメント） にまとまっています。
v0の指示文ひな型の使い方｜よくある機能を頼むときの形
公式は、よく使う場面ごとの指示文のひな型と、部品から作る・段階的に育てるという進め方を示しています。
- データの一覧と登録：一覧表示・追加編集フォーム・削除の確認・検索とページ送りを持つ管理画面を作って
- ログイン機能：ログインと登録のフォーム・パスワード再設定・セッション管理・保護されたページを作って
- ダッシュボード：指標の現在値・傾向の表示・比較データ・操作できるグラフを持つウィジェットを作って
- 部品から作る：ナビゲーションとロゴを持つヘッダーを作って（そのあと「その下にヒーローを足して」と続ける）
- 段階的に育てる：まず追加と削除だけのやることリストを作って（そこから機能を1つずつ足す）
ひな型をそのまま貼って、自分の条件だけ差し替えるのがいちばん速い使い方です。
v0はNext.js・Svelte・Turborepo・AI SDK・Vercelの仕様に詳しく、質問にも答えてくれます。
「Next.js 14でサーバーサイドレンダリングをどう書くか」といった相談にも使えるのが強みです。
作るだけでなく調べる相手としても使える、という点は覚えておきたいところです。
v0にFigmaのデザインを読ませる使い方｜リンクを貼るだけ
デザインが先にある場合は、Figmaから直接取り込めます。
プラグインもFigmaのデスクトップアプリも不要で、リンクを貼るだけで読み込みます。
入力欄の＋ボタンからImport from…を開き、Import from Figmaを選びます。
Figmaのアカウントでサインインすれば接続は完了です。
この連携はv0の有料プラン向けの機能です。
複数の画面をまとめて作らせたいときは、ファイルのリンクを貼ります。
1つの画面や部品を正確に再現させたいときは、フレームのリンクを使うのが基本です。
フレームのリンクはFigmaで対象を選び、右クリックからCopy link to selectionで取れます。
リンクと一緒に「予約フローの画面を作って」のように対象を指定します。
大きなファイルのときは、ページ名やセクション名まで書いておくと、v0が探す手間が減って確実です。
v0は読み取ったFigmaのフレームをチャットに表示しながら組み立てます。
違う画面を見ている場合は、その場で別のページやフレームを指定し直せます。
v0がFigmaから読み取るのは、見た目の画像だけではありません。
| 読み取る対象 | コードへの反映のされ方 |
|---|---|
| ページとフレーム | ファイル内を検索して、依頼に必要な画面を選び出す |
| デザイントークンと色 | ファイルに設定された変数とスタイルをそのまま使う |
| レイアウトと文字 | オートレイアウト・余白・サイズ・実際の文言を読み取る |
| アセット | アイコン・ロゴ・画像を書き出してアプリの中で使う |
| コンポーネントとスタイル | 名前を読み取り、画面をまたいで表記を揃える |
| Dev Modeのリンク | 開発者向けに貼られたコードや仕様書へのリンクも参照する |
読み取れる量にはFigma側の制限があり、上限を決めているのはFigmaです。
上限に達した場合、v0はその旨を伝えたうえで手元のデータで作業を続けます。
良い結果を出すコツは、ページとフレームと部品に分かりやすい名前を付けておくことです。
画面や状態ごとにフレームを分け、オートレイアウトとデザイントークンを使っておくと精度が上がります。
手順の原典は Figma（v0 公式ドキュメント） です。
v0のDesign modeの使い方｜画面を見ながら直接つまんで直す手順
文章で伝えづらい細かい調整には、Design modeを使います。
プレビューの上にあるツールバーからDesignタブを選びます。
動いているアプリの横に、レイヤーと編集パネルが並んで表示される画面です。
カーソルが選択ツールに変わり、重ねた要素が枠で示されます。
クリックすると、その要素の編集パネルが開きます。
選択と操作の切り替えはCmd+I、選択の解除はEscapeです。
文字・色・背景・余白・枠線・角丸・影は、パネルのつまみで直接動かします。
「この文の隣にボタンを足して」のような構造の変更は、パネルの入力欄に文章で書く形です。
文章で指示すると、選択中の要素のスクリーンショットが自動で添えられます。
調整が済んだらApplyを押します。
編集内容はチャットへ送られ、ソースコードを書き換えた新しいバージョンが作られます。
Applyを押すまでは「保留中の編集」の扱いで、いつでも元に戻せます。
パネルには取り消し・やり直し・リセットのほか、変更前と変更後を見比べる切り替えも用意済みです。
反映していない編集を残したままページを離れようとすると、v0が警告を出します。
Tailwind CSSを使っているアプリでは、Tailwindに合う値が優先して提示されるのも特徴です。
なおDesign modeには使える条件があります。
最新のプレビュー環境を使っているチャットの、最新バージョンだけが対象です。
読み取り専用のチャットとスマホ幅の画面では使えません。
詳細は Design mode（v0 公式ドキュメント） に書いてあります。
v0のCodeタブとバージョンの使い方｜コードの見方と戻し方
生成されたコードを見たいときは、Codeタブに切り替えます。
いまのCodeタブは読むための画面で、ここで直接書き換えることはできません。
コードを変えたいときは、チャットで頼むか、該当する行にコメントを付けて頼みます。
| やりたいこと | Codeタブでのやり方 |
|---|---|
| ファイルを見る | ファイルの一覧（ツリー）から開く |
| コードを探す | 検索のアイコンから、ファイル名と中身の両方を検索する |
| 行を指して直しを頼む | 行番号を選んで「+」を押し、コメントを書く。コメントは次の指示文に添えて送られる |
| 変更点を見る | メッセージのDiffタブで、v0が書き換えた差分を確かめる |
書き換えに失敗しても、バージョン機能で前の状態に戻せるので心配いりません。
バージョンの決まりは、次の4つを押さえておけば足ります。
- メッセージからコードが更新されるたびに、新しいバージョンができる
- メッセージを通さない操作（コードやファイルを直接編集するなど）では、バージョンは増えない
- 古いバージョンを復元すると、その内容を持つ新しい最新バージョンが作られる
- 公開されるのは、常に最新バージョンのコード
前のバージョンを公開したいときは、先に復元してから公開する順番になります。
原典は Code editing（v0 公式ドキュメント） と Versions（v0 公式ドキュメント） です。
v0に外部サービスをつなぐ使い方｜設定画面と会話の2つの入口
データを保存したり、決済を受けたりするには外部サービスの接続が必要です。
接続の入口は2つあり、設定画面から入れる方法と、会話で頼む方法があります。
- Neon：サーバーレスのPostgreSQL。データの保存先として使う
- Supabase：認証とリアルタイム更新まで含むPostgreSQL
- Upstash for Redis：サーバーレスのRedis。一時データやキャッシュに使う
- Blob：画像やファイルの保管場所
- Stripe：決済と定期課金の受け付け
- fal・Deep Infra・Grok：画像生成やオープンソースのAIモデル
設定から入れる場合は、Project menuの三点からSettings、そしてIntegrationsを開きます。
会話で頼む場合は「データベースをつないで」と書くだけで、v0が必要な設定を進めます。
AIの機能を組み込むときは、Vercel AI Gatewayが最初から設定済みです。
追加の設定なしで、多くのAIモデルを1つの窓口から呼び出せます。
一覧に無いサービスも、やりたいことを書けば組み込めます。
「SMSの通知のためにTwilioにつないで」と書けば、必要な呼び出しとエラー処理まで生成されるのが公式の例です。
生成のあと、案内に従ってAPIキーを入力する流れになります。
キーを手で追加したり直したりするときの入口は、SettingsのEnvironment Variablesです。
ここに入れた値は暗号化され、指示文の中に書かずに済みます。
v0の使い方の仕上げ｜作ったアプリを公開する手順と初回の設定
できあがったら、そのままVercelへ公開できます。
チャットのヘッダーにあるPublishを選びます。
初回はプロジェクトの作成から順に案内が出る流れです。
まだプロジェクトに紐づいていない場合は、ここで名前を決めます。
誰がアクセスできるかを選びます。
選べる範囲は、チームのプランとデプロイ保護の設定しだいです。
ドメインは用意されるvercel.appのものを使うか、接続済みの独自ドメインを選びます。
Publishを押すと本番のデプロイが始まります。
StripeやShopifyの検証用ストアが未登録のときは、確認の画面が挟まる仕組みです。
コードを直したあとは、Publishを開いてPublish Changesを押します。
本番のURLは変わらず、同じアドレスの中身だけが新しくなります。
Vercelのプロジェクトには固定の本番URLがあり、更新してもURLは変わりません。
独自ドメインは、初回の公開画面かSettingsのDomainsから割り当てる形です。
用意されるvercel.appのアドレスを自分で決め直すこともできます。
作業中のブランチにはプレビュー用のデプロイが別に作られます。
本番のURLを変えずに、変更後の画面を先に確認できる仕組みです。
環境変数・ロールバック・アクセス制限などの細かい設定はVercel側の管理画面で扱います。
公開まわりの全文は Deployments（v0 公式ドキュメント） にまとまっています。
v0とGitHubをつないだときの使い方｜ブランチとプルリクエストの進み方
チームで運用するなら、GitHubとの接続がほぼ必須になります。
接続は、Project menuの三点からSettings、GitHub、Connectの順です。
所有するアカウントか組織を選び、リポジトリ名を入れてCreate Repositoryを押します。
v0は非公開のリポジトリを作り、いまのコードをそこへ送る仕組みです。
接続後は、コードの置き場所がGitHubのリポジトリ側に移ります。
リポジトリを消すとコードを取り戻せなくなる点は、先に理解しておくべきです。
| ブランチの種類 | v0での役割 |
|---|---|
| デフォルトブランチ | リポジトリの既定のブランチ。取り込み時に最初に選ばれる |
| ベースブランチ | チャットが出発点にするブランチ。プルリクエストの宛先にもなる |
| 作業ブランチ | v0がチャットごとに作るブランチ。生成したコードはここへ送られる |
| 本番ブランチ | Vercel側で本番デプロイに使うと設定されているブランチ |
v0はベースブランチへ直接は書かず、必ず作業ブランチを切ってから送ります。
Publishを押すと、作業ブランチからプルリクエストが作られてベースへ統合されます。
GitHub側のブランチ保護の設定も、そのまま適用の対象です。
ブランチのメニューからは、プレビューの状態・差分・プルリクエスト・CIの結果をまとめて確認できます。
ビルドやCIが失敗したとき、コンフリクトが出たときの修正も、v0に頼める作りです。
接続と運用の詳細は GitHub（v0 公式ドキュメント） にあります。
v0の使い方でつまずいたときの対処｜症状ごとの直し方
よく起きる詰まりどころと、その対処を並べます。
| 症状 | 対処 |
|---|---|
| ビルドやデプロイが失敗する | エラーの表示に出るFix with v0またはFix Buildを押す。有料プランでは、手を加えていないコードなら1日10回まで無料で、その先はクレジットを使う |
| 直したら前より悪くなった | バージョンの履歴から前の生成を復元し、そこから作り直す |
| Publishのボタンが押せない | チームのデプロイ方針とVercel側の権限を確認する。チャットを編集できる役割が必要 |
| 使いたいドメインが選べない | SettingsのDomainsで、そのドメインが接続先のVercelプロジェクトに属しているか確認する |
| Figmaの読み取りが途中で止まる | Figma側の読み取り上限に達している。上限が戻るのを待つか、上位のプランや席を使う |
| Figmaで違う画面が作られた | ページ名やフレーム名を指示文に書くか、そのフレームのリンクを貼り直す |
| 指示どおりに直らない | 頼む範囲を1機能に絞って書き直す。技術の条件と画面の条件を分けて書く |
v0を使うときのコツは、失敗の直しもv0に頼むことです。
エラーのログはv0に渡せる形で表示されるので、そのまま修正を頼むほうが速く終わります。
似たノーコード寄りのAI開発ツールの操作感は、別の記事でも整理済みです。
Lovableの操作の流れは、Lovableの使い方で手順ごとに整理しています。↓
ブラウザの中で作って公開まで進める流れは、Bolt.newの使い方にまとめています。↓
比べて読むと、どれが自分の作りたいものに合うか判断しやすいはずです。
v0の使い方についてよくある質問
v0の指示文は日本語で書いても大丈夫ですか？
好きな言語で書けば、v0は同じ言語で返事をしてコードに変えるため、日本語のままで問題ありません。
v0を使うのに開発環境の用意は必要ですか？
ブラウザでv0.appを開けば生成からプレビューまでその場で動くため、手元に開発環境を用意する必要はありません。
v0で作ったコードを手元に持ってこられますか？
GitHubとの双方向の連携があるため、リポジトリ経由で手元の開発環境と同期できます。
v0のDesign modeが使えないのはなぜですか？
最新のプレビュー環境を使うチャットの最新バージョンだけが対象で、読み取り専用のチャットとスマホ幅の画面では使えません。
v0のFigma連携は無料プランでも使えますか？
Figmaの連携はv0の有料プランで利用できる機能です。
v0で一度に複数の指示を出せますか？
生成中でも指示を最大10件まで積んでおけ、順番に自動で実行されます。
v0の使い方のまとめ
この記事で確認した手順を、やることの順に並べ直します。
| やること | 手順の要点 |
|---|---|
| 始める | v0.appにVercelのアカウントでログインし、新しいチャットを開く |
| 作る | 作りたいものを一行で書く。英語である必要はない |
| 育てる | 会話で機能を1つずつ足す。大きな要望は分けて頼む |
| デザインから作る | Figmaのファイルかフレームのリンクを貼り、作る範囲を言葉で指定する |
| 見た目を整える | Designタブで要素を選び、パネルか文章で直してApplyを押す |
| コードを直す | Codeタブで行にコメントを付けて頼む。失敗したらバージョンを復元する |
| つなぐ | SettingsのIntegrationsか、会話でデータベースと外部APIを接続する |
| 出す | Publishを押す。2回目以降はPublish Changesで同じURLを更新する |
v0の使い方でいちばん大事なのは、一行で出させて会話で育てるという順番です。
最初から完璧な指示文を書こうとすると、かえって手が止まります。
無料プランでも1日7メッセージまで使えるので、その枠で小さな画面を1つ作るのが確かめ方として早道です。
公開まで一度通せば、この記事で並べた手順は体で覚えられます。
＼一行の指示から始められる／
日本語の指示文でそのまま作れる
無料プランは1日7メッセージまで
- Quickstart（v0 公式ドキュメント）
- Text Prompting（v0 公式ドキュメント）
- Figma（v0 公式ドキュメント）
- Design mode（v0 公式ドキュメント）
- Code editing（v0 公式ドキュメント）
- Versions（v0 公式ドキュメント）
- External APIs（v0 公式ドキュメント）
- Deployments（v0 公式ドキュメント）
- GitHub（v0 公式ドキュメント）
- FAQs（v0 公式ドキュメント）
- Plans and Pricing（v0 公式サイト）
エージェントに任せて作るやり方も比べたいなら、Replitの使い方も合わせてどうぞ。↓
コメント