share

公開日 

更新日 

  • 生成AIトレンド

【2024年11月最新】v0(ブイゼロ)とは?使い方や始め方、料金を紹介

テキストだけでサイトやアプリを構築できるv0(ブイゼロ)と呼ばれるAIツールが、SNSを中心に話題となっています。

v0では、テキストだけで(ノーコードで)、サイトの見た目(UI:ユーザーインターフェース)やゲーム・アプリを作成できます。

とはいえ、「v0が話題なのは知っているが、どうやって使えばいいのかわからない」と疑問をもっている方は多いでしょう。

そこで本記事では、v0の始め方や使い方を徹底解説しています。また、実際に作成したプロダクトや、v0を使うコツも紹介しているため、ぜひ参考にしてみてください。

この記事を読むことで、v0の使い方がわかり、デザイナー以外の方でもクオリティの高いプロダクトを作れるようになるでしょう。

監修者

SHIFT AI代表 木内翔大

(株)SHIFT AI 代表取締役 / GMO他複数社AI顧問 / 生成AI活用普及協会理事 / Microsoft Copilot+ PCのCMに出演 / 国内最大級AI活用コミュニティ(会員5,000人超)を運営。
『日本をAI先進国に』実現の為に活動中。Xアカウントのフォロワー数は9万人超え(2024年9月現在)

弊社SHIFT AIでは、v0やChatGPTを活用したAI副業の始め方や、AI人材となってキャリアアップする方法などを解説する無料セミナーを無料で開催しています。

ご興味のある方は、ぜひ以下のリンクからセミナーにお申し込みください。

【無料】AI人材の一歩目!

v0(ブイゼロ)はノーコードでサイト・アプリを構築できるAIツール

v0は、プログラミングスキルがなくても、AIの力を活用してユーザーインターフェース(UI)を生成するツールです。従来のUI設計では、デザインスキルやコーディング知識が必要でしたが、v0ではそれらの障壁を取り除きました。

v0の主な特徴は以下のとおりです。

v0(ブイゼロ)の特徴一覧
特徴1:テキストでサイト・アプリを構築可能
簡単なテキスト入力だけで、サイトやアプリの基本設計ができる
特徴2:shadcn/uiとTailwind CSSをベースにReactコードを生成
Reactコードの自動生成により、開発時間を大幅に削減できる
特徴3:最新のNext.js・Reactに対応
最新版のNext.js・Reactに対応しており、より高速で機能豊富なアプリ開発ができる
特徴4:Web上の最新情報を学習
Web上のトレンドや技術情報を常に学習し、最新の開発環境を提供してくれる
特徴5:プロダクト公開可能
作成物は、そのまま実際のプロダクトとして公開・利用できる
特徴6:参考画像をもとにUIを構築可能
画像やデザインの参考資料をもとに、直感的にUIを作成できる

ユーザーは自然言語で指示を出すだけで、その場でWebサイトのフロントデザインや、アプリを構築できます。たとえば「カレンダーアプリを作成して」と指示すると、v0は瞬時に要望を実現します。

v0により、デザイナーや開発者でなくても、プロダクトを簡単に作成できるようになります。そして専門的な知識があれば、v0によってプロダクトの開発業務やデザイン業務を効率化できるでしょう。

【無料でも利用可能】v0の料金体系

v0(ブイゼロ)は、個人から企業まで幅広いユーザーのニーズに対応するため、3つの料金プランを用意しています。各プランの特徴を詳しく見ていきましょう。

機能FreePremiumEnterprise
月額料金$0$20要問い合わせ
月間クレジット数2005,000カスタム
追加クレジット購入×
画像生成×
カスタムテーマ×
プライベート生成×
SAML SSO××
その他の機能7つの追加機能
参考:Pricing (Vercel)

個人開発者や学習目的の方は無料プランで始められ、より本格的な利用を考えている方はPremiumプランを選択できます。大規模なチームや企業向けには、カスタマイズ可能なEnterpriseプランが推奨されています。

活用方法に合った料金プランを選んでみてください。

v0の始め方

V0を始める際は、本章の手順解説を参考にしてみてください。

Get Startedをクリック

v0に最初にはいった時の画面

まずは公式サイトから、v0を利用するページへアクセスして「Get Started」をクリックします。                                              

Sign inからSign upをクリック                                                            

次に、Sign inのボタンが表示されるため、クリックしてください。

v0を開いた時の画面

