デザインのそれ。

デザインや写真、テクノロジーなどなど雑駁なつぶやき

話題の無料生成AIデザインツール「v0」半自動生成でWebサイト制作の強い味方

f:id:styrome:20240925111906j:image

出典:v0

 

新しく登場して話題となっているデザインAIツール「v0」。あのnext.js( JavaScriptフレームワーク)を開発したvercel(バーセル)という企業がリリースしたAIツールです。

v0公式サイト

 

v0.dev

 

v0は、人工知能(AI)を活用したデザインツールです。これを使いこなすと、簡単なプロンプト入力だけでプログラミングの知識がなくてもWebサイトやUIコンポーネントコードを作成することができるようになります。

Claude 3.5のArtifacts(アーティファクト)機能と似たようなものですね。

 

使う場合はユーザー登録(メールや他アカウント認証)だけで簡単に無料版は始められます。

1. メールを入力

2. メールに送られてくる6桁の確認コードをv0に入力

これだけで使い始めることができ、日本語にも対応しています。

 

「v0」の主な特徴

AIによるコンポーネント生成

作りたいものをテキスト形式で入力すると、自動的にコードを生成してくれます。

例えば、「ブログ記事のサムネイルパーツを作って」「youtubeのような再生ページをつくって」と指示すれば、それっぽいページをデザインして、そのコードも生成してくれます。

もちろん、それをhtmlに埋め込み、Next.js・Reactにも対応した実際に動くページが簡単に作成されます。

 

AIなので簡単に会話形式で、ここをもうすこしこう変えてと指示すれば即座に複数のデザインバリエーションを生成してくれます。人間のデザイナーに頼むとそうは行かないですよね。

 

フィードバックを基にAIモデルが継続的に学習

さらに、ユーザーの好みや指示を学習し、より精度の高いデザインを提案します。

 

自動でコードが生成され、プレビューでデザインが作られていく様子は見ていて面白いですね。

 

また、v0という名前の通り、バージョン管理もでき、一度作成したデザインから修正を加えると、v1→v2と過去のものには変更を加えず、新しい修正はバージョンアップ版として生成されます。

これにより、前に戻りたい場合に過去のバージョンに移動すれば良いので便利ですね。エンジニアらしい嬉しい機能です。

 

 

料金体系

v0の料金体系は利用量に合わせて3段階が用意されています。

 

利用には「クレジット」という単位を消費するかも形となり、無料版は月に200クレジットを消費するまで使うことが可能です。

クレジットは一回作成ごとに1〜3クレジットが消費され、デザインの複雑さ等により変動するようです。

プレミアムだと5000クレジットなので、まずは無料で使ってみて、実用できそうなら有料プランに入るのが良さそうです。

おそらく無料200クレジットだと、本気で何か作る場合すぐに消費してしまうと思います。

 

 

イデア次第で何ができるか

v0は、WEB業界に革命をもたらす可能性を秘めたツールだ!と話題となっていますが、これは本当に使い方次第ですね。

簡単にコード生成ができるので、アイデア次第で色んなWEBプロダクトが作れそうな反面、ある程度コードを理解していないと結局思うようなものが作れないということになりかねないですね。

少し前に出てきたカーソル(AI搭載コードエティター)も、チャットだけで完璧なWEBサイトが作れるかと言えばそうとも限りません。

ある程度触ればAIと人間が行うチャットの限界にぶち当たり、結局コードを直で書かないと成立しない側面も否定できませんよね。

 

でも、コードがわかるエンジニアには便利な時短ツールになるのではないでしょうか。またこれを触りながら理解が加速するということ多いにあるので、使う人と使わない人の差がどんどん開いていくように思います。

 

まとめ

・テキスト(チャット会話)で実用レベルのコード生成をしてくれる

・修正はバージョン管理で容易

・無料で使えるが本気の開発はプレミアム(有料プラン月額20ドル)

・あくまで開発を手助けしてくれるツール

・使いこなすにはある程度プログラミング知識が必要

といったところでしょうか。

 

v0.dev