はじめに
株式会社ネクストスケープ エンタープライズサービス部の小野塚です。
ここ最近の当社ブログではGithub CopilotやCursor、Firebase Studio等々、生成AIに関する記事を書いてきました。
今回は「Vercel v0」（以下v0）を触ってみましたのでこれについて記事を書いてみたいと思います。
Vercel v0概要
このv0、Next.jsの開発元であるVercel Inc.が開発した生成AIツールになりまして、AI関連のXの投稿を見るとちょいちょい見かけていたため非常に気になっておりました。
v0のサイトでは「生成UIツール」とあり、「UI生成」「プロトタイピング」「ペアプログラマー」といったことに役立つと書かれています。
プログラミング言語に関してはVercelが作成しただけあってReact、Next.jsといったように主にUI周りに強みを持つツールのようです。
現時点（2025/05/04）での最新の料金プランは以下。Freeプランもありまして今回はFreeで試してみたいと思います。
Webアプリ作成
新規登録、ログインを行うと以下のような画面に遷移し、他の生成AIを用いたツール同様、チャットで依頼する形になります。
今回は以下のようなプロンプトでWebアプリの作成を依頼してみます。今回は今までの私の記事のような雑な依頼ではなく、プロンプトにそれなりの粒度で依頼内容を記載してみます。
プロジェクト名: 「学習トラッカー」
概要:
ユーザーが自分の学習状況を管理し、進捗を追跡できるWebアプリを作成してください。ユーザーは学習目標を設定し、達成度を確認できます。
機能要件:
・学習目標設定: ユーザーが学習目標を設定し、達成期限を指定できる機能。
・進捗管理: ユーザーが学習の進捗を記録し、達成度を確認できる機能。
・学習履歴: 過去の学習履歴を表示し、どの目標が達成されたかを確認できる機能。
・通知機能: 学習目標の期限が近づいた際に通知を送る機能。
・ユーザー登録: ユーザーがアカウントを作成し、学習状況を保存できる機能。
デザイン要件:
ユーザーフレンドリーなインターフェース
レスポンシブデザイン（モバイル対応）
と、以上の内容を依頼してみます。
すると数分経過して以下のような画面が表示されます。
左側がチャットでのやり取り、右側が生成された結果となりまして、今回依頼した「学習トラッカー」の画面が表示されています。
タイトルの「学習トラッカー」の隣にあるリンゴのアイコンが何か微妙な印象を与えますが、全体的にシンプルでありながらあまり安っぽくもない今どきのレイアウトのように思われます。
後ほどお見せしますが、ログイン画面や新規登録画面もありまして、ログインすると以下のような画面になります。
既にサンプルデータが入っています。プログラミングの学習用に使っているというイメージですね。進捗率もグラフィカルに表示されて機能要件が一通り満たされている印象です。
ここまでのチャットのやり取りは以下のようになります（文字が小さい方はブラウザの拡大機能でご確認ください）。
（続き）
もう少し画面をお見せしますと新規アカウント登録は以下のようになります。
追加改修・変更
ただ、あくまでモック、プロトタイプとなりまして、例えば以下の赤枠部分「詳細を見る」ボタンを押すとソースコードが表示され、まだ実装されていませんでした。
そこでもう少し頑張ってもらいます。
（続き）
最初の依頼と打って変わって雑な依頼にもかかわらず、かなり詳しく考えてくれています。そして実際にもう一度詳細画面へ遷移するボタンをクリックした結果が以下。
サンプルデータがちゃんと書かれていることもありますが、学習カテゴリや残り日数等、UIが非常によく、細かいところがしっかり作りこまれているイメージです。
新しい学習目標を作る画面は以下のようになります。
では、白黒では寂しいので以下のように依頼してみます。
「もう少し色を付けたいです。但し学習用アプリなのであまり派手になりすぎないように」
と依頼した結果が以下になります。進捗が赤と緑で表され、より分かりやすいものになりました。
では改めてコードを見てみましょう。左上の「</>Code」をクリックします。
するとファイルツリーとエディターが表示され、以下のようにNest.jsで書かれていることがわかります。
フォルダで区別する形なのか、あくまでとりあえず作成したという意味なのか、ファイル名が全て同じでいまいちですが、コードの内容自体は適度にコメントが日本語で入力されており、Nest.js初心者の私から見てもわかりやすく書かれています。
テストコード生成
テストコードも依頼してみます。依頼した直後のやり取りが以下。
テストコードの実行方法も手とり足とりという感じで教えてくれます。
「テストコードは一部でいいので」と依頼したためなのかはわかりませんが、拡張方法までちゃんと書いてくれます。
実際にエディタ画面で見てみると、Next.jsでは「__tests__」というフォルダ配下にテストコードのファイルを配置するのがセオリーなのですが、今回もちゃんとそのようになっています。
プレゼン資料生成
さて、プロトタイピングだけでは前回のFirebaseと変わりませんのでもう少し色々試してみましょう。
Xの投稿を見ると「v0でプレゼン資料を。。」といったつぶやきがあったのでこれも試してみます。
以下のように依頼してみます。
するとHTMLをゴリゴリ書き始め、「プレゼンテーション」と「全スライド」のタブと共にプレゼンテーション資料が作成されました。
こういうタブが用意されるということはv0の使い方として想定しているのですかね。。？
以前、パワーポイントのCopilotで同様の内容を試した時は表形式での出力が行われなかったのでそこにやや不満を感じていたのですが、今回はちゃんと表も書かれています。
ちなみにVS CodeのCopilotで同じ内容を依頼すると以下のようにMarkdown形式で書いてくれます。これはこれでいいのですが、「プレゼン資料」ではないですね。
他のツールとの比較
ここまで試してみてUI周りに非常に優れている印象が強まってきたので、バカの一つ覚えのBMI計算ツールを作成してもらいました。
以前Firebase Studioで投げたプロンプトと同様「BMIを計算するWebアプリを作成して」というレベルのざっくり指示です。
その結果が以下。
今までと違ってアプリの説明がタイトルの下に書かれているのと、単位をキロとポンドで切り替えられるようになっています。更に「計算」と「BMIについて」というタブがあるので「BMIについて」をクリックします。すると。。
おお。。以下のようにBMIの説明の画面が別途用意されています。注意点までちゃんと書いています。
しかも文字の色もうまく使い分けられていて非常にわかりやすいです。素晴らしいですね。
画面遷移図
ここまで来てこれだけ色々出力できるのであれば「アレ」ができるのでは。。とふと思いまして先ほど作成した「学習トラッカーの画面遷移図を作成して」とお願いしてみました。
以下がその結果です。
と、このように画面遷移図を書いてくれました。ここでダウンロードできるファイルはMermaid形式で作成されていまして（MermaidとはMarkdownライクな記法でダイアログが書けるJavaスクリプトライブラリです）、以下のようにMermaidに対応したビューワーで開けます。
いかがでしょうか。非常にわかりやすく図示されています。これを手を動かすことなくあっという間に生成できるのです。
最後に
UIに強みを持つこのv0、FirebaseやCopilot、Cursorとはまた違った良さを持っています。出力される文章の内容についてもまださわりでしかないものの、他のツールと比べてもかなり詳しく、丁寧な印象を受けました。
Firebase Studioと比べた場合に依頼に対して確認することなくどんどん作業を進めてしまい、インタラクティブなものではありませんでしたのでそこがもう少し。。ではあったものの、それを補って余りある便利さ・魅力を感じました。
このようにFreeプランでも色々使えますので是非皆さまもお試しください。
当社ネクストスケープは新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
