
【資料公開】第6回 クラメソおおさか IT 勉強会「Midosuji Tech」にて「Vercel v0で爆速デモアプリ作成 」という題名で登壇しました
概要
こんにちは、クラスメソッド製造ビジネステクノロジー部の田中聖也です
2025 年 05 月 30 日 にクラスメソッドの大阪オフィスで開催された Midosuji Tech#6 にて「Vercel v0で爆速デモアプリ作成」というタイトルで登壇しました。
Midosuji Tech とは??
Midosuji Tech は、クラスメソッド株式会社の大阪オフィスで開催する IT 技術の勉強会です。気になる技術、流行りの技術など、技術全般について自由に語ったり議論するコミュニティです。
毎回テーマを決めて開催しますので、ご興味のあるテーマの際はぜひご参加ください!
登壇資料/動画
Vercel v0の概要
- ユーザーがテキスト(自然言語)で指示を出すことで、AIがUIを生成するAI駆動型UI開発ツール
- 手書きのワイヤーフレーム等の画像をアップロードするだけでスタイルを分析して、希望に近いデザインを生成可能
- 生成された画面は、テキスト指示 or ソースコードから修正可能
- クレジットを消費することでAIに指示ができる
Vercel v0を使って分かったこと
細かなデザインや技術スタックを宣言しない
細かい指示がある = 自分の頭のなかで「こうあるべき100点の姿」があるということだと思います
そうなってくると100点のものと比較してしまうので、何度も修正が必要となってくるため時間が余計にかかります
あくまでクライアントとざっくりとした画面構成を決めるためにVercel v0を使用するので技術スタックやデザインはあくまで、もうちょっと後の工程で考えましょう
修正は方針 + 詳細で指示を出す
大規模で複雑な修正方針をすると全然修正してくれません
悪い例
画面フローを添付画像のように全て修正しなさい
(何十画面もあるような特大画像)
良い例
〇〇機能について以下のように修正しなさい
修正方針としては△△サイトのように修正したいです
具体的な修正内容は以下の内容です
入力画面で「次へ」ボタンが押下されると確認画面に遷移するようにしなさい
確認画面ではショッピングカートの一覧を表示しなさい
また、画面フローに関しては添付画像を参考にしなさい(関係のある部分のみの画像)
間と同じで大きくて雑な処理は理解できない
AIの立場になって修正指示を出しましょう
無理して平行作業しない
Vercel v0は命令量にもよりますが、3~5分ぐらいの処理が走ります
この待機時間で
「せや!この時間で、API仕様書書いたろ!」
「せや!この時間で、経費精算したろ!」
など関係のない作業をしだすとVercel v0に何の作業を依頼を頼んだか忘れてしまいます
まとめ
AIツールで楽しく仕事をしましょう!!