8月11日の週､「YouTube」で生成AI「v0.app(以降「v0」)」を知りました。
生成AIといえば「ChatGPT」や「Gemini」、「Claude」が有名所で､「v0」の名前を聞いたことはありませんでした。
そんな無名な「v0」に私が興味を持ったのは「デザイン性が高い」との評価でした。
既存の生成AIにあった不満点
ほとんどの生成AIの売りは、コードがほぼ自動で書けることや推論モードで資料を調べレポートを効率良く作成するなどです。
私も調べ物に関しては今は「検索」はほとんど使わず、生成AIで効率良く返答を得るようになっています。生成AIで「検索」にかかった時間が短縮され､便利になったと実感している今日この頃です。
生成AIでコードを書くのが効率良くできるようになったといってもそれは1日に何百行もコードを書くプログラマーにとっては大きなメリットでしょう。
しかし､プログラマーでなく､ブログのカスタマイズのために少々コードをいじる程度の私にとって､コードの時短の実感はありません。
私の日常環境では､イメージしたWebサイトデザインをそのままコードに出力してくれる生成AIがあったら嬉しいと考えていました。
Illustratorなどで自分のイメージのデザインを作っても､素人の私が丸っとコードに書き出すことは中々できないからです。
急速に盛り上がった生成AI。なんでも生成AIが解決してくれるような期待を抱かしてくれました。
なので､もしかしたら私が持っていた上記のような願望もどれかの生成AIが解決してくれるのでは? と期待しました。
しかし､それは甘い考え。そんな便利な機能を搭載している生成AIがなかったのはすぐにわかりました。
「v0」との偶然の出会い
そんな私の願望を叶えてくれる生成AIがなく､もやもやしていた時､「v0」に出会ったのです。
それは偶然でした。
「v0」が「v0.dev」から「v0.app」に大幅アップデータしたのが8月12日。その数日前の8日に「OpenAI」が「ChatGPT-5」をリリースしたのです。
その「ChatGPT-5」のニュースを追っ掛けていた中に「v0」が偶然入って来たのです。
もし､「v0」のアップデートが「ChatGPT-5」のリリース時期から離れていたらいまだに「v0」に出会っていなかったと思います。
「v0」に興味を持ったのはデザイン性に高い評価を得ていたという点です。
既存の生成AIの出力のデザイン性に不満を持っていた私にはこのアピールポイントは興味を持つのに十分でした。
ログイン画面
「v0」を使うため即無料ユーザー登録をしたのは言うまでもありません。
幸いなことに､通常､無用ユーザーは毎月5ドルしかクレジットが付与されません。
しかし､アップデートキャンペーンとして12日から4日間は無料ユーザーに毎日20ドルを進呈するとのことでした。
日本語対応
これは嬉しい!
Webサイトのデザイン案を出力してもらうのにどのくらいのトークン量になり､どこくらいのクレジットが消費されるのかまったく不明。なので､クレジットが多いに越したことはありませんでした。
キャンペーン期間中､毎日10ドル付与された
無料ユーザー登録し､翌日にクレジット付与を確認したところ､20ドルではなく10ドルしか付与されませんでした…?
しかし､私の試用内容では毎日10ドルで不足なかったです。
試用結果の満足度
試用で1週間ほど「v0」を使いました。
満足度は80〜90点と合格点です。
今回「v0」の試用方法は次のように行いました。
参考とするWebサイトのスクリーンショットをアップロードし､それをなるべく忠実に再現するよう指示しました。
最初の指示で「v0」が出力したレイアウトは細かい個所で参照とは異なる部分はありましたが､大きなレイアウトの崩れはなく､最初の指示での出力としてはかなり満足度が高い結果です。
参照と異なった部分は追加指示で十分修正可能レベルと感じました。
その後､文字だけでレイアウト指示も行いました。
「v0」の使い始めで指示の方法がわからなかったため､大雑把な指示で試してみました。
そんなアバウトな指示でも､かなり希望に沿った精度が高いレイアウトを出力してきました。
コツがわかり､より適格な指示をすることができれば文字だけの指示でも実用になるのではないでしょうか。
事前の高評価に懐疑的でしたが､良い意味でくつがいさせてくれました。
「ChatGPT」や「Gemini」、「Claude」などでは実現できず､私が生成AIに求めていたレベルに達していたことを実感した瞬間です。
もう素人が四苦八苦してイチからコードを書く必要はありません。「v0」を使うことでコードを正確に､また時間短縮で完成させることが可能になりました。
「HTML+CSS」の出力方法
「v0」が作成する基本フォーマットは「***.tsx」です。
Webサイトでは「HTML+CSS」が基本なので「***.tsx」のままではWebサイトで利用することができません。でも、心配ありませんでした。
「v0」内部では「***.tsx」で構築しても「『HTML+CSS』で出力して」と指示すれば「HTML+CSS」に変換して出力してくれました。
「HTML+CSS」で出力できればそのコードをWebサイトにペーストするだけでWebサイト構築ができます。
素人には嬉しい､まさにノーコードでのWebサイト構築です。
また､「CSS3」になり「Flexbox」という機能が搭載されたことで今までよりも簡単にレイアウトが組めるようになりました。
もちろん､「v0」は指示すれば「Flexbox」に対応したコードで出力してくれます。
「WordPress」用に書き出すことも可能
現在､新規Webサイトの構築や更新の手間を考え「WordPress」などのCMSを使っている人も多いでしょう。
しかし､構築や更新の手間が軽減される一方で､テーマによりデザイン性が制限されます。
もし､「v0」がCMSに対応していれば､その制限から解放されます。
しかし､CMSの面倒なところは､メイン部分とヘッダー部､フッター部などが別々の「php」ファイルになっていることです。
「v0」がメイン部分とヘッダー部､フッター部を別々の「php」ファイルに出力できなければCMSでの利用はかなり限定されます。
そこで､「Dia」で質問しました。すると対応可能との返答でした。
まだ実作業で確認はしていませんが「Dia」の返答を信じる限り「WordPress」もノーコードでの構築も可能となります。
でも､「WordPress」はオープンソースとはいえ開発元のコードの上に構築されているのです。
ズーッと続くと思われていたソフトウェアがある日突然開発終了するのは過去のIT系の歴史から散々経験してきました。
一方、自分でHTMLとCSSで構築すれば、そのような不安はなくなります。
何といってもHTMLとCSSはWebサイトの大元。インターネット環境がある限りこのコードがなくなることはありませんから。
このように考えたら､Webサイト構築もノーコードで出来､デザインの自由度もアップする「v0」が登場した今､CMSからHTML+CSSに戻るのも有効な選択肢だと考えられます。
バグがあるので注意
「v0」をまだ1週間しか試用していませんが､そのような中で予想外に大きなバグに遭遇してしまいました。
このバグが厄介で、まだ解決策が見つかっていないレベルのモノです。「v0」を今使うならしばらくはこのバグに注意する必要があります。
このバグが見つかったのは経緯を記します。
・Webサイトのデザインがどれだけ忠実に再現できるかを知るため「v0」にそのWebサイトのスクリーンショットをアップロード
・このスクリーンショットを元に「v0」にデザイン案を5案出してもらうよう依頼
・「v0」から5案できたと返答がありましたが1案しか表示されない
・それを指摘すると「同じIDを使用してしまった」とし、もう一度実行
・その後も同じミスの繰り返しでトークンだけを消費
別のスクリーンショットや文字だけの依頼などを行いましたが同じエラーを繰り返しました。
そこで､「v0」の不具合ではないかとAIブラウザ「Dia」に聞きました。
この症状が他にも発生しているのか、また発生しているのなら解決策を提示して欲しいの内容です。
その「Dia」とのやり取りが下記です。
「Dia」の返答が長いのでリンク先に表示するようにしました。クリックして確認してください。
質問1
質問2
質問3
質問4
質問5
このように、この症状が稀な事例ではなくすでにフォーラムでやり取りされている明白な事例だとわかりました。
「Dia」で症状が特定されたのは一歩前進でしたが､解決策がないという残念な現状でした。
現段階での有効な解消策としては、個別にデザイン案を表示させダウンロードするという、かなり消極的な方法しかないのは残念です。
開発元の「Vercel」が対策するまでこの消極的な対策で凌いでいくしかないようです。
まとめ
ネット上での評価が高いのに実際に体験してみると期待したほどでないという例は過去に多く経験しました。
このような過去の経験から「v0」にもあまり多くを期待していませんでしたが､「v0」に関しては良い方に予想を上回りました。現在､残念なバグがありますが、解決を待つのではなく率先して使い始めることをお薦めします。
「v0」は､Webサイトのデザイン案の検討ツールとして現在でも個人だけでなく仕事でも十分利用できるレベルです。
素人がWebサイトのカスタマイズや修正作業を行う程度なら無料の5ドル/月で運用できるでしょう。
ただ､Webサイト構築を仕事で行っている場合は､無料ユーザーではクレジットが足りないのでProユーザー20ドル（約3,000円）で対応する必要があるでしょう。
ただ､Proユーザーでも使い放題ではないのでトークンの使用量には注意が必要です。
コメント