【v0 Vercel】テキストからUIデザインを生成するAI！使い方や料金を徹底解説
皆さんは、Vercel Labsの「v0」というサービスを知っていますか？
このサービスは、生成AIに対してテキストで指示を出すことで、自動的にWebページのUIを作成してくれて、さらに細かな修正も指示することで行ってくれます。
つまり、人間と対話する感覚でUIを作ることができるんです！
どうですか？すごくないですか？
このサービスを用いれば、映画「マイノリティ・リポート」のような先進的なインターフェースをテキストプロンプトで指示することによってAIに生成させることができます。
今回はその概要と使ってみた感想を皆さんにお伝えします。
是非最後までご覧ください！
Vercel v0とは
v0は、Next.jsの開発元として知られるVercel Labsが提供する生成AIサービスです。
人間のデザイナーと対話しているように、生成AIと対話しながらUIを作成できることを目指して開発されています。ユーザーがテキストでAIに指示を出すと、それに基づいてWebサイトなどに適用するUIを生成してくれます。
テキストチャット自体は公式サイトのブラウザ上で動作するので、高性能なハードがいらない点も嬉しいポイントです。
Vercel v0の特徴
Vercel v0の特徴を以下にまとめました。
- 自然言語で手軽にUIを生成できる
- 生成されたUIの修正やカスタマイズも可能
- 生成されるUIはShadcn UIとTailwind CSSのライブラリ・フレームワークをベースにしている
- React/Next.jsと高い互換性がある
なんといっても、自然言語のみで手軽にUIを生成できるのがVercel v0の強みです。
さらに、その生成されたUIに対してさらにテキストプロンプトで変更や追加を行うことができ、AIと対話しながらUIを詳細に作成できます。
また、v0で生成されるUIは、Shadcn UIとTailwind CSSというライブラリとフレームワークをベースにしているのが特徴です。これにより、ユーザーの指示に柔軟に対応でき、モダンでスタイリッシュなデザインのものが生成できます。
v0は操作の手軽さから、デザイナーや開発者が簡単かつ効率的にUIを生成するためのツールとして有用だということで、注目を集めています。
気になった方は、以下の公式サイトから是非登録してみてください！
なお、デザイナー向けの生成AIツールが気になる方は、以下の記事もご覧ください。
Vercel v0の登録方法
v0を使用するにはVercelアカウントの登録が必要です。ここでは、Vercel v0の登録方法や使い方を紹介します。
まずは、画面上部のメニューバーから「Login」をクリックしましょう。
その後、ログイン画面が出てくるので、まだアカウントを作っていない方は、ページ下部の「Sign Up」を選択してください。
その後、アカウントの登録方法を選び、必要な情報を入力します。
筆者は、メールアカウントを入力して登録しました。登録したメールアドレス宛に以下のようなメールが届くので「VERIFY」をクリックしてください。
検証が完了したあとは、再びトップページに戻り、「Login」をクリックします。そうすると、以下の画面に切り替わり、チュートリアル等が表示されます。
チュートリアルを確認したら、もうプロンプトを入力できる状態になっているので、実際にUIを作ってもらいましょう。
なお、生成AIについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
生成AIにはChatGPTやMidjourneyなど、多岐にわたるものがあります。
他にもどんな生成AIがあるのか、それらの仕組みも併せて知りたいという方に、おすすめの記事です。
続きを読む
Vercel v0でできること
Vercel v0でできることは多岐にわたりますが、大きく分けて以下の3つを紹介します。
- デザインの生成
- SEOの強化
- 外部サービスとの連携
上記3つを実現すれば、自社のマーケティングを強化したり、業務効率を向上したりできます。
以下で、それぞれご紹介していくのでぜひ参考にしてみてください。
デザインの生成
Vercel v0は、テキスト形式でプロンプトを入力するだけで、さまざまなUIを生成できます。とくに、以下のように多様なデザインを生成できるのが魅力です。
- Webページ
- 会議や講演用スライド
- SNS投稿用の図解
- ポスター
工夫次第でさまざまなUIを作成できるので、自社サービスに適したものを作成すれば、マーケティング戦略の強化にも繋がります。
SEOの強化
Vercel v0はただおしゃれなデザインを生成するだけのツールではありません。サイトのレスポンシブ化や動作の最適化が可能なため、最終的にはSEOの強化も実現できます。
とくに、スマートフォン利用者の多い現代では、モバイル表示への対応が重要です。
Vercel v0でサイトコードの最適化をおこなえば、読み込みの動作も軽くなるので、訪問ユーザーのストレスも軽減できます。
外部サービスとの連携
Vercel v0は、さまざまな外部サービスと連携できます。とくに、Next.jsとの連携は開発者が想定しているもので、生成されたReactの表示を確認する際に便利です。
ほかにも、連携というほどではありませんが、サイトのUIを参考にするためにCanvaを使用したり、FLUX.1 dev ComfyUIなどのUIツールを別途使用したりするとデザイン生成の幅が広がります。
Vercel v0の活用事例
ここでは、Vercel v0の活用事例として以下の5つを紹介します。
- RPG風のスライドを作成
- コーヒーショップのホームページ作成
- 既存デザインを完全再現
- SNSの発信用に図解を作成
- 今風のポスターデザインを作成
以下でそれぞれの活用事例を紹介していくので、気に入ったものがあれば真似してみてください。
今回解説する事例において、弊社がX（旧Twitter）で発見した参考となるツイートを紹介させていただいております。取り下げなどのご連絡は、弊社公式X（旧Twitter）からご連絡ください。
RPG風のスライドを作成
Vercel v0を使って、おしゃれなスライドを作成している方がいたのでご紹介します。
こちらの投稿者は、Vercel v0は使って、PRG風のスライドを作成しています。動画では実際に使っているシーンが収録されていました。
見た目に遊び心があるので、見る人の記憶に残るのは間違いないですね！
Vercel v0なら、スライドで使用すUIも作成できるので、ぜひ真似してみてください。
コーヒーショップのホームページ作成
こちらの投稿者は、Vercel v0でコーヒーショップのホームページを作成しています。
画像では、実際にホームページを作成するときに使っているプロンプトも共有されていました。
「珈琲屋さんのホームページを作成して」といった文章のあとに特徴を箇条書きするだけで、Reactのコンポーネントが瞬く間に出来上がっています。
さらに、コンポーネントを出力したあとに、作成したUIの特徴等も解説されていてわかりやすいです。自社ホームページのデザインを改善したくなったら、まずはVercel v0に頼んでみるのがいいかもしれません。
既存デザインを完全再現
こちらの投稿者は、Vercel v0にPerplexityとCanvaを組み合わせることで、既存デザインを完全再現しつつ実用レベルのデザインを作成しています。
まずは、Canvaのテンプレから参考にしたいデザインを見つけて、そのスクショをVercel v0に送って完全再現したデザインを作成させています。
そのうえで、Perplexityに自社の情報等を出力させて、出力した情報をVercel v0で完全再現したデザインの情報と置き換えて完成させているようです。手軽に高度なデザインを作れるので、ぜひ真似してみてください。
ただし、完全再現するデザインはあくまでフリー素材に留めておきましょう。
SNSの発信用に図解を作成
Vercel v0でSNSの発信用に図解を作成した方がいたのでご紹介します。
こちらの投稿者は、Vercel v0にて「AIモデル利用ランキング」という図解を作成しています。実際に生成された図解をみてみると、特徴などもわかりやすく記載されており、人が作成したものと見分けがつかないほどの出来でした。
普段からSNSの投稿用に図解を作成している方は、Vercel v0で効率化することも検討してみてください。
今風のポスターデザインを作成
こちらの投稿者は、Vercel v0を使って今風のポスターデザインを作成しています。
投稿内容をみてみると、Vercel v0のほかに、Next.js・cursor composer・FLUX.1 dev ComfyUIといった別のツールを組み合わせていることがわかりました。
それぞれの用途は以下のとおりです。
- Vercel v0：画像のアップロードとプロンプトで叩き台を作成
- Next.js：生成されたReactの表示確認
- cursor composer：細部の調整
- FLUX.1 dev ComfyUI：ポスターに使用する写真の生成
投稿者の場合は、これらのツールを組み合わせて、屋外イベント用のポスターを生成しています。
イベントのポスターを企画するとなると時間がかかりがちですが、叩き台としてVercel v0に作成してもらうのはよさそうです。
なお、デザインの作成・編集ができるCanva GPTに興味がある方は、以下の記事も合わせて確認してみてください。
Vercel v0の料金体系
Vercel v0が一般に公開され、料金体系も同時に発表されました。プランごとの料金は、Vercel v0公式サイトの「pricing」にも記載されています。
v0に3種類のプランがあり、FreeプランとPremiumプランとEnterpriseプランです。
この２つのプランの詳細を表にまとめました。
| プラン | Free | Premium | Enterprise |
|---|---|---|---|
| 料金 | $0 /月 | $20 /月 | 相談 |
| 機能 | 200クレジット/月 General Commercial Terms | 5000クレジット/月 General Commercial Terms オプションのクレジトの購入 プライベート生成 | カスタムクレジット/月 General Commercial Terms オプションのクレジットの購入 プライベート生成 データプライバシーの保証 SAML SSO一括請求 カスタマイズされたオンボーディング |
Freeプランでは基本的な機能は使えますが、公開サーバー上での生成になるので、処理が遅くエラーになってしまうこともあるので、Freeプランで試してみて使えると思った方は、Premiumプランにアップグレードしても良さそうです。
ここからは、実際にVercel v0を使用して、その性能や使い勝手を見ていこうと思います。
Vercel v0を実際に使ってみた
ウェイティングリストに登録してから待つこと数か月、ようやくVercel v0が使用できるようになりました！！早速使っていきたいと思います。
使い方は簡単で、まず以下のリンクにアクセスします。
以下のような画面になるので、真ん中のテキストボックスにプロンプトを入力して実行するだけでUIの生成が始まります。
試しに以下のプロンプトを入力してインスタグラムのUIを再現させてみます。
A Instagram UI結果は以下のようになりました。
React
/**
* v0 by Vercel.
* @see https://v0.dev/t/1obF6f7Rj9Q
*/
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { AvatarImage, AvatarFallback, Avatar } from "@/components/ui/avatar"
import { CardHeader, CardContent, CardFooter, Card } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
export default function Component() {
return (
<div className="flex flex-col h-full">
<header className="px-4 py-2 flex items-center justify-between border-b">
<Link className="flex items-center gap-2" href="#">
<InstagramIcon className="w-6 h-6" />
<span className="text-lg font-semibold">Instagram</span>
</Link>
<div className="flex items-center gap-4">
<Button size="icon" variant="ghost">
<UploadIcon className="w-4 h-4" />
</Button>
<Button size="icon" variant="ghost">
<MessagesSquareIcon className="w-4 h-4" />
</Button>
<Avatar className="w-8 h-8 border">
<AvatarImage alt="@username" src="/placeholder-user.jpg" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
</div>
</header>
<main className="flex flex-grow overflow-hidden">
<aside className="w-full max-w-xs p-4 border-r overflow-y-auto" />
<section className="flex-grow p-4">
<ScrollArea className="h-full space-y-4">
<Card className="rounded-none shadow-none border-0">
<CardHeader className="p-4 flex flex-row items-center">
<Link className="flex items-center gap-2 text-sm font-semibold" href="#">
<Avatar className="w-8 h-8 border">
<AvatarImage alt="@username" src="/placeholder-user.jpg" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
Username
</Link>
</CardHeader>
<CardContent className="p-0">
<img
alt="Image"
className="w-full object-cover"
height="400"
src="/placeholder.svg"
style={{
aspectRatio: "400/400",
objectFit: "cover",
}}
width="400"
/>
</CardContent>
<CardFooter className="p-2 pb-4 grid gap-2">
<div className="flex items-center w-full">
<Button size="icon" variant="ghost">
<HeartIcon className="w-4 h-4" />
<span className="sr-only">Like</span>
</Button>
<Button size="icon" variant="ghost">
<MessageCircleIcon className="w-4 h-4" />
<span className="sr-only">Comment</span>
</Button>
<Button className="ml-auto" size="icon" variant="ghost">
<BookmarkIcon className="w-4 h-4" />
<span className="sr-only">Save</span>
</Button>
</div>
<div className="px-2 text-sm w-full grid gap-1.5" />
</CardFooter>
</Card>
</ScrollArea>
</section>
</main>
<footer className="px-4 py-2 border-t flex items-center justify-between">
<span className="text-sm text-gray-600">© 2023 Instagram</span>
<div className="flex items-center gap-4">
<Link className="text-sm" href="#">
About
</Link>
<Link className="text-sm" href="#">
Help
</Link>
<Link className="text-sm" href="#">
Privacy
</Link>
</div>
</footer>
</div>
)
}
function BookmarkIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
</svg>
)
}
function HeartIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
</svg>
)
}
function InstagramIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
</svg>
)
}
function MessageCircleIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" />
</svg>
)
}
function MessagesSquareIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
</svg>
)
}
function UploadIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="17 8 12 3 7 8" />
<line x1="12" x2="12" y1="3" y2="15" />
</svg>
)
}シンプルではありますが、数秒でUIとコードを生成してくれました。
テキストのみで指示した場合は、このくらいのクオリティで生成してくれますが、画像と一緒に入力することで再現度を高めることができます。
WEELのサイトのスクリーンショットを入力して、以下のプロンプトと共に実行します。
Create a UI like this結果はこのようになりました。
一回目の生成でかなり近いUIを生成してくれました。
本来であれば、ここからさらに詳細な設計をテキストで指示してクオリティを高めていくのですが、何度やっても途中でエラーになってしまいます。
ウェイティングリストに登録していた人が一斉に使えるようになったので、処理が重たくなっているのかもしれません。
Prtemiumプランに加入すればこの問題は解決できると思うので、Freeプランで使ってみて気に入った方は課金して快適なUI生成を楽しんでみてください。
最後に、日本語のテキストプロンプトでも動作するのか検証します。
中国語や韓国語で生成していた例もあったので恐らくできると思います。
以下のプロンプトを入力します。
天気予報サイトのUIを生成して結果はこのようになりました。
問題なくUIの生成をしてくれています。
わざわざ英語に翻訳して入力しなくても良さそうので、我々日本人にも使いやすいサービスですね。
Vercel v0を使えば、UIを作成するための基盤をテキストプロンプトのみで簡単に生成でき、さらに自分が作りたいUIの画像を一緒に入力すればさらに高いクオリティでUIとコードを生成してくれます。
このサービスを活用すれば、UIを作成する際のコーディングタスクを大幅に効率化できることは間違いないでしょう！
もしこの記事を読んで気になった方は、是非登録して使ってみてください！
なお、スクリーンショットからUIを作成してくれるScreenshot-to-Codeについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
Vercel v0の商用利用について
Vercel v0では、生成したコードを商用利用することも可能です。公式サイトにも、以下のとおり明記されています。
ただし、1つ注意点があります。それは、Vercel v0で生成したデザインを商用利用する際は、著作権に関する制約に注意する必要があるという点です。
もし、参考用に他者が作成したデザインをVercel v0に読み込ませた場合、それもとに生成されたデザインは元のデザインに類似する可能性があります。
したがって、Vercel v0のコードやデザインを商用利用する際は、著作権関係について細心の注意を払いましょう。
なお、ChatGPTの著作権問題や過去の訴訟事例が気になる方は、以下の記事をご確認ください。
Vercel v0で手軽にUIを生成してみよう
Vercel v0は、ユーザーが入力したテキストプロンプトに基づいてWebページのUIを自動生成してくれるサービスです。Shadcn UIとTailwind CSSをベースとしているため、ユーザーの指示に柔軟に対応し、細かく調整されたスタイリッシュなUIを作成できます。
今回の記事では、Vercel v0できることとして、以下の3つをご紹介しました。
- デザインの生成
- SEOの強化
- 外部サービスとの連携
また、以下の活用事例のように、すでにVercel v0を使いこなして高度なデザインを作成している方もいます。
- RPG風のスライドを作成
- コーヒーショップのホームページ作成
- 既存デザインを完全再現
- SNSの発信用に図解を作成
今風のポスターデザインを作成実際に使ってみた感想は、実際にテキストプロンプトで指示するだけでUIの生成を行ってくれたので、このサービスを活用すれば、UI作成時のコーディングタスクが大幅に効率化されると感じました。将来、Vercel v0のようなAIの力を借りて、映画「マイノリティ・リポート」のような先進的なインターフェースを誰でも簡単に作れるようになるかもしれませんね！
生成系AIの業務活用なら！
・生成系AIを活用したPoC開発
・生成系AIのコンサルティング
・システム間API連携
最後に
いかがだったでしょうか？
弊社では
・マーケティングやエンジニアリングなどの専門知識を学習させたAI社員の開発
・要件定義・業務フロー作成を80%自動化できる自律型AIエージェントの開発
・生成AIとRPAを組み合わせた業務自動化ツールの開発
・社内人事業務を99%自動化できるAIツールの開発
・ハルシネーション対策AIツールの開発
・自社専用のAIチャットボットの開発
などの開発実績がございます。
まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。
➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。
「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。
セミナー内容や料金については、ご相談ください。
また、弊社紹介資料もご用意しておりますので、併せてご確認ください。
