概要

こんにちは、クラスメソッド製造ビジネステクノロジー部の田中聖也です
2025 年 05 月 30 日 にクラスメソッドの大阪オフィスで開催された Midosuji Tech#6 にて「Vercel v0で爆速デモアプリ作成」というタイトルで登壇しました。

Midosuji Tech とは？？

Midosuji Tech は、クラスメソッド株式会社の大阪オフィスで開催する IT 技術の勉強会です。気になる技術、流行りの技術など、技術全般について自由に語ったり議論するコミュニティです。

毎回テーマを決めて開催しますので、ご興味のあるテーマの際はぜひご参加ください！

https://classmethod.connpass.com/event/353503/

登壇資料/動画

https://youtu.be/o4S4rVWXGoE?feature=shared

Vercel v0の概要

• ユーザーがテキスト(自然言語)で指示を出すことで、AIがUIを生成するAI駆動型UI開発ツール
• 手書きのワイヤーフレーム等の画像をアップロードするだけでスタイルを分析して、希望に近いデザインを生成可能
• 生成された画面は、テキスト指示 or ソースコードから修正可能
• クレジットを消費することでAIに指示ができる

Vercel v0を使って分かったこと

細かなデザインや技術スタックを宣言しない

細かい指示がある = 自分の頭のなかで「こうあるべき100点の姿」があるということだと思います
そうなってくると100点のものと比較してしまうので、何度も修正が必要となってくるため時間が余計にかかります
あくまでクライアントとざっくりとした画面構成を決めるためにVercel v0を使用するので技術スタックやデザインはあくまで、もうちょっと後の工程で考えましょう

修正は方針 + 詳細で指示を出す

大規模で複雑な修正方針をすると全然修正してくれません

悪い例

画面フローを添付画像のように全て修正しなさい
(何十画面もあるような特大画像)

良い例

〇〇機能について以下のように修正しなさい
修正方針としては△△サイトのように修正したいです
具体的な修正内容は以下の内容です
入力画面で「次へ」ボタンが押下されると確認画面に遷移するようにしなさい
確認画面ではショッピングカートの一覧を表示しなさい
また、画面フローに関しては添付画像を参考にしなさい(関係のある部分のみの画像)

間と同じで大きくて雑な処理は理解できない
AIの立場になって修正指示を出しましょう

無理して平行作業しない

Vercel v0は命令量にもよりますが、3~5分ぐらいの処理が走ります
この待機時間で
「せや！この時間で、API仕様書書いたろ！」
「せや！この時間で、経費精算したろ！」
など関係のない作業をしだすとVercel v0に何の作業を依頼を頼んだか忘れてしまいます

まとめ

AIツールで楽しく仕事をしましょう!!