v0(Vercel)の使い方:スクリーンショット付き入門チュートリアル
実際の初心者ビルドから再構築した v0.dev 完全ウォークスルー — Enhanced Prompt、要素セレクター、バージョン、ワンクリック Vercel デプロイ、GitHub 同期、ログイン付き Supabase データベースまで。全ステップにスクリーンショット付き。
v0 の要点
- v0.dev は Vercel の AI アプリビルダー。平易な言葉で説明するか(スクリーンショットや Figma ファイルの添付も可)、動く Next.js アプリを生成し、プレビューとコードを並べて見せます。
- アイデアが薄いときは Enhanced Prompt、1 コンポーネントの修正には要素セレクター、気に入らない反復はバージョン一覧からロールバック。
- デプロイは Vercel へのワンクリック。GitHub 同期はプロンプト変更のたびにリポジトリへプッシュ — コードが v0 の中に閉じ込められることはありません。
- 実データには Supabase 統合:v0 の設定から DB を作成、SQL スクリプトは JWT の行を削除してから実行。アプリにメールログインとユーザー別データが付きます。
How to use v0.dev by Vercel For Beginners
ソース動画:Code with Nathan12:28
スクリーンショットはソース動画からの引用で、タイムスタンプ付きクレジットを併記しています。本文は完全な文字起こしに基づく独自の解説で、事実は動画と一致しています。
本チュートリアルは文章で学びたい方向けの独立した図解版です。クリエイターを支援したい方は上記の Code with Nathan チャンネルの動画をご覧ください。
v0 でアプリを作る手順
- 1
v0.dev から始める
v0.dev で無料アカウントを作成。サイドバーにチャットとプロジェクト、中央の大きなプロンプトボックスが起点です。周囲にスクリーンショットのクローン・Figma インポート・ランディングページのクイックアクションが並び、添付ボタンは画像と Figma ファイルをデザイン入力として受け付けます。
クイックアクションとモデルチップ付きの v0.dev コンポーザー。2:00 に視聴 - 2
Enhanced Prompt でアイデアを拡張
「ノートアプリ」とだけ書くと v0 には情報が足りません。Enhanced Prompt ボタンがコア機能・ユーザー認証・レスポンシブデザインを加えた形に書き直します。詳細なプロンプトが既にあるなら使わないこと — 想像と違う方向へ舵を切ることも。日常の UI には medium モデルが費用対効果のdefaultです。
Enhanced Prompt が 1 行を本物の仕様に。2:15 に視聴 - 3
コミュニティプロジェクトを見る
コンポーザーの下にはコミュニティギャラリー:ポートフォリオ、ランディングページ、遊び心ある実験。Open in v0 で自分のアカウントにコピーし、コードを精査したり改変したりできます。近いものが既にあるならゼロから始めるより速い。
コミュニティギャラリー:Open in v0 でコピー。3:00 に視聴 - 4
アプリを生成する
デモのプロンプト:「フォルダ・タグ・検索・シンタックスハイライト付きの markdown ノートアプリ」。Enter を押すと v0 は計画を立て、Code ビューにファイルがリアルタイムで流れ込みます。1 分ほどで完成したアプリがプレビューに現れます。
生成中に app/page.tsx がストリーミングされる様子。4:00 に視聴 - 5
プレビューでテストする
変更を加える前に実ユーザーとして使ってみます:ノートのタイトルと本文を編集、フォルダに作成、削除、検索。今の段階で挙動の穴を見つければ、後から曖昧なプロンプト 5 回の代わりに正確な 1 回で済みます。
プレビューでノートのタイトルを編集。4:30 に視聴 - 6
要素セレクターで 1 要素だけ修正
削除ボタンがツールバーに埋もれる — セレクターアイコンをクリックし、要素を選び、そこだけについてプロンプト:「この削除ボタンの背景を赤に」。v0 はページ全体を再生成せず、そのコンポーネントに変更を限定します。
要素セレクターがプロンプトを 1 コンポーネントに限定。9:00 に視聴 - 7
バージョンでロールバック
生成ごとにバージョンが保持されます。バージョンドロップダウンで比較し、Restore で古い状態へ復元。思い切ったプロンプティングを安価にするセーフティネットです。
Version 2 の復元カード — 古い状態にワンクリック。5:25 に視聴 - 8
Vercel にデプロイ
Deploy ボタンがアプリをそのまま Vercel へ:ビルドログが流れ、カスタムドメインが割り当てられ、1 分後には公開 URL が手に入ります。以後の変更は同じメニューからワンクリックで再デプロイ。
プレビューからライブ URL までワンクリック。6:00 に視聴 - 9
GitHub に同期
GitHub アイコンをクリックし、v0 を承認、リポジトリ名を決めて作成。以後すべてのプロンプト変更がリポジトリのブランチへプッシュされます。zip ダウンロードや npx での取り込みも可能。プロジェクトが v0 内に閉じ込められることはありません。
v0 がプッシュする GitHub リポジトリの作成。7:00 に視聴 - 10
Supabase を接続
ブラウザ内のデータはブラウザとともに消えます。Settings → Integrations → Supabase を開き、規約に同意、リージョンと無料プランを選んで DB を作成。v0 が自動で Vercel プロジェクトにリンクします。
v0 内の Supabase Create Database ダイアログ。8:30 に視聴 - 11
メールログインを追加
プロンプト:「メールとパスワードの認証システムを作り、全データを Supabase に保存して」。v0 はサインイン/サインアップページと、テーブル・セキュリティポリシーを作る SQL スクリプトを生成します。現状データは localStorage にあり、このステップで実データベースへ移行します。
v0 が認証システムを計画し SQL スクリプトを準備。9:10 に視聴 - 12
SQL スクリプトを実行 — まず JWT の行を削除
動画が指摘する落とし穴:app.jwt_secret を設定する行がスクリプトにあれば、実行前に削除します。シークレットは Supabase 作成時に既に設定済みで、この行があるとエラーになります。その後 Apply でスクリプトを実行し、folders・notes テーブルとポリシーを作成。
JWT の行を除いたテーブル作成スクリプトが実行待ち。9:30 に視聴 - 13
データの永続化を確認
プレビューでサインアップし、フォルダにノートを作成、別のブラウザで開き直しても全部残っています。データはユーザーごとに Supabase のテーブルへ。プロンプトで作ったフロントエンド+統合で追加したデータベース+Vercel デプロイの、本物のフルスタック製品です。
サインイン後、ノートが Supabase に永続化。10:10 に視聴