v0.dev

このツールでできること

「こんなUIを作って」とテキストや画像で指示するだけで、Reactコンポーネント（Shadcn/ui・Tailwind CSS）を自動生成してくれます。Bolt.newより小さい単位（コンポーネント・画面1枚）の生成が得意で、既存プロジェクトへの組み込みがしやすいのが特徴です。

主な機能

• テキストまたは画像からReactコンポーネント生成
• Shadcn/ui・Tailwind CSSベースの高品質な出力
• リアルタイムプレビューと編集
• コードのコピー・Next.jsプロジェクトへの直接統合
• 画像をアップして「このデザインに近いUIを作って」と指定可能

基本の使い方

① UIを言葉で説明する：「ログインフォーム。メールとパスワードのインプット、ログインボタン、ソーシャルログインボタン（Google・GitHub）」と具体的に指示する

② プレビューで確認：リアルタイムでUIが表示される。「ボタンの色を青に」「フォントを大きく」と追加指示でブラッシュアップする

③ コードをコピーして使う：「Code」タブでReactコードをコピーし、自分のプロジェクトに貼り付ける。Next.jsプロジェクトとの連携ボタンもある

こんな場面で使える

• フロントエンド開発の高速化：ダッシュボード・フォーム・カードなど繰り返し作るUIを即生成する
• デザインモックアップ：クライアントに見せるUIの初稿をデザインツールより速く作る
• 学習用サンプル：「このコンポーネントを作るReactコードの書き方」をv0で生成して学ぶ
• Figmaデザインの実装補助：スクリーンショットをアップして「これに近いUIを作って」と実装の出発点を作る

料金・プラン

| プラン | 内容 | 価格 |
|--------|------|------|
| 無料 | 月200クレジット | 無料 |
| Premium | 月5,000クレジット・プライベートモード | 月20ドル |

コンポーネント1〜2個の生成なら無料でも十分試せる。

使いこなすコツ

• Bolt.newとの使い分け：v0はコンポーネント単位の生成に特化、Bolt.newはアプリ全体を作るのに向いている。フロントのUIはv0→ロジック統合はBolt.newという分業が効率的
• Shadcn/uiを使った既存プロジェクトとの親和性が高い。プロジェクトにShadcnを導入していれば生成コードをほぼそのまま使える
• 「シンプルに」「ミニマルに」「モダンに」などデザイン方向性の一言を加えると、ビジョンに近いUIが出やすくなる