![見出し画像](https://assets.st-note.com/production/uploads/images/152417259/rectangle_large_type_2_bbe2c8d868bb9e70066b71bbe2b52410.png?width=1200)
🔰【無料】v0の始め方
はじめに
話題のv0を使ってみました。
Claude3.5 SonnetのArtifactsでも似たようなことができると思いますが、v0のほうが洗練されたデザインが作れるみたいですね。
v0はテキストプロンプトを入力することでWebページのUIデザインとそのコードを自動生成できるAIツールです。特に、AIと対話しながらUIを生成・修正できる特徴があり、シンプルなタイマーアプリの作成例も紹介されています。SNSで話題となっており、使い方やメリット、料金プランについての情報も提供されています。無料プランでも毎月一定のクレジットが付与されるため、初心者や利用頻度が少ない人でも気軽に試せる内容となっています。
参考までに、上記はDifyを使ってv0の質問をした回答結果です。
![](https://assets.st-note.com/img/1724939549177-aX0H9cjvCK.png?width=1200)
v0の始め方
ログイン
「Get started」をクリック
![](https://assets.st-note.com/img/1724938602349-ChF7dJMvxl.png?width=1200)
![](https://assets.st-note.com/img/1724938614056-nqfwXDw9t1.png?width=1200)
![](https://assets.st-note.com/img/1724938629206-yyW4RgCf9A.png?width=1200)
「Sign Up」をクリック
![](https://assets.st-note.com/img/1724938668170-2TLLECipvr.png?width=1200)
ログイン後の画面
![](https://assets.st-note.com/img/1724938692623-cysOpNkpLq.png?width=1200)
プロンプトの実行
とりあえず以下のプロンプトを実行してみました。
日本の株価を分析するWebアプリケーションを作成してください。
![](https://assets.st-note.com/img/1724938932394-nRjWpNRcl9.png?width=1200)
![](https://assets.st-note.com/img/1724938943053-chunf5kaw8.png?width=1200)
![](https://assets.st-note.com/img/1724938952991-NLCrkZKbCx.png?width=1200)
![](https://assets.st-note.com/img/1724938964013-d5UCA7GTz2.png?width=1200)
![](https://assets.st-note.com/img/1724938977886-awiWcqFQLK.png?width=1200)
デザインがいまいちパッとしないですが、こんなものでしょうか。
ひとまず依頼したものはできあがりました。
画像をアップロード
ダッシュボードの画像をアップロードして、そのとおりのWebアプリを作ってくれるか試してみました。
https://www.nissin.com/jp/ir/library/event/pdf/20240314_2.pdf
![](https://assets.st-note.com/img/1724939068924-PUUwMcZWM7.png?width=1200)
プロンプト
画像のようなダッシュボードを作りたいです。WebAPで作ってください。
![](https://assets.st-note.com/img/1724939101626-YFyocF2WcU.png?width=1200)
![](https://assets.st-note.com/img/1724939110714-EO1amDDcDl.png?width=1200)
![](https://assets.st-note.com/img/1724939120354-r5qCVyiBBa.png?width=1200)
3パターンのデザインを作ってくれます。
以下は2つ目のパターンです。
![](https://assets.st-note.com/img/1724939133970-4cMYPifHNQ.png?width=1200)
![](https://assets.st-note.com/img/1724939174125-iEIatKtu1o.png?width=1200)
「Code」をクリックするとコードと画面の2画面表示になる。
![](https://assets.st-note.com/img/1724939186531-FX2y3gE5Pz.png?width=1200)
サンプル
下のほうにスクロールするとサンプルがいくつかあります。
いろいろなデザインがあるので、このあたりを参考にするのがよさそうです。
![](https://assets.st-note.com/img/1724940228779-HFI6fj8nkI.png?width=1200)
![](https://assets.st-note.com/img/1724940185557-X6zmvlpgPG.png?width=1200)
![](https://assets.st-note.com/img/1724940274347-JqVoS9ckjq.png?width=1200)
まとめ
噂通り、一瞬でWeb画面を作ってくれました。
デザインはもっと良いイメージがありましたが、プロンプトがダメなのか何かコツが必要なのかもしれません。
でも、一瞬でここまでのWeb画面まで作ってくれるので、AIの進化はすごいですね!