こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。今回は、プロンプトからUIを作成してくれるツール「v0」の使いかたや、実際に使ってみた感想などを紹介していきます。
「v0 by Vercel」とは
Next.jsを開発するVercelが、生成AIへのプロンプトでUIを自動生成するサービスを公開しました。2024年1月頭時点ではベータ版ですが、Freeプランも提供されているためログインすれば誰でも使用することができます。ChatGPTのように、プロンプトを投げるとAIがTailwind CSSとShadcn UIをベースにしたUIを提案し、HTMLとReactのソースコードも提供してくれます。
V0でできること
- プロンプトを入力・画像を添付するとAIがUIを作成してくれる
- UIのHTML・Reactのソースコードもはきだすことが可能
- プロンプトを追加することで変更や追加など修正もできる
- ほかのユーザーが作成したUIを参照したり、利用することができる
では実際に使ってみます
まずは「v0.dev」からログインします。GitHubやGitlabなどのアカウントがあればそれらからログインしたり、Googleはありませんがメールアドレスで認証してログインすることも可能です。
トップ画面はとてもシンプルですっきりしたUIになっており、使いやすい印象です。私はコーヒーが好きなので、大まかに「シンプルなコーヒーロースターのECサイトのテンプレート」とプロンプトに入力してみました。日本語にも対応されているようです。
入力から1分20秒ほどで、3つのUIを提案してくれました。
ユーザーは生成されたUIをプレビューで確認し、マッチした提案を選択します。それらに再び追加でオーダーをしたりしながら、ブラッシュアップを繰り返し、UIデザインを構築していきます。最初に提案してくれた3案はこちらです。
ちなみにレスポンシブにも対応しているため、幅を狭めることでグリッドは可変してくれます。
