Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに

今回は「Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに」についてご紹介します。

関連ワード (作成、入力、入力欄等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。


Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。

figv0のWebサイト。プロンプト入力欄が中央にあり、下には過去の作例が並んでいる

v0 by Vercel Labs

Generate UI with simple text prompts. Copy, paste, ship.

Explore the prompt library and join the waitlist today.https://t.co/yaDdOfnOaJ

— Vercel (@vercel) September 14, 2023

v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。

下記は「A dashboard for saas app」(SaaSのダッシュボードを作って)というプロンプトで生成されたUI画面。

fig

もちろんソースコードも表示できます。デザインはHTMLとCSSで作成されており、Tailwind CSSとShadcn UIがベースになっています。

fig

「A music player UI in a macOS windows」(macOS用のミュージックプレイヤー)というプロンプトで生成したUI。

fig

左上にある「Add a container div to wrap the…」というプロンプトは、最初のプロンプトで生成された後のUIに対して、さらに変更や追加などを指定した際に使われたプロンプトです。

「Give me a set of 12 buttons. Use a different color for each button. Put them in a grid」(12個のボタンを色違いで生成して、テーブルとして並べて)というプロンプトで生成されたUI。

fig

「a contact form」(問い合わせのページ)というプロンプトで生成されたUI。

fig

「A table of financial invoices」(請求書の一覧表)というプロンプトで生成されたUI。

fig

前述の通り、生成されたUIに対して、プロンプトでさらに追加変更などを行うことも可能。例えば、この請求書の一覧表はバージョン20までプロンプトによって変更が行われました。

fig

このようにv0は、人間のデザイナーにデザインを依頼し、対話しながらデザインを詰めていくように、生成AIに対してプロンプトで対話しながらUIを生成できるようなサービスです。

特に定型的なUI画面であれば、プログラマが簡単にプロンプトで生成できてしまいそうです。

現時点でv0はプライベートアルファ版です。上記のデモは誰でも参照できますが、実際にプロンプトを入力して生成させるにはウェイトリストへの登録が必要となっています。

COMMENTS


Recommended

TITLE
CATEGORY
DATE
今週の記事ランキング(2021.3.14〜3.18)
IT関連
2021-03-20 11:13
大林組、夢洲の建設現場に顔認証システムを本格導入
IT関連
2023-07-14 09:40
グッドパッチ、企業のプロダクトマネジメントを支援する新サービス
IT関連
2023-10-25 07:48
さくらインターネット、ガバメントクラウドのサービス提供事業者に選定
IT関連
2023-11-29 22:28
PCの数と資産台帳の数字が合わない–そこに潜む根深い原因
IT関連
2023-02-14 15:45
データ基盤でDXの本丸へ–テプコシステムズのアジャイル変革体験記(後編)
IT関連
2024-06-21 09:31
三島市教育委員会、業務改善に「kintone」を活用
IT関連
2023-05-31 15:05
GIGAスクール特需に対応–ITリテラシーの底上げ策としての期待
IT関連
2021-07-13 06:18
中小企業のDX 阻んでいるのは「認識の壁」
IT関連
2021-02-03 23:59
運輸・海運業界を狙うランサムウェアが増加、世界情勢が影響の可能性–Trellixの脅威レポート
IT関連
2022-12-06 16:03
自動車やモバイル向け半導体でリードするNXP–成長はエッジ
IT関連
2023-09-14 21:21
「コンビニおにぎり開けられない」海外レポーターの苦戦動画が130万再生 セブンは「きれいな開け方」ネットで公開 :東京五輪とネット(1/2 ページ)
企業・業界動向
2021-07-31 00:21
開発者の「好きな言語」や「嫌いな言語」–Stack Overflow調査
IT関連
2021-08-09 19:31
天井を突き抜けて成長する「昇竜」の年に–テラスカイ・佐藤氏
IT関連
2024-01-12 08:02