その後、Sign upのボタンが表示されたら、クリックします。

v0にサインアップする際の画面

                                                        

アカウントを作成

次に、v0の開発元であるVercelのアカウントを作成します。ここでは、「GitHub」「GitLab」「Bitbucket」のアカウントから連携する方法と、メールアドレスで登録する方法を選べます。

v0とアカウント連携する前の画面

今回は、GitHubのアカウントと連携する方法を選択します。「GitHub」のボタンをクリックしたら、次に画像赤枠で囲まれている「Authorize Vervel」をクリックします。

v0とgithubをアカウント連携させている画面

GitHubのアカウントがない場合は、その場でアカウントを作成できます。もしくはメールアドレスだけでもVercelアカウントは登録できるため、好きな方法を選びましょう。

最後に、携帯番号で本人認証が行われます。スマホに送られてきた番号を入力して、アカウント連携が完了します。

v0の本人認証画面

認証が完了すると、v0をすぐに利用できるようになります。

                                                        

v0の使い方

v0の基本的な使い方を紹介します。

本章を確認して、まずは簡単な操作を覚えましょう。

プロダクトを作る

v0では、プロンプトを入力するだけでプロダクトを生成できます。

たとえば、以下のプロンプトで、計算機アプリを作成してみましょう。

10桁の計算が可能な計算機アプリを作成してください。デザインは青と黒を基調とします。
v0のプロンプト入力画面
プロンプト入力画面
v0で実際に作成した計算機アプリのGIF画像
実際に作成した計算機アプリ

簡単なテキストだけでアプリを作成できました。作成時間は20秒程度です。

また、アプリの機能やデザインについて、ここからチャットを繰り返すことでブラッシュアップが可能です。チャット形式である点を活かして、理想のプロダクトを作りましょう。

プロダクトを共有する

v0でPublishの場所を説明する画像

画面右上の「Publish」をクリックすることで、プロダクトを共有できるリンクが発行されます。Publishによって、リンクを受け取った人は誰でもプロダクトを使えるようになります。

たとえば、上記の計算機アプリはこちらから使用できます。

この機能によって、業務効率化アプリや、アプリのモックアップをチーム内で簡単に共有できます。ただし、Publishしたプロダクトはリンクさえあれば誰でも使えるため、個人情報や機密情報が入ったプロダクトは共有しない方がよいでしょう。

なお、Premiumプラン以上の場合、プライベート生成が可能となり、安全性が高まります。ビジネスで活用する場合は有料プランの利用を検討しましょう。

弊社SHIFT AIでは、v0やChatGPTを活用したAI副業の始め方や、AI人材となってキャリアアップする方法などを解説する無料セミナーを無料で開催しています。

ご興味のある方は、ぜひ以下のリンクからセミナーにお申し込みください。

【無料】AI人材の一歩目!

v0に事前にプロンプトを組み込めるProjectsが便利!

v0に事前にプロンプトを組み込んでおき、毎回同じプロンプトで指示することなく作業をテンプレート化できるProjectsが便利です。ChatGPTでいうところのGPTsと似た機能です。

たとえば、特定のデザインのグラフを毎回確実に作って欲しい場合は、そのグラフのデザインを事前にプロンプトで指示しておくことで、安定したグラフを毎回出力できます。

Projectsは以下のステップで始めます。まずは、トップ画面に表示されている以下の矢印の部分をクリックしましょう。

v0のトップ画面からProjectsに移動するための場所を指している画像

次に、以下の画面に移動します。ここで、Projectsのタイトルや組み込みたいプロンプトを入力します。

Projecsの画面説明画像

上記の画面でタイトルやプロンプトを入力したら、Projectsの基本設定は完了です。最後に、必要であればファイルを提供しましょう。ファイルはテキスト(txt)やWord、PDFなど、多様な形式に対応しています。プロンプトでは指示が難しくても、ファイルを与えることで簡単に指示を出せるようになります。

Projectsのファイル提供画面の解説画像

実際に作成した「グラフをすべて紫にするProjects」を動かした様子を示します。

紫色のグラフしか作らないProjectsを使った画像

なお、無料プランの場合、Projectsは3つまでしか作成できません。より多くのProjectsを作りたい場合、Proプラン以上に加入しましょう。

v0をより効率的に使いたい方は、Projects機能を使用して見てください。

【実演】v0で作成したプロダクト

