「v0 by Vercel を契約してみたけど、毎回どんなプロンプトを書けばいいか思いつかない」
これは編集部に届くもっとも多い相談の1つです。本記事では、個人開発者が v0 で実際によく使う10種類の実装パターンを、プロンプト例・出力イメージ・実装難度バッジ付きで整理しました。AI 駆動で UI を量産したい人の作業テンプレ集として使ってください。
本記事は AI Maker Lab 編集部が 2026-04 〜 2026-05 にかけて v0 Free / Team プランで実際に試した結果 をもとに書いています。価格・機能は 2026-05-19 時点の v0.app 公式情報です。
難度バッジの見方
- 入門：プロンプト1〜2回で完成、Free プランで余裕
- 実践：3〜5回の反復で完成、Team プラン向き
- 応用：複数画面・状態管理・外部 API 込み、Cursor / Claude Code との併用推奨
パターン1：ヒーローセクション付きランディングページ 入門
最頻出パターン。サービス紹介・個人開発のリリース告知に。
ヒーローセクション付きランディングページ。
- 上部にタイトル「AI Maker Lab」と1行サブタイトル
- CTA ボタンを2つ並べる（プライマリ：今すぐ試す、セカンダリ：詳細を見る）
- 下部に特徴3カラム（速度・コスト・品質）
- カラースキームは cyan-to-indigo グラデーション
- ダークモード対応ポイント：「カラースキーム」「ダークモード対応」を毎回入れると、Tailwind の dark: プレフィックスが自動で入ります。
パターン2：機能比較テーブル 入門
料金プラン・ツール比較系の記事や SaaS LP で頻出。
3プラン比較テーブル。
- Free / Pro / Team の3列
- 8項目（月額・利用枠・サポート・SLA など）
- 「おすすめ」バッジを Pro 列に
- 各列の CTA ボタン
- レスポンシブ（モバイルではアコーディオン）レスポンシブ時の挙動を指定すると、モバイルレイアウトまで自動で組まれます。
パターン3：ダッシュボード（KPI カード + テーブル）実践
管理画面の定番。SaaS 立ち上げ・社内ツールに。
ダッシュボード画面。
- 左サイドバー（ホーム / 分析 / ユーザー / 設定）
- 中央上部に KPI カード 4つ（売上・新規ユーザー・離脱率・MRR）
- 中央下部に最近のアクティビティテーブル（10行 + ページネーション）
- 右上にユーザーメニュー（アバター + ドロップダウン）
- shadcn/ui の Card / Table コンポーネントを使うポイント：「shadcn/ui の Card / Table を使う」と明示すると、保守しやすい構造で出力されます。
パターン4：認証フォーム（ログイン + サインアップ）実践
タブ切り替え式の認証フォーム。
- ログインタブ：メール + パスワード + 「パスワードを忘れた」リンク
- サインアップタブ：メール + パスワード + 確認用パスワード + 利用規約同意チェック
- Google / GitHub OAuth ボタンを上部に
- バリデーションエラーの表示位置を入力欄直下に
- 送信中のローディング状態（スピナー）パターン5：プライシングページ 入門
3〜4プランの料金比較ページ。LP の必需品。
プライシングページ。
- 月額/年額の切り替えトグル（年額は20%オフ表示）
- 3カードの料金プラン（Free / Pro / Enterprise）
- 各カードに「最も人気」「カスタム」のバッジ
- 「お問い合わせ」モーダルを Enterprise から開く
- FAQ セクション5問パターン6：ブログ記事一覧（カード型）実践
メディア・コーポレートサイト・個人ブログに。
ブログ記事一覧ページ。
- 上部にタグフィルター（横スクロール可能）
- 検索バー（フォーカス時に展開）
- 3カラムグリッドの記事カード（アイキャッチ + タイトル + 日付 + 読了時間 + タグ）
- 無限スクロール用の Load More ボタン
- 各カードにホバーアニメーション（軽い浮き上がり）パターン7：ステッパー形式のオンボーディング 実践
新規ユーザーのオンボーディングや申し込みフォームに。
4ステップのステッパー型フォーム。
- ステップ1：基本情報（名前・会社）
- ステップ2：用途選択（ラジオボタン4種）
- ステップ3：プラン選択（カード3つから1つ選択）
- ステップ4：確認画面 → 送信
- 戻る / 次へボタン + 各ステップのバリデーション
- 上部にプログレスバー（完了率を表示）ポイント：「上部にプログレスバー」を入れると体感の完了率が分かりやすく、コンバージョン向上に効きます。
パターン8：チャット UI 応用
AI アプリ・サポートチャット・コミュニティに。
チャット UI 画面。
- 左：会話一覧（最新メッセージ + 未読バッジ）
- 右：選択中の会話（吹き出し型メッセージ + 添付ファイルアイコン）
- 下部：入力欄（マルチライン対応 + 送信ボタン + ファイル添付）
- メッセージのストリーミング表示風アニメーション
- 自分のメッセージは右寄せ、相手は左寄せ
- ダークモード対応リアルタイム性・WebSocket は v0 だけでは完結しません。UI まで v0 / 通信は Cursor で実装の役割分担が現実的です。
パターン9：ファイルアップロード（ドラッグ&ドロップ）実践
ファイルアップロード画面。
- ドラッグ&ドロップ可能なエリア（点線枠）
- ファイル選択ボタン（クリックでネイティブダイアログ）
- 複数ファイル対応（一覧表示 + 個別削除）
- アップロード進捗バー（ファイルごと）
- 最大ファイルサイズ・許可形式の注意書き
- エラー表示（拒否理由を明示）パターン10：設定画面（タブ + フォーム）実践
タブ切り替え式の設定画面。
- 上部に5タブ（プロフィール / アカウント / 通知 / 請求 / 危険ゾーン）
- 各タブにフォーム（保存ボタンは「変更があった時のみ」アクティブ化）
- 危険ゾーンタブにアカウント削除ボタン（確認モーダル付き）
- 各セクションに説明文（fine print 風の小さめテキスト）v0 で詰まりがちな落とし穴
- 状態管理の複雑化：複数画面を跨ぐグローバル state は v0 単体では辛い → Zustand / Jotai を Cursor 側で繋ぐ
- API 接続：v0 はフロント特化なので Server Action / API Route は手書き or Claude Code 推奨
- デザインシステムの一貫性：shadcn/ui ベースなので色・タイポを途中で変えると差分が大きくなる → 最初に
tailwind.config.tsを固める - Free プランの1日7メッセージ上限：本格運用は Team $30 が事実上のスタートライン（詳細は v0 単独レビュー）
FAQ
Q1. v0 のプロンプトは英語のほうがいいですか？
日本語でも問題なく動きます。ただし、UI ラベルを生成させる際に英語が混ざることがあるので、「ラベルは日本語で」と明示するのがコツです。
Q2. 生成されたコードはそのまま本番投入できますか？
プロトタイプ品質まではそのまま使えます。ただし、アクセシビリティ（ARIA 属性）・パフォーマンス（画像最適化）・SEO（メタタグ）は別途レビューが必要です。
Q3. 上記10パターンは Free プランで全部試せますか？
入門（緑）のパターンなら Free 1日枠でも試せます。実践（黄）／ 応用（赤）は反復が必要なので Team $30/月の契約が現実的です。料金詳細は v0 単独レビュー記事 を参照してください。
Q4. Cursor / Claude Code で同じことはできますか？
UI の見た目を即プレビューする体験は、Cursor / Claude Code の差分編集中心の使い方に対して v0 のキャンバス＋Publish ボタンの方が手数が少なくなる場面が多いです。編集部の運用では v0 で UI のスケルトンを作り、Cursor / Claude Code でロジック・API 接続・テストを繋ぐハイブリッド構成に落ち着いています。
Q5. 生成されたコードの著作権はどうなりますか？
v0 利用規約 では、有料プランで生成されたコードはユーザーに帰属する旨が記載されています（2026-05-19 時点）。商用利用も Team / Business プランなら可能です。最新の規約は必ず公式で確認してください。
まとめ
v0 は「UI の量産機」として、個人開発者の生産性を大きく押し上げます。上記10パターンを AI Maker Lab のリポジトリにストックして、案件のたびに再利用するのが、編集部の実運用フローです。
関連記事
- v0 by Vercel とは：料金・使い方・個人開発者の実践レビュー — v0 単独の深掘り
- v0 vs Lovable vs Bolt：Vibe Coding 3大ツール比較 — UI 生成ツール横並び比較
- Claude Code セットアップから1ヶ月運用まで — UI 後のロジック実装で使う相棒ツール
- Vibe Coding 完全ガイド 2026 — AI 時代の個人開発入門
情報の一次性について
本記事の10パターンは AI Maker Lab 編集部が 2026-04 〜 2026-05 に v0 Free / Team プランで実際に試した一次情報 に基づきます。料金・機能は 2026-05-19 時点の v0.app 公式情報です。著作権・利用規約は Vercel Terms を必ず最新版でご確認ください。
Amazon で関連書籍・ガジェットを探す
本記事のテーマ（v0・React・Next.js・Tailwind）に関連する書籍は Amazon でも購入できます。
※ AI Maker Lab は Amazon アソシエイト・プログラムの参加サイトとして、商品のリンク経由のご購入から紹介料を受け取ります。掲載内容そのものは公平な視点で執筆しています。