Vercelの「v0」は、テキストプロンプトを入力することで、WebページのUIデザインとフロントエンドコードを自動生成するツールです。以前まではウェブサイトを作るためには、そもそものコードを書くエンジニアに加えて、UI（ユーザーインターフェイス）を整備するフロントエンジニアも必要でしたが、今ではそれらが一つのAIツールによって完結します。
今回は、そんなVercelの「v0」の使い方や料金について紹介します！
目次
1章 Vercelの「v0」とは？
v0の概要
Vercelが提供する「v0」は、テキストプロンプトを入力するだけで、WebページのUIデザインとフロントエンドコードを自動生成する強力なAIツールです。これにより、デザインスキルがなくても、プロンプトに基づいた高品質なWebデザインを簡単に作成できます。
Vercelは、Web開発者向けに効率的なツールを提供する企業として知られており、その中でも「v0」は、AIを活用してコーディングプロセスを劇的に簡略化するために開発されました。
画像出典 vercel
またv0は、日本語を含む多言語のプロンプト入力に対応しており、非英語圏のユーザーでも簡単に利用できます。プロンプトを使用して、生成されたUIに細かな変更を加えることができます。これにより、ユーザーの意図に沿ったデザインを実現できます。
v0の最新アップデート情報
2023年12月にベータ版としてリリースされたv0は、2024年7月に正式リリースされ、機能が大幅に拡充されました。
新機能「v0チャット」の追加
画像出典 vercel
v0には新たに「v0チャット」機能が追加され、ReactやNext.jsに関する質問にステップバイステップで答えてくれるようになりました。
v0の主な機能
テキストプロンプトによるUI生成
v0の最も注目すべき機能は、テキストプロンプトを入力するだけで、指定されたデザインに基づいたUIを自動生成する能力です。たとえば、「シンプルなコーヒーロースターのECサイトのテンプレート」と入力すると、AIが関連するデザインを生成します。
画像からのUI生成
画像出典 vercel
スクリーンショットや画像をアップロードすることで、そのデザインを元にしたUIを生成することも可能です。これにより、既存のデザインを再現したり、参考にしたデザインから新しいアイデアを得ることができます。
Shadcn UIとTailwind CSSの利用
生成されるUIは、Shadcn UIとTailwind CSSをベースにしており、モダンでスタイリッシュなデザインが実現されます。これにより、コードを簡単にカスタマイズし、素早くプロジェクトに適用できます。
HTMLおよびReactコードの出力
画像出典 vercel
生成されたUIは、HTMLやReactの形式でコードが出力されます。開発者はこのコードを直接自分のプロジェクトに組み込み、迅速にプロトタイプを作成できます。
生成されたUIは、追加のプロンプトを使用して簡単に修正や変更が可能です。たとえば、「ボタンの色を青に変更して」などの具体的な指示を与えることで、デザインを微調整できます。
2章 vercel「v0」の使い方
v0のはじめ方
早速 v0を始めていきましょう！
①公式サイトにアクセス
公式サイトにアクセスしましょう！
画像出典 vercel
「Get Started」をクリックして次に進みましょう！
②アカウントの登録
続いて、アカウント登録に移ります。
画像出典 vercel
先ほどの「Get Started」をクリックするとテキストプロンプトを打ち込む画面が現れます。しかしこのままでは使えないのでアカウント登録をしていきましょう！
画面右上の「Sign In」をクリックしましょう！
画像出典 vercel
このように「GitHub」「GitLab」「Bitbucket」からアカウント作成ができます。あまり身近なアカウントのサービスではないかもしれませんね。GitHubが1番馴染み深いでしょうか。
画像出典 vercel
このように、、GitHubを使ってログインをするとアクセス許可の画面が出るため「vercelを承認」をクリックして次に進みましょう！
画像出典 vercel
このように元のプロンプト作成画面に戻りました！これにてvercel v0を使う準備が整いました！
vercel「v０」実際に使ってみた！
準備が完了したので、さっそくv0を使ってみましょう！
画像出典 vercel
このようにテキストを入力する欄の下には、ファイルをインポートするボタンがあります。こちらからは画像をインポートすることができるので、作りたいウェブサイトの画像などを入れるとデザインの参考にすることができます。
今回は、本サイトのこちらのホーム画面を参考にサイトのページを作ってもらいます！
画像出典 vercel
サイトのスクリーンショットの画像とともに
画像のようなウェブサイトを作成して。画面の背景をピンク色にして
という簡単なテキストプロンプトを添えました。
画像出典 vercel
こちらが出力結果となります。画面が縦に分割され、左側がチャット画面になっています。v0による出力結果の説明が文章でなされていることがわかります。
画面右側には現状のサイトのデザインが映し出されています。
画像出典 vercel
画面右上の「code」をクリックするとこのWebサイトを出力できるプログラミングコードが表示されます！
このように現在のデザインに対して修正点があれば画面左側のテキストプロンプト欄に指示を打ち込み、その結果が画面右側にリアルタイムで表示されるようになっているのです。
CLaude3.5のアーティファクト機能のようなイメージですね！
３章 vercel「v0」の料金・商用利用
v0は無料で使える？
結論から申し上げますと、v0は無料で使うことができます！しかしながら、無料プランでは作成できるコードに限りがあるため多くのコードを作成したい場合には有料プランに加入が必要です。
最新の料金プラン
画像出典 vercel
こちらがv0の料金プランとなっています。v0には月額無料のFreeプラン(200クレジット）、月額20ドルのPremiumプラン（５０００クレジット）、Enterpriseプランがあり、利用するクレジット数や機能に応じて選択できます。
Premiumプランに加入すればクレジットを使い果たしても新たに購入することができますが、Freeプランでは使い切ったら翌月のクレジット付与までクレジットの追加ができないため注意が必要です！
しかし、無料プランでも毎月クレジットが付与されることから無料で使い続けいることができるというのは嬉しい点ですね！
v0の商用利用の可否と注意点
v0 の利用規約に従い、Vercel はお客様のクエリやプロンプトに基づいて生成されたコードを所有しません。ただし、サービスの性質上、お客様が受け取る出力は他のユーザーの出力や第三者の IP と同じまたは類似していたり、不完全であったり、バグを含んでいたり、お客様の使用に適していない場合があります。v0 を通じて生成したコンテンツを評価し、その商業的有用性についてお客様自身で判断する責任はお客様にあります。
このように、v0で生成されたコードは商用利用が可能ですが、使用するアバターやデザインに関しては、著作権に関する制約に注意する必要があります。
４章 まとめ
Vercel v0は、プロンプト入力によって高品質なUIデザインとコードを迅速に生成する強力なツールです。Web開発の効率を大幅に向上させるこのツールを利用することで、より速く、より効果的なプロジェクト進行が可能になります。興味のある方は、公式サイトから、実際にその機能を体験してみてください。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。