本章では、実際に筆者が作成したプロダクトや、SNSで紹介されているプロダクトを紹介します。

  • ロゴジェネレーター
  • 社内資料
  • ポスター
  • 株価チャートアプリ

それぞれのプロダクトを確認して、v0を使う際の参考にしてみてください。

ロゴジェネレーター

SlackやDiscordなどのSNSアプリで使用する機会の多い、正方形のスタンプを作成するアプリを紹介します。

v0で作成したロゴジェネレーターを使っているGIF画像

このアプリはテキストのみで作成されており、フォントの大きさや色、背景色などを指定できる機能は、v0と対話を重ねて徐々に追加しています。

このアプリは、こちらから使用可能です。このリンク先では、実際に作成したアプリを使えるだけでなく、画面右上の「Fork」をクリックすることで、アプリをそのまま自分のプロダクトとしてコピーできます。

他の人が作成したアプリを確認することでインスピレーションを得られるのもv0の特徴です。

資料作成

v0では、データを視覚的にまとめて、わかりやすい資料を作成できます。

たとえば、以下のようなプロンプトを打つだけで資料が完成します。

以下のデータを、Reactを用いて視覚的にわかりやすい資料にしてください。
###
[データを入力]
V0で作成した社内資料を確認しているGIF画像
架空企業の売上資料

上記の資料は、1回のプロンプトのみで生成されています。チャットで指示することで、数値を追加したり、デザインを変更したりできます。
>資料の確認はこちらから

なお、社内資料をv0で作成する際は、情報の取り扱いに注意しましょう。現在v0は、入力したデータが学習される仕様です。また、共有した場合、情報漏えいのリスクもあります。
※今後学習に使用されないオプションが追加されると発表されています

データの取り扱いに十分注意した上で、v0を活用してみてください。

ポスター

v0と他アプリと組み合わせることで、クオリティの高いポスターを作成できます。

上記の例では、v0だけでなくCursor(カーソル)と呼ばれるプログラミング支援ツールと組み合わせてポスターを作成しています。また、写真はFluxと呼ばれる画像生成AIで作成しています。

この使い方は、ポスター以外にも、広告やWebサイトデザインなどにも応用可能です。v0によって、さまざまなデザイン業務を効率化できることがわかる好例といえるでしょう。

株価チャートアプリ

まるで証券会社のアプリのように、株価を確認できるアプリです。このアプリはaryanv氏によって作成されました。

v0で作成したチャートアプリを動かしているGIF画像

このアプリは、最初に簡単なプロンプト「An interactive line chart(インタラクティブな折れ線グラフ)」と入力し、徐々に複雑な機能を追加して作成されています。

v0で理想のプロダクトを作る際は、このアプリのように対話を重ねることがひとつのコツです。実際にv0を使う際の参考にしてみてください。
>アプリの利用はこちらから

弊社SHIFT AIでは、v0やChatGPTを活用したAI副業の始め方や、AI人材となってキャリアアップする方法などを解説する無料セミナーを無料で開催しています。

ご興味のある方は、ぜひ以下のリンクからセミナーにお申し込みください。

【無料】AI人材の一歩目!

v0で理想のプロダクトを作るコツ

本章では、v0でプロダクトを作る際のコツを紹介します。

  • 段階的に構築する
  • 具体的なプロンプトを使う
  • 参考画像をもとにデザインを作る

上記のポイントを参考に、v0を始めてみてください。

段階的に構築する

v0を使用する際は、一度の対話で完成を目指すのではなく、複数回の対話を重ねることで理想のデザインや機能に近づけられます。一度に多くの情報や要求を伝えると、AIが意図を正確に把握できず、期待通りの結果が得られないことがあるためです。

たとえば、最初の対話でベースとなるレイアウトを生成し、次の対話でカラーパレットを調整し、さらに別の対話でフォントや画像を追加するといった具合に、段階的に進めていく進め方がおすすめです。

このように段階を踏んで対話を重ねることで、各ステップでv0の出力を確認しながら、必要な修正や追加を加えられます。

また、v0では、過去のバージョンに戻る機能があります。

v0で前バージョンに戻っているGIF画像

段階的に構築することで、デザインの進化過程を把握しやすくなり、必要に応じて前のバージョンに戻ることも容易になります。

段階的にデザイン・機能を構築して、理想のプロダクトを徐々に作り上げていく意識をもちましょう。

具体的なプロンプトを使う

