v0とは
Vercelが開発したAI搭載のUI生成ツールです。ユーザーが日本語などの自然言語で「商品紹介ページを作って」と指示を入力するだけで、WebサイトやアプリのUIを自動的に生成します。
→公式サイト
プロンプトを自然言語で投げるだけで、React、Tailwind CSS、shadcn/uなどの技術スタックに対応した設計をしてくれます！！
感動エピソード
私がv0と出会って感動した話です。
プロローグ
まず、私はHTML/CSS、JavaScriptをある程度書けるものの、UI/UX設計の知識はほぼ無いし（大学のユーザビリティに関する講義と演習を受けた程度）、センスもありません。当然、デザインなんかできるわけでもなく、絵しりとりをやろうもんならネタ枠まっしぐらです。
出会い
ある日、会社の同期とAIエージェント勉強会に行きました。（その時の感想記事も書いているのでよければご覧ください。）
その勉強会で登壇されていた方が、v0を活用したUI/UX設計の話をされていました。（詳しくは、感想記事をご覧ください。）
その時ちょうど、社内の自己紹介用に作るウェブページをどんな設計にしようか悩んでいたので、「コレダ！使ってみよう！！」と、ウキウキでスキップしながら家に帰りました。
フォーリンラブ
帰ってからすぐにPCを開き、「自己紹介ページをシンプルな感じで作って」とプロンプト。
そしたらものの数十秒でデザインを出力してくれるではありませんか。しかも、その後の修正も自然言語で可能。
そんな感じで、軽く5分程度で写真のような自己紹介のページを作ってくれました。
もう、恋に落ちてしまいました。
推しポイント
個人的に、v0に出会って「すげえ！！」と思った点を挙げます。
①自然言語で処理してくれる
最近の生成AIは当たり前かのように自然言語を処理してくれますが、UI/UX設計でやりたいことを伝える上で、自然言語を認識してくれるのは非常にありがたいことだと思います。設計の知識や経験がある人は、ある程度構造化してプロンプトを書くことが可能だと思いますが、私のような人間だとなかなか難しいと思います。そういう点、「〇〇のような設計にしてほしい」とか、「シンプルにしてほしい」とか、割と雑な指示を理解してくれるところ、推しポイントです。
②対話型で修正できる
v0は一回のプロンプトで終わりではなく、最初に出力されたものをベースに対話型で修正を加えることができます。しかも、これも自然言語でOKです。「グリッドの数を変更して」とか、「レスポンシブにして」とか、「バララックススタイルにして」など、ページ自体のスタイルもあれこれ一緒に考えながら修正できます。まるで、言ったことを秒でデザインに起こし、コーディングまでしてくれるとんでもない人と会話してるみたいです。
③外部サービスとの連携
GithubやFigmaなど、設計やデザインの際によく使うツールとの連携が簡単にできます。
例えば、Figmaで作ったデザイン案を読み込ませて、コーディングしてもらい、対話型で修正することもできます。デザインがある程度できる人や、社内にデザイナーがいる場合にとても便利だと思います。私も、Figmaでデザインを考えていたこともあるので、「その時に出会っていたかったなあ」という想いです。これから試していきます。
また、Githubとの連携も強く、生成したコードをそのままGithubリポジトリにアップロードしてくれます。これは本当に便利で、アップロードしたものをすぐに自分のローカルにcloneし、爆速で開発を始めることができます。
これからの私とv0
自分はこれから本格的にWebサービスと関わっていく立場なので、UI/UX設計やデザインは避けて通れません。v0のようなものに頼り切りも可能かもしれませんが、生成AIが作ったものに責任を持つのは人間です。したがって、敬愛するv0が作ってくれたものも、自分が責任を持ってあげなきゃいけません。v0の力を借りつつ自分でも勉強して、これからもうまく付き合えていけたらなと思います。
おわりに
私がv0とフォーリンラブした話、いかがだったでしょうか。感動は伝わりましたでしょうか。本記事はv0に出会った感動と、推しポイントを紹介することに重きを起きましたので、実際に使ってみた詳細な話は別記事にしようと思います。また、「こんなこともできる！」や「こんな使い方してる！」などあれば聞きたいです。
最後までお読みいただきありがとうございました^_^