【v0】Vercelのテキストからそのまま使えるUIデザインを生成するAI

猛者達が選ぶAIツール

2023-12-21

皆さんは、Velcel Labsの「v0」というサービスを知っていますか？

このサービスは、生成AIに対してテキストで指示を出すことで、自動的にWebページのUIを作成してくれて、さらに細かな修正も指示することで行ってくれます。

つまり、人間と対話する感覚でUIを作ることができるんです！

どうですか？すごくないですか？

このサービスを用いれば、映画「マイノリティ・リポート」のような先進的なインターフェースをテキストプロンプトで指示することによってAIに生成させることができます。

今回はその概要と使ってみた感想を皆さんにお伝えします。

是非最後までご覧ください！

なお弊社では、生成AIツール開発についての無料相談を承っています。こちらからお気軽にご相談ください。

Velcel v0の概要

v0は、Next.jsの開発元として知られるVercel Labsが提供する生成AIサービスです。

人間のデザイナーと対話しているように、生成AIと対話しながらUIを作成できることを目指して開発されたそうで、ユーザーはテキストでAIに指示を出すと、それに基づいてUIを生成します。

さらに、その生成されたUIに対してさらにテキストプロンプトで変更や追加を行うことができ、AIと対話しながらUIを詳細に作成できます。

また、v0で生成されるUIは、Shadcn UIとTailwind CSSというライブラリとフレームワークをベースにしています。これにより、ユーザーの指示に柔軟に対応でき、モダンでスタイリッシュなデザインのものが生成できます。

v0は、デザイナーや開発者の方が簡単に効率的にUIを生成するためのツールとして非常に有用だということで、注目を集めています。

現在はプライベートアルファ版として公開されており、ウェイトリストへの登録を行うと後日使用できるようになります。

気になった方は、以下の公式サイトから是非登録してみてください！

参考サイト：v0.dev

公式サイトにアクセスして、右上のメニューバーからJoin Waitlistをクリックします。

するとLog inを求められるので、Vercelアカウントがある方はLog in、無い方はSign upをしてください。

Sign uoの際、プランの選択をする必要があるのですが、これはVelcelの料金プランで、Hobbyは無料、Proは月額20$で利用可能です。

ただ、v0はプライベートアルファ版なので、プランに関係なく無料で使えますが、具体的な情報が出たら追記します。

アカウントを作成してLog inすると、以下のような画面になるので、Join Waitlistをクリックします。

You’re on the waitlistと表示されれば登録は完了です。

あとはVercelからアクセス可能になった旨のメールが来るのを待ちます。

なお、生成AIについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
→生成AIとは何か？仕組みやできることをAI専門家がわかりやすく解説

Velcel v0の料金体系

Velcel v0が一般に公開され、料金体系も同時に発表されました。

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プランにアップグレードしても良さそうです。

ここからは、実際にVelcel v0を使用して、その性能や使い勝手を見ていこうと思います。

Velcel v0を実際に使ってみた

ウェイティングリストに登録してから待つこと数か月、ようやくVelcel v0が使用できるようになりました！！

早速使っていきたいと思います

使い方は簡単で、まず以下のリンクにアクセスします。

v0.dev

以下のような画面になるので、真ん中のテキストボックスにプロンプトを入力して実行するだけで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について詳しく知りたい方は、下記の記事を合わせてご確認ください。
→【Screenshot-to-Code】スクショを貼るとWebサイトを5秒でコピーしてくれる裏技AIを使ってみた

まとめ

Vercel v0は、ユーザーが入力したテキストプロンプトに基づいてWebページのUIを自動生成してくれるサービスです。Shadcn UIとTailwind CSSをベースとしているため、ユーザーの指示に柔軟に対応し、細かく調整されたスタイリッシュなUIを作成することができます。

人間のデザイナーと対話しているように、生成AIと対話しながらUIを作成できることを目指して開発されたそうで、ユーザーがテキストでAIに指示を出すと、それに基づいてUIを生成します。

実際に使ってみた感想は、実際にテキストプロンプトで指示するだけでUIの生成を行ってくれたので、このサービスを活用すれば、UI作成時のコーディングタスクが大幅に効率化されると感じました。

将来、Vercel v0のようなAIの力を借りて、映画「、映画「マイノリティ・リポート」のような先進的なインターフェースを誰でも簡単に作れるようになるかもしれませんね！

生成系AIの業務活用なら！

・生成系AIを活用したPoC開発

・生成系AIのコンサルティング

・システム間API連携

無料ダウンロード

最後に

いかがだったでしょうか？

弊社では

・マーケティングやエンジニアリングなどの専門知識を学習させたAI社員の開発
・要件定義・業務フロー作成を80%自動化できる自律型AIエージェントの開発
・生成AIとRPAを組み合わせた業務自動化ツールの開発
・社内人事業務を99%自動化できるAIツールの開発
・ハルシネーション対策AIツールの開発
・自社専用のAIチャットボットの開発

などの開発実績がございます。

まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。

➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。

生成AIを社内で活用していきたい方へ