v0でプロダクトを作る際は、具体的なプロンプトを使用することが重要です。AIは抽象的な指示よりも、具体的で詳細な指示に対してより正確に応答するためです。

たとえば「青色にして」という指示よりも「カラーコードは”#1f205a”にしてください」と指定する方が、意図した結果に近づきやすくなります。

他にも、フォントサイズや行間、パディングなどの具体的な数値を指定したり、ボタンの形状やホバー時の動作などを詳細に記述したりすることで、より精度の高いUIを生成できます。

このように具体的なプロンプトを使用することで、AIとの対話の効率が上がり、より少ない回数の対話でプロダクトを作成できます。

参考画像をもとにデザインを作る

参考画像をもとにデザインを生成するv0の機能を活用することで、具体的なプロンプトを考える手間を省きつつ、望むデザインに近いUIを生成できます。

この機能では、参考にしたいデザインの資料や広告などの画像を提供するだけで、v0がその画像の特徴を分析し、類似したデザインのUIを生成します。

この機能は、プロンプト入力フォームのクリップマークを押して、画像を選択するだけで利用できます。

v0の画像提供フォームの説明

画像を参照する機能を活用して、v0を使いこなしましょう。

v0についてよくある質問

v0についてよくある質問を2つ用意しました。

  • v0は商用利用可能ですか?
  • v0に入力した情報は学習に使われますか?

それぞれの回答を確認して、v0を利用する際の参考にしてみてください。

v0は商用利用可能ですか?

v0は、利用規約により、基本的には商用利用が可能だと判断できます。

6.2. Your Rights. As between You and Vercel, and to the extent permitted by applicable law, You own the Output and Vercel hereby assigns to You any of Vercel’s rights, if any, in the Output. Due to the nature of the Services, the Output may not be unique, and the Services may provide the same or similar Output to other users. Our assignment above does not extend to other users’ Output or third party’s rights. You will need to make your own determination regarding the intellectual property rights you have in Output and its commercial usability, taking into account, among other things, your usage scenario(s) and the laws of the relevant jurisdiction.

引用:v0 Terms of Use(Vercel)

ただし、以下のポイントに注意してください。

項目内容
出力の所有権所有権はユーザーにあるが、外部のユーザーにも同様の出力が提供される可能性があるため、商用利用については注意が必要
知的財産権出力の知的財産権および商用利用可能性については、ユーザーの責任で判断する必要がある
参考:v0 Terms of Use(Vercel)

注意するべきポイントを意識しつつ、v0をビジネスに活用しましょう。

v0に入力した情報は学習に使われますか?

2024年8月28日時点では、v0へ入力したプロンプトやプロダクトは学習に使われます。そのため、入力する情報には機密情報や個人情報などは含めない方がよいでしょう。

Vercel may use user-generated prompts and/or content as inputs to models and learning systems from third-party providers to improve our products.

引用:FAQ(Vercel)

しかし、v0は今後、プロンプトやプロダクトを学習に使われないようにするオプション「オプトアウト」を実装する予定であると発表しています。

オプトアウトが実装されるまでは、情報漏えいリスクのある情報は入力しないことを推奨します。

専門スキルなしでもv0を使えばプロダクトを作れる!

本記事で解説したように、v0を活用することで、これまで専門スキルが必要だったプロダクト作成が容易になります。

現在では似たツールはあるものの、v0はテキストからプロダクトを生成する性能がとくに高い点が評価されています。今後のアップデート次第では、v0が多くの人に使われる未来も考えられます。

本記事を読んでv0を使ってみたいと思った方は、こちらのリンクからv0を使ってみてください。

弊社SHIFT AIでは、v0やChatGPTを活用したAI副業の始め方や、AI人材となってキャリアアップする方法などを解説する無料セミナーを無料で開催しています。

ご興味のある方は、ぜひ以下のリンクからセミナーにお申し込みください。

【無料】AI人材の一歩目!

記事を書いた人

SEOメディア責任者

大城一輝

フリーランスとしてライター、ディレクター、生成AIコンサルタントとして活動している。AI活用の講師も多数経験。
SHIFT AIではSEOメディア運用を担当。
また、SHIFT AIのモデレーターとしてコミュニティ運営や講師にも携わっている。
G検定・生成AIパスポート・Generative AI Test合格
Google AI Essentials修了
ノーコード生成AIツール「Create.xyz」公式アンバサダー
Xはこちら
Linkedinはこちら