🐿️

[Vercel] v0 Private Betaの試用レポート

2023/12/13に公開

この記事はゆるプロ▼ Advent Calendar 2023の13日目の記事です。

v0とは

v0はshadcn/uiとtailwindcssをベースにした、プロンプトまたはイメージからNext.js向けReactコンポーネントを生成し共有できるVercelの新サービスです。2023年現在Private Betaの状態になっており、waitlist登録を行い開放された人のみの公開となっています。

既に先行している方や今後waitlistが解禁されるにつれ、より知見のある方の情報が出てくると思います。今回私の登録が開放されました。
現在日本発の情報は少ないと思うので、私の試用レポートを掲載します。
私の分かる範囲でお伝えできればと思いますので、先取り情報として参考にして頂ければ幸いです。

なお、私はこれを記載している現在、無料プランの状態です。

料金

月毎に与えられるクレジットを生成毎に消費していくタイプのシステムです。1生成につき10クレジットを消費（最初の生成は3つ生成するので30クレジット消費）します。

料金は現在無料プラン、Premiumプラン、Enterpriseプランが設定されており、
個人レベルで選択するプランは無料と月額$20のPremiumとなります。
生成クレジットとプライベート生成の有無が主な差異になります。

クレジットは無料200, Premium 5000 (プレミアムは買い増しが可能)
無料は全てパブリックな生成として公開される

正式リリースした場合は、無料で5コンポーネントをくらいは月毎に試せる雰囲気でしょうか。

プライバシーと商業利用

無料プランだと原則生成したUIは全てパブリックとなります。
また、現状生成内容は学習されるとのこと。将来的には学習しないような設定がなされるとのことです。
生成したUIの商業利用はv0の規約に従った上で制限なく利用可能です。

依存関係

Next.jsに対して利用することは基本的に必須となり、LinkなどNext.jsを前提にしたコンポーネントは優先的に利用される傾向にあります。
また、依存関係にはRadix-UIの系統を始め、clsxや、lucide-reactなどを使うようです。
shadcn/uiベースなのでRadixは言わずもがなですが、コードを実際に利用する際はこれらのようなライブラリの前提知識があると望ましいでしょう。
将来的にはSvelte, Vue, plain HTMLなどにも対応する可能性があるとのこと。

コンポーネントを生成する

プロンプトでの生成

v0では最初の段階(v0と呼称します)で必ず3つのバリアントを生成し、修正の必要があればどれか1つを選ぶことになります。修正をAIに依頼するごとに、v1, v2...とバージョンが重ねられます。
どのバージョンでも気軽に結果を閲覧できますし、ロールバックできるのはとても魅力的だと思います。

以下では「モダンなデザインのランディングページ。タイトルテキストにはグラデーションを使用。背景色は黒。画像用のエリアを設け、Get Startedボタンを添える。」と言うプロンプトで生成してみた例を示します。

basic

「CODEボタン」をクリックすることでコードを閲覧できます。

コードボタンをクリックする

画像を追加してコンポーネントを生成する

最初に与えるプロンプトのみ画像を添付し、イメージを伝えることができます。
以下は私の与えた画像です（画像は私が過去に作成した自前ツールの画像です）。

私のオリジナルツール

完全にとは言えませんが、それっぽく読み取ってくれてますね！

生成結果

部分修正を行う

修正時にはプロンプト右のアイコンをクリックすることで、AIに細かな要素の変更指示を出すことができます。
CODEボタンから、生成したコードを自分で編集していくこともできます。

bubun_syusei

日本語でも出来るのか？

試しにやってみたのですが、そこそこ通じるようです。ただし、私のプロンプトが悪いのもあるのかいい感じのものができなかったので、英語で記述してみる方が良い気がします。

プロジェクトに取り込む

コンポーネントを取り込むには、npmからv0をインストールし初期化します。
この際、tailwindがインストールされている必要があるので、そのようにします。
ここでは公式の示すドキュメント通りpnpmを利用したコマンドを丸ごと引用します。

pnpm create next-app@latest --typescript --tailwind --eslint
pnpm dlx v0@latest init

コンポーネントはv0のページのCODEボタンを押すと表示されるIDによって共有されます。
以下のコマンドにより、src/componentsに任意のIDのコンポーネントを追加します。

pnpm dlx v0@latest add [ID]

コマンドライン上でコンポーネント名が聞かれるので答えると、追加されます。

add_component

コンポーネントを共有

トップページを見ると分かるように、生成したコンポーネントはパブリックとして公開すると共有でき、トップページで色々探すことができます。これはv0の1つのサービスとしてのウリかと思います。
GitHubのようにスターやフォーク機能もあります。

生成AIを利用したUI生成について

v0に限らず、生成AIを利用したWebのUIを生成する試みは様々なものが行われており、熱を帯びた分野の1つだと思います。
この項目では、私の知っている範囲での一例を紹介します。

オープンソースのプロジェクトとしては、abi/screenshot-to-codeというものがあります。これはイメージを添付するとそれっぽいHTMLを吐きます。DALL·Eを利用して追加のイメージも添付してくれます。また、SawyerHood/draw-a-uiというfigmaの中の方の実験的リポジトリでは、tldrawを利用してUIイラストを書くと、同様にHTMLコードを吐き出してくれます。これらはどちらもGPT4-Visionを活用したプロジェクトとなっています。

注目ポイントとして、これらのアプリはtailwindを利用したコード生成を行うアプローチで共通していることが挙げられます。HTMLにデザインの指定そのものを組み込めるtailwindは、生成AIの失敗率が少なく親和性が高いと言えるのでしょう。この為、私はますます重要度が高まるかなと思っています。

企業レベルのサービスとしては、Figmaからのコード生成を行うBuilder.ioのVisual Copilotやノーコードサイト生成プラットフォームとしてdora ai、Framer AIなどのサービスがあります。

おわりに

このようなサービスが出てくることで、フロントエンドが苦手な人でも気軽にUIを作れる時代が少しずつやってきている気がします。
勿論強い方でも、気軽にイメージや部分コンポーネントのとっかかりに利用したり、今まで時間のかかっていたことが取り組みやすくなると思うので、制作に活用できるツールとして、このようなサービスをどんどん活用してみることはAI時代における1つの手なのではないでしょうか。
本サービスの正式ローンチと今後の進化が楽しみです。

参考文献

Announcing v0: Generative UI - Vercel Blog