正直に言うと、去年の夏まで私はFigmaの使い方すら知らなかった。副業でWebサービスを作りたいのに、ヒーローセクション一つ作るのに丸1日かかって、結局「もうデザイナーに頼もうか」と諦めかけていた。
そんなとき偶然見つけたのがv0 by Vercelだった。半信半疑で「ログインフォームを作って」と入力したら、30秒後にはちゃんと動くReactコードが出てきた。あの瞬間の衝撃は今でも忘れられない。
この記事では、デザインスキルゼロだった私が実際にv0を使い倒してきた体験をもとに、副業・個人開発で本当に使える活用法を紹介する。
v0（ブイゼロ）は、Next.jsで有名なVercel社が2023年にリリースしたAI UIジェネレーターだ。日本語や英語でUIの要件を入力するだけで、shadcn/uiとTailwind CSSベースのReactコンポーネントを自動生成してくれる。
使ってみて「これは本物だ」と感じた理由が3つある。
最初に使った日（2023年11月）、1時間でランディングページのプロトタイプを3パターン作った。それまでは1パターン作るのに半日かかっていたのに。
気になるのは料金だよね。私も最初「どうせすぐ有料になるんでしょ」と思っていた。でも実際に使ってみると、無料プランでも思ったより使える。
| プラン | 月額 | クレジット数 | こんな人向け |
|---|---|---|---|
| Free | $0 | 月200クレジット | まず試したい人・副業初期段階 |
| Pro | $20/月 | 月1,000クレジット | 案件を複数抱えているフリーランス |
| Team | $30/月〜 | 月5,000クレジット〜 | チーム開発・スタートアップ |
私は最初の2ヶ月は無料プランで乗り切った。月200クレジットは、1回の生成で1〜3クレジット消費するので、うまく使えば60〜100回は生成できる計算だ。副業の初期検証には十分すぎるくらいある。
おすすめはまず無料プランで始めること。クレジットが足りなくなってきたら、そのタイミングでProへの移行を検討すればいい。
登録自体は5分で終わる。でも最初に少しつまずいたポイントがあったので、そこも含めて紹介する。
ステップ1：v0.devにアクセスしてSign Up
GitHubかGoogleアカウントで登録できる。Vercelアカウントを持っていればそのままログインするだけ。私はGitHubで30秒で終わった。
ステップ2：プロンプトを入力する
ログイン後、画面中央の入力欄に作りたいUIを入力する。日本語でも動くが、英語の方が精度が上がる傾向がある。最初は日本語で試して、イメージと違ったら英語に切り替えるのがコツだ。
試してみてほしいプロンプトの例はこちら。
ステップ3：生成結果を確認・チャットで修正する
30秒ほどで画面右にプレビュー、左にコードが表示される。気に入らなければ「背景をダークモードにして」「ボタンを角丸にして」と追加入力するだけ。私は最初「修正のたびにゼロから入力し直すのか」と思っていたが、チャット形式で積み上げられるのでかなり楽だった。
「便利そう」で終わらせたくないので、実際にどう使ったかを具体的に書く。
去年12月、クライアントから「来週中にLPのプロトタイプを見せてほしい」と言われた。通常なら断っていた依頼だが、v0を使ってヒーロー・料金表・FAQを別々に生成して組み合わせる方法で、丸1日で完成させた。
デザイナーに外注すると5万〜20万円・納期1〜2週間かかるところを、コスト0円・8時間で仕上げた。クライアントからは「早すぎる」と驚かれた。
SaaSアプリの管理画面は、普通に作ると一番時間がかかる部分だ。「売上グラフとユーザー数を表示するダッシュボード」と入力したら、RechartsベースのグラフコンポーネントつきのUIが出てきた。細かい調整は必要だったが、ゼロから書くより体感で5倍速だった。
Web制作の打ち合わせ中、クライアントが「こんな感じのデザインがいいな」と言った瞬間にv0で生成してノートPCの画面を見せた。その場でフィードバックをもらって修正して、また見せる。これを3回繰り返したら「もうこれでいい、お願いします」と即決してもらえた。提案の説得力が別次元になる。
よく使うUIパーツ（ボタン・モーダル・テーブル・フォーム）をv0で一括生成して、GitHubリポジトリに蓄積している。2件目以降の案件では、このライブラリから引っ張ってくるだけなので開発時間が初回の3分の1以下になった。
スクリーンショットを貼り付けて「このUIをモダンにリデザインして」という使い方もできる。ただし、複雑なレイアウトのスクショを渡したとき、v0がほぼ別物のUIを生成してきたことがあった。クライアントに見せたら「全然違う」と言われて焦った。
教訓：スクショを渡すときは「このナビゲーション構造は維持して、ビジュアルだけ刷新して」と制約を明示すること。これを守ってからは失敗していない。
v0を使い始めてすぐ気づいたのは、「プロンプトの質＝出力の質」だということ。最初の1週間は「なんか違う」を量産していた。
コツ①：目的・要素・スタイルの3点セットで書く
「ログインページを作って」は弱い。「SaaS向けのモダンなログインページ。メール・パスワードフィールド、Google/GitHubのソーシャルログインボタン、パスワード忘れリンク付き。ミニマルでプロフェッショナルなデザイン」と書くと精度が全然違う。
コツ②：参考サイトのスクショを一緒に渡す
気に入ったWebサービスのスクリーンショットを貼り付けて「このスタイルを参考に〇〇を作って」と指示できる。言葉で説明しにくいデザインのニュアンスを伝えるのに使える。
コツ③：Next.jsへの組み込みは「Add to codebase」を使う
生成後に画面右上の「Add to codebase」ボタンを押すと、CLIコマンドが表示される。ターミナルで実行するだけで、パッケージのインストールからコンポーネントの追加まで自動でやってくれる。手動コピペより確実で、依存関係でハマることもなくなった。
「v0だけが選択肢なの？」と思う人もいると思うので、主要ツールを並べてみた。2024年時点での私の使用感ベースの比較だ。
| ツール | 得意なこと | 出力形式 | 無料プラン | 向いている人 |
|---|---|---|---|---|
| v0 by Vercel | Reactコンポーネント生成・Next.js連携 | React / Tailwind CSS | 月200クレジット | Next.js開発者・副業フリーランス |
Bolt
Related |
