プロンプトでUIを生成してくれるAIサービス「v0」をUIUXデザイナーが使ってみた

プロンプトでUIを生成してくれるAIサービス「v0」をUIUXデザイナーが使ってみた
  • X
  • Facebook
  • note
  • hatena
  • Pocket

 デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回はAIサービス「v0」についてです。

 こんにちは!株式会社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サイトのテンプレート」とプロンプトに入力してみました。日本語にも対応されているようです。

出典:「v0.dev」
出典:v0.dev

 入力から1分20秒ほどで、3つのUIを提案してくれました。

 ユーザーは生成されたUIをプレビューで確認し、マッチした提案を選択します。それらに再び追加でオーダーをしたりしながら、ブラッシュアップを繰り返し、UIデザインを構築していきます。最初に提案してくれた3案はこちらです。

 ちなみにレスポンシブにも対応しているため、幅を狭めることでグリッドは可変してくれます。

※この続きは、会員の方のみお読みいただけます(登録無料)。