こんにちは、スクーティー代表のかけやと申します。
弊社は生成AIを強みとするベトナムオフショア開発・ラボ型開発や、生成AIコンサルティングなどのサービスを提供しており、最近はありがたいことに生成AIと連携したシステム開発のご依頼を数多く頂いています。
v0.dev（ブイゼロ）は、Vercelが提供するAIツールで、プログラムを自動生成するための画期的なソリューションです。開発者やデザイナーがプロジェクトを迅速に立ち上げる際に役立つこのツールは、特にユーザーインターフェースのコード生成に特化しています。しかし、v0.devの使い方やその効果について詳しく知りたい方も多いのではないでしょうか。
この記事では、v0.devの概要から具体的な使い方、実際の評価までを詳しく解説します。これにより、v0.devを活用してプロジェクトを効率的に進める方法を学ぶことができます。
v0.devの概要と機能
v0.devとは何か
v0.devは、Vercelが開発者とデザイナー向けに提供するAIツールで、テキストで指示するとHTMLやアプリケーションが自動生成されるサービスです。発表当初はウェイティングリストに登録する必要がありましたが、現在ではVercelアカウントを持つユーザーなら誰でも利用可能です。このツールは、開発者とデザイナーの間のギャップを埋め、プロジェクトの立ち上げを迅速化することを目的としています。
v0.devは、ユーザーインターフェースのコード生成に特化したChatGPTのようなツールで、shadcn/uiとTailwind CSSライブラリを使用してコードを生成します。生成されたコードは、npxインストールコマンドを通じてプロジェクトに追加できます。これにより、開発者は迅速にプロジェクトを立ち上げることができ、時間と労力を大幅に節約できます。
v0.devの実験シナリオ
v0.devは、デザインを作成するためのプロンプトを提供し、画像を処理して選択した要素のデザインを改善する機能を持っています。これらの機能を評価するために、以下の質問に基づいて実験を行いました。
- アップロードした画像を理解するのか？
- 英語以外の言語でも動作するのか？
- 新しいプロジェクトで使用できるのか？
- 既存のプロジェクトで使用できるのか？
- 生成したアプリケーションはデプロイできるか？
これらの質問を念頭に、v0.devの実用性と限界を明らかにし、どのようにしてプロジェクトに最適な形で活用できるかを探りました。
v0.devの実験と評価
実験1：アップロードした画像を理解するのか？
こちらの無料のダッシュボードテンプレートの画面のスクリーンショットを撮って、その再現性を見てみました。スクーティーの画像ファイルをv0.devに添付し、「Please make the page like the attached file」というプロンプトを実行しました。
するのこんな感じで自動的にどんどん必要なファイルを生成してくれます。途中エラーがでたりもしますが、「解決して」とだけ指示すると修正してくれます。
待っていたら画面が出来上がりました。1, 2分くらいだったと思います。仕上がりはこんな感じ。画面構成はぜんぜん違う・・・けど、ダッシュボードっぽいものはちゃんと作ってくれました！右上のカレンダーもちゃんと開きました。
いいWebサイトを見つけたときに、「これと似たようなものを作りたいな」と思ったらこの方法が簡単でいいですね！
実験2：英語以外の言語でも動作するのか？
先程の実験1と同じスクリーンショットを添付し、今度は日本語でプロンプトを「添付のような画面を作ってください。」のように入力してみました。結果に違いが出るかを見てみます。
結果はこちら。だいぶあっさりしてしまいました。
「添付ファイルの画像を解析し、このスクリーンショットと全く同じ画面を作ってください。」とプロンプトを変えてみましたが、結果はそんなに変わりませんでした。
プロンプトは日本語とはいえ簡単な文章なので、言語で結果の差が出るとはあまり考えられませんが、この実験の結果だけからは、１．日本語の解釈自体はできる、２．ただし、生成物の精度が英語で指示したものと比べると若干下がる、ということになります。
実験3：新しいプロジェクトで使用できるのか？
ここまでの実験で、v0.devは１枚の静的なHTMLではなく、複数のファイルを同時に作成できることはわかっているのですが、サーバサイドの処理も含めたアプリケーションを作ってみてもらいましょう。
シンプルなCRMを作ってみてもらいます。フロントエンドはReact、バックエンドはPythonでFastAPIを使用、DBは適当に選んでもらうように指示しました。プロンプトはこちら。「Make a simple CRM. Frontend is React. Server side is in Python and use FastAPI. You can choose DB yourself.」
上記のように実装されましたが、すべてTypeScriptで実装されており、Pythonは対応していないようです。
ただし、複数ファイルを生成し、プロジェクトとして実装されています。
一発目は顧客一覧表示と追加機能が1ページにまとまったものがでてきましたが、顧客情報を適当に入力しても追加した情報が一覧に表示されないバグがでました。類似のサービスである、Bolt.newやReplit Agentも現象として同様のものを確認できるのですが、バグが出たときに修正させても同じバグを連発することがあります。この場合は、「真因を特定し、確実に、かつ、即刻問題を修正してください。真因を特定するにあたって、私に確認したいことがあれば質問してください。」のように投げかけると、修正できることが多いです。
今回も上記のように指示し、以下のようなものができました。DBも使用しておらず、サーバ通信も発生していないので、すべてフロントエンドで動作しているアプリになります。
実験4：既存のプロジェクトで使用できるのか？
私が色々試した限り、できないようです。もしできるのであればどなたか教えて下さい・・・！
v0.devには「Project」というメニューがありますが、正直なところ用途がよくわかりませんでした。
実験3もProjectとして登録されているわけではなく、Chat単位で管理されています。ChatGPTのChatとほぼ同じ概念です。Projectでファイルをアップロードできる機能がありますが、これは実装済みのプロジェクトファイルをアップロードしてv0.dev上で修正できるようなものではなく、言語モデルが参照するためのドキュメント類をアップロードする機能のようです。
実験5：生成したアプリケーションはデプロイできるか？
画面右上のDeployボタンでデプロイできます。
デプロイする際に、デプロイしたいアプリケーションを作成したChatを、上記に述べたProjectなるものに一度追加しないといけませんが、それはDeployボタンを押した際にv0.devが自動的にやってくれます。
これもBolt.newやReplit Agentと同様に、デプロイ処理が失敗することがあります。それこそAgentに自動的に解決してもらえたらいいなと感じますが、現時点ではプロンプトで「解決してくれ」と指示を出す必要があります。このあたりもBolt.newやReplit Agentと同様です。
デプロイが成功したら、表示されるURLか、「Visit Site」のリンクをクリックすれば、Vercelのクラウド環境にデプロイしたアプリケーションが開きます。
今回はv0.devというサービスで簡単なアプリケーションを生成する方法をご紹介しましたが、実際のサービスとして使用できるものや、社内で使用できるレベルのものを作ろうとすると、結構パワーがかかりますし、結局システム開発の知識が必要になってきます。
もしアイデアがあってプロトタイプを作ってみたいというご要望がございましたら、ぜひお気軽にお問い合わせください！
Bolt.newやReplit Agentとの比較
わたしは類似サービスのBolt.newやReplit Agentも使用してみましたし、いろいろなアプリケーションも作ってみました。それに関しては別の記事に書こうと思いますが、私の個人的な意見としては以下になります。
※ただし、これらのサービスの進化はとても速く、毎週のように新しい機能が発表されているため、時期によって評価は大きく異なると思われます。
- サーバサイド処理もあるアプリケーションを実装するのであればBolt.new、時点がReplit Agent
- Replit Agentも「そういう要望なのであれば、〇〇のような機能も作りますか？」のような提案をしてくれて、かなり深い思考をしている印象は受けました。
- しかし、より複雑な機能の実装や、サービスそのもの安定性を考えると、Bolt.newのほうが使いやすいと私は感じています。
- 本記事執筆時点では、Replit Agentはまだβ版で、ある機能ができああとに別の機能を追加すると、もともとあった機能が消えてしまったり、同じバグを連発したりなど、前に進めるのが難しいと感じました。
- LPなどの静的Webページを生成するのであればv0.dev
- ただし、デザインセンスや、Reactの実装方法がイケているかなどは未検証で、静的ページを作りたいのであればv0.devでいいのでは？程度です。
ちなみにv0.devではプレゼンファイルも作成することができます。
v0.devの価格とよくある質問
プラン比較
v0.devは、Vercelが提供する、モダンなWeb技術に精通した生成AIアシスタントサービスです。チャットインターフェースを通じて、技術的なガイダンス、UI生成、JavaScript/Pythonでのコーディング、複雑なプログラミングトピックの説明図作成など、Web開発を支援します。高度なBlocks機能により、Svelte、Vue、React、HTML/CSSの記述とレンダリングが可能です。
以下がv0.devのプランの一覧になります。
- Freeプラン：無料
- チャット、コンテンツ生成 (v0)
- チャットの共有、公開
- Premiumプラン：$20/月
- Freeプランに加え
- メッセージ制限10-20倍
- 添付ファイルサイズ制限5倍
- 公開Blocksでカスタムサブドメイン利用可
- プロジェクト機能
- Freeプランに加え
- Teamプラン：$30/ユーザー/月
- Premiumプランに加え
- さらに高いメッセージ制限
- Vercel.comでの一括請求
- チームでチャット、Blocks、プロジェクトを共有
- Premiumプランに加え
- Enterpriseプラン：個別見積もり
- Teamプランに加え
- データトレーニングのオプトアウト
- SSO
- パフォーマンス向上のための優先アクセス、待ち行列なし
- Teamプランに加え
上記にトークン数（メッセージ数）の明確な上限数は記載されていませんが、Freeプランだとかなり速く上限に達します。それなりにちゃんとしたものを作るのであれば、少なくともPremiumプランが必要です。
よくある質問（FAQ）
サービス全般とプランに関するFAQの主だったものを簡単にまとめました。
サービス全般
- v0とは？
- モダンなWeb技術に精通した生成AIアシスタント。チャットで技術的なガイダンスを受けたり、UIを生成したり、コードを書いたり、図を作成したりできます。
- v0の仕組みは？
- チャットインターフェースでv0アシスタントと対話します。v0は高度なBlocksを出力し、チャットでプレビュー、コピー＆ペースト、またはshadcn CLI経由でプロジェクトにインストールできます。
- v0の学習データは？
- 公開および非公開のデータセットを組み合わせて使用。Web開発、特にReact、Next.js、モダンなWeb技術に関連する領域をカバーしています。詳細はVercelのAIポリシーを参照ください。
- 生成物はトレーニングに使用されますか？
- 製品改善のため、ユーザーが生成したプロンプトやコンテンツを、サードパーティプロバイダーのモデルや学習システムへの入力として使用する場合があります。v0 Enterpriseのお客様のコンテンツは使用されません。また、Vercelプラットフォームサービスをご利用のお客様のデータやコードは、v0で使用されるモデルのトレーニング、改善、ファインチューニングには使用されません。
- Vercelプラットフォームサービスの顧客データはトレーニングに使用されますか？
- いいえ、Vercelプラットフォーム、Vercel CLI、Vercelのデプロイサービスの使用に関するデータは、v0のトレーニングには使用されません。
- React以外でもv0は便利？
- v0はSvelte、Vue、HTML、MarkdownをBlocks内でレンダリングできます。 また、BootstrapやMaterial UIのようなフレームワークの記述・レンダリングも可能です。Drizzle、Supabase、Vercelなどの様々なフレームワークやサービスに関する知識も持っています。今後、さらに多くのフレームワークやサービスが追加される予定です。
- Tailwind以外でもv0は便利？
- はい。v0は様々なCSSフレームワークやvanilla CSSのコードを生成できます。Material-UI、Chakra UI、styled-componentsなどのUIライブラリにも対応しています。
- データフェッチングコードの生成は可能？
- リモートエンドポイントまたはAPIからデータを取得するコードを生成できます。ただし、ブラウザでそのコードを実行できるのはReact v0 Blockのみです。
- チャット履歴の確認は可能？
- はい、v0.dev/historyで確認できます。
- データの削除リクエストは可能？
- はい、[email protected]に連絡してv0出力の削除をリクエストしてください。入力と出力が既存のv0モデルのトレーニングに使用された場合、それらのモデルは更新されません。すべてのコンテンツがトレーニングに使用されないようにするには、v0 Enterpriseプランへのアップグレードについてお問い合わせください。データ保護規制に基づく個人データの削除リクエストについては、Vercelのプライバシーに関するお知らせを参照ください。
- v0の出力を商用利用することは可能？
- Vercelは、お客様のクエリやプロンプトに基づいて生成されたコードの所有権を主張しません。ただし、受け取る出力は、他のユーザーの出力や第三者のIPと同じか類似している可能性があり、不完全またはバグが含まれている可能性があり、あるいは使用目的に適さない可能性があります。v0で生成したコンテンツを評価し、商用利用またはその他の目的に適しているかどうかを独自に判断する責任があります。
プラン詳細
- “message”の意味は？
- v0とのやり取りにおける、ユーザーのプロンプトとv0のレスポンスの単位を指します。メッセージ数には制限があり、プランによって異なります。
- メッセージを使い切った場合、チャットを続けるには？
- 上位プランにアップグレードするか、次の更新期間まで待つ必要があります。
- 未使用のメッセージは翌日に繰り越されますか？
- いいえ、メッセージは繰り越されません。毎月の更新期間でリセットされます。
- 払い戻しはありますか？
- 原則として払い戻しは行っていません。特別な事情がある場合は、Vercelのサポートチームに連絡してください。
- 税務上の領収書や請求書は発行されますか？
- 請求書は発行されます。詳細はVercelの請求システムをご確認ください。
- プランのキャンセル方法は？
- Vercelのダッシュボードからプランをキャンセルできます。
- PayPalは利用できますか？
- 現時点では、PayPalは利用できません。
