Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供

今回は「Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供」についてご紹介します。

関連ワード (料金体系、自動生成、要素等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

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


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

v0を使うと、人間のWebデザイナーに「こんな画面を作って」「ここの色は青にして」「ここのフォントは大きく」などと言葉で指定するの同じような感じで生成AIに指示をして、HTMLやCSSなどのコードを書くことなくWebアプリケーション画面の生成が可能です。

Introducing v0: generate UI from simple text prompts.

5,000 waitlist invites were sent today—with over 25,000 interfaces created so far.

What will you ship?https://t.co/xAkswt0qQt pic.twitter.com/hSpU8yjz1x

— v0 (@v0) October 11, 2023

v0は先月(2023年9月)にプライベートアルファ版として発表されていたものです。今回、ベータ版となったことで料金体系が発表され、利用申し込みをしていたユーザーの多くが利用できるようになりました。

コードを書くことなく、言葉の指示だけでWeb画面を生成

下記はv0のデモ動画の一部です。

例えば、プロンプトに「A SaaS dashboard layout」(SaaSのダッシュボードのレイアウトを生成して)と入力します。

fig

すると下記のようなダッシュボード画面が自動生成されます。

fig

ここでログをクリックして「Make the company logo clolor blue.」と入力。

fig

すると、ロゴの色が青く変わります。

fig

このように生成されたWebアプリケーションの画面の要素を指定し、さらにプロンプトで指示していくことで、コードを書くことなくWebアプリケーションの画面が生成されます。

生成された画面は、もちろんソースコードを取得可能です。

fig

現時点でソースコードはReactベースのShadcn UIとTailwind CSSを用いて記述されています。今後Svelte、Vue、プレーンなHTMLやその他のCSSフレームワークを用いたソースコードの生成も検討していくとのことです。

月間200クレジットまで無料で使えるFreeプランも提供

v0は、Freeプランを含むサブスクリプションによる価格が設定されました。

Freeプランは1カ月あたり200クレジットまで利用可能です。1回の生成あたり10クレジットが消費されるため、20回までプロンプトの指定による生成が可能。

月額10ドルのBasicプランは1カ月あたり1500クレジットまで、月額30ドルのStandardプランは5000クレジットまで、月額50ドルの10000クレジットまで利用可能で、Basicプラン以上は追加のクレジット購入が可能です。

COMMENTS


Recommended

TITLE
CATEGORY
DATE
光回線の2年縛り禁止 総務省が本格議論へ 価格競争促す
IT関連
2021-05-29 05:12
「GitHub Actions extension for VS Code」パブリックベータ公開。VSCodeからワークフローの実行と監視、管理が可能に
GitHub
2023-03-29 09:07
ツイッターがダイレクトメッセージのシステムにいくつかの改善を実施
IT関連
2021-08-21 22:47
SQLite、複数クライアントからの同時書き込みを可能にする「BEGIN CONCURRENT」文を実装へ
RDB
2023-08-01 21:58
MS、「Teams Premium」を発表–高度なAI機能やセキュリティ機能を追加
IT関連
2022-10-14 00:35
BeeX、ロッテのデータ連携基盤の構築を支援–データドリブン経営の実現に向けて
IT関連
2023-03-17 14:10
今の日本にアクティブインテリジェンスが必要な理由
IT関連
2021-04-23 00:16
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど
Adobe
2023-10-25 06:30
クリエイターの収益化を可能にする「リンクインバイオ」ホームページビルダーのBeaconsが6.5億円調達
ネットサービス
2021-05-26 20:10
Adobe、映像制作コラボサービス「Frame.io」買収 Creative Cloudに統合へ
企業・業界動向
2021-08-21 20:14
デジタルツインで店舗運営を最適化–エヌビディア、小売業での取り組み解説
IT関連
2023-02-25 07:21
ブログ作成ツール「tDiary」20周年 「みなさんの人生を綴る日記帳であり続ける」
ネットトピック
2021-04-21 13:32
「macOS」で「キーチェーンアクセス」を使う–パスワードを見つけて変更するには
IT関連
2022-07-19 00:09
クラウドの障害を考慮しないIT復旧対策がビジネスリスクに–ガートナー見解
IT関連
2023-09-29 21:56