v0
プロンプトジェネレーター
v0.dev と Next.js 向け無料ジェネレーター。shadcn/ui、Tailwind、3状態、a11y を自動指定。
コピーして v0.dev に貼るだけ。ランディング、ダッシュボード、フォーム、認証、マーケブロックに対応。
何を構築したいか書いてください
v0.dev 向けに最適化された3つのバリエーション
Click Copy to use# Goal [UI の目的を記述してください] # Structure ランディングページを以下の順序で構築: 固定ナビ、ヒーロー(見出し + 補足文 + 主 CTA + ビジュアル)、ソーシャルプルーフのロゴ列、3カラム特徴グリッド、画像付き長文特徴ブロック、証言、価格または CTA セクション、フッター。すべてレスポンシブ、モバイルファースト。 # Style モダンミニマル(Linear, Vercel 風) # Stack Next.js + Tailwind + shadcn/ui(既定) # States 3つの状態を必ず含める: loading(スケルトン)、empty(有用なメッセージ + データ追加の主 CTA)、error(明確なメッセージ + 再試行ボタン)。各状態を視覚的に区別すること。 # Accessibility WCAG AA 準拠のコントラスト比、セマンティック HTML、キーボード操作可能。aria-label は必要箇所に限定し過剰に付与しない。
# Goal [UI の目的を記述してください] # Structure ランディングページを以下の順序で構築: 固定ナビ、ヒーロー(見出し + 補足文 + 主 CTA + ビジュアル)、ソーシャルプルーフのロゴ列、3カラム特徴グリッド、画像付き長文特徴ブロック、証言、価格または CTA セクション、フッター。すべてレスポンシブ、モバイルファースト。 # Style モダンミニマル(Linear, Vercel 風) # Stack Next.js + Tailwind + shadcn/ui(既定) # States 3つの状態を必ず含める: loading(スケルトン)、empty(有用なメッセージ + データ追加の主 CTA)、error(明確なメッセージ + 再試行ボタン)。各状態を視覚的に区別すること。 # Accessibility WCAG AA。セマンティック HTML。キーボード navigatable。インタラクティブ要素はフォーカスリング必須。画像 alt、フォーム label 全指定。ダークモード対応。 # Responsive breakpoints mobile (< 640px): 1カラム、タップ領域 44px 以上、フォント 16px 以上。tablet (640–1024px): 2カラム。desktop (> 1024px): 指定レイアウト。ブレークポイント間で内容の省略は不可。
# Goal [UI の目的を記述してください] # Structure ランディングページを以下の順序で構築: 固定ナビ、ヒーロー(見出し + 補足文 + 主 CTA + ビジュアル)、ソーシャルプルーフのロゴ列、3カラム特徴グリッド、画像付き長文特徴ブロック、証言、価格または CTA セクション、フッター。すべてレスポンシブ、モバイルファースト。 # Style モダンミニマル(Linear, Vercel 風) # Stack Next.js + Tailwind + shadcn/ui(既定) # States 3つの状態を必ず含める: loading(スケルトン)、empty(有用なメッセージ + データ追加の主 CTA)、error(明確なメッセージ + 再試行ボタン)。各状態を視覚的に区別すること。 # Accessibility WCAG AAA を目標。セマンティック HTML、ARIA 属性は最小限かつ正確。キーボード完全対応(Tab 順序、Escape、矢印キー)。フォームエラーは視覚 + スクリーンリーダーで両方通知。モーション削減(prefers-reduced-motion)に対応。 # Responsive breakpoints mobile (< 640px): 1カラム、タップ領域 44px 以上。tablet (640–1024px): 2カラム。desktop (> 1024px): 指定レイアウト。 # Performance 画像は next/image で最適化、LCP 要素は priority 属性付き。フォントは variable font を1種に限定。コードは Server Component を優先し、use client は必要箇所のみ。 # Delivery format 単一の TSX ファイル。props にデフォルト値を設定し、Storybook で単独動作可能なコンポーネントとして出力。TypeScript の型を厳密に記述。
内部の仕組み
なぜこの構造が v0 で良い UI を生むのか。
Goal、Structure、Style、Stack、States、Must include、Avoid、Accessibility の8セクション構造が v0 にとって解釈しやすい書式です。各セクションが独立した指示ブロックになり、曖昧さを消します。
loading、empty、error の3状態を必ず含める指示を入れると、v0 が1回目の生成からプロダクション対応 UI を返します。デモと本番の最大の差はここにあります。
バリエーション3では WCAG AAA、motion reduction、スクリーンリーダー対応まで明示します。後追いで a11y を修正するコストは大きく、最初から組み込むのが最短経路です。
関連する無料ツール
他の日本語ジェネレーター。
よくある質問
v0 ジェネレーターについての質問。
なぜ v0 のプロンプトは汎用プロンプトと違う形式なのですか?+
v0.dev は UI ジェネレーターであり、チャットボットではありません。次の3点に強く反応します。(1) 構造要件(どのセクションを、どの順で)、(2) スタック指定(shadcn/ui、Tailwind、Next.js App Router)、(3) 状態要件(loading、empty、error)。汎用の『ランディングページを作って』ではこの3つがすべて推測任せになります。構造化プロンプトは最初からこれを明示します。
Claude Artifacts、Bolt.new、Lovable でも使えますか?+
はい、微調整すれば動作します。プロンプト構造(Goal、Structure、Style、Stack、States、Must include、Avoid、Accessibility)はモデル非依存です。v0 は shadcn/ui 指定で最も良く動作、Bolt.new はフルスタック Next.js に強く、Lovable は Supabase バックエンドに最適化、Claude Artifacts は npm やファイルシステムを持たない点が異なります。Stack 欄を環境に合わせて変えてください。
なぜ empty と error の状態まで指定するのですか?+
デモウェアと本番 UI の最大の違いは、ユーザーが実際に遭遇する『データなし』『エラー』状態への対処です。v0 に『ハッピーパスのみ』を依頼すればデモが返ります。『loading、empty、error の3状態』を指定すれば出荷可能な UI が返ります。生成時間は約15%増えますが、後工程で通常2〜3回の手戻りが消えます。
ブランドカラーを指定すると何が変わりますか?+
v0 はブランドカラーを主 CTA、フォーカスリング、アクティブ状態に使い、壁面を染めることはしません。既存ページに溶け込ませたい場合は HEX 値を渡してください。プロトタイプ段階なら空欄で v0 のデフォルトに任せるほうが無難です。
初回生成ではなく v0 の再修正にも使えますか?+
はい。同じ構造が『v2』プロンプトでも機能します。Goal、Structure、Style、Stack を保持したまま『v1 からの変更点』セクションを追加し、変更差分のみを記述してください。v0 は会話コンテキストを維持するため、差分を指定するだけで済みます。
日本語で書いて大丈夫ですか?+
はい。v0 は多言語対応していますが、技術用語(hero、landing、dashboard、shadcn/ui、Tailwind など)は英語を混ぜるほうが安定します。本ツールが生成する3バリエーションは、日本語の記述 + 英語のセクション見出し/技術用語の混成を意図的に採用しています。
v0.dev の有料プランが必要ですか?+
いいえ。v0.dev には無料ティアがあり、月ごとのメッセージ上限内であれば本ジェネレーターが出力するプロンプトを自由に使えます。プロダクション規模で日次で複数の UI を生成する場合のみ、有料プランを検討してください。