MidosujiTech #6 Vercel v0で爆速デモアプリ開発

Midosuji Tech #6の登壇資料

Transcript

1. 2025/05/30 クラスメソッド株式会社 製造ビジネステクノロジー部 ⽥中聖也 Midosuji Tech #6 〜⽣成AIとの付き合い⽅〜 Vercel v0で爆速デモアプリ作成
2. ⾃⼰紹介 2 • 2017.04~2021.07 製造業の⽣産技術部 ◦ 設備の保全全般(事後,予防,予知) ◦ ⾃動⾞向け製品の試作&⽴ち上げ ◦ IATF16949取得に向けた取り組み • 2021.08~2025.01 SES ◦ AI, OCRを活⽤した製造業向けの業務アプリ ◦ AWSを活⽤したWebシステム • 2025.02~ クラスメソッド⼊社  ◦ 製造業メーカー様 ▪ 業務フロー整備 ▪ 提案 ▪ アプリ開発 • 部署 ◦ 製造ビジネステクノロジー部 • 名前（ニックネーム） ◦ ⽥中聖也 • 出⾝‧住まい ◦ ⼤阪⽣まれ⾹川育ち⼤阪住み • 家族構成‧趣味 ◦ 3⼈家族(1歳7か⽉の娘) ◦ ラジオ
3. ⽬次 3 • Vercel v0とは? • ⾃分なりのVercel v0の使い⽅ • Vercel v0の何が良いのか ◦ ⾃分にとってのメリットは? ◦ 誰がどんな場⾯で嬉しくなるのか? • Vercel v0を使って分かったこと(How to) ◦ デザインや技術スタックは無理に宣⾔しない ◦ 無理して平⾏作業しない ◦ 修正は修正⽅針 + 詳細で指⽰を出す • Vercel v0 + 他のAIツール ◦ Vercel v0への指⽰プロンプトを考えるAIを使う • まとめ ⼈⽣2度⽬の登壇ですので緊張してます。温かく⾒守ってください
4. そもそも
5. Vercel v0ご存知ですか? 5 Vercel v0 聞いたことあるよ!!
6. Vercel v0ご存知ですか? 6 Vercel v0 使ったことあるよ!!
7. Vercel v0とは?
8. Vercel v0とは? 8 概要 • ユーザーがテキスト(⾃然⾔語)で指⽰を 出すことで、AIがUIを⽣成するAI駆動 型UI開発ツール • ⼿書きのワイヤーフレーム等の画像を アップロードするだけでスタイルを分 析して、希望に近いデザインを⽣成可 能 • ⽣成された画⾯は、テキスト指⽰ or ソースコードから修正可能 • クレジットを消費することでAIに指⽰ ができる 料⾦体系 無料プラン：200[クレジット/⽉] 有料プラン：5,000[クレジット/⽉] 20[ドル/⽉]
9. Vercel v0ご存知ですか? 9
10. ⾃分なりのVercel v0の使い⽅
11. ⾃分なりのVercel v0の使い⽅ 11 上流⼯程で使⽤しています 企画‧要件定義 お客様からのヒアリング後に解決したい問 題と解決策を仮説で考えて画⾯に落とし込 みます 外部設計 実際にアプリを使う⼈に画⾯を⾒せなが ら、フィードバック頂いた内容をその場で 反映させる 個⼈的には、この使い⽅が⾮常に体験としてよ かったです アプリを使⽤する側もすぐに画⾯に反映されて いるのが分かるのでチームとしてまとまる
12. Vercel v0の何が良いのか
13. Vercel v0の何が良いのか 13 個⼈として • デモアプリ作成の⼯数削減 私はFrontendの実装経験が乏しく、デザイン系の知識が全くないので デモアプリを作るろうとすると、かなりの⼯数がかかる(1か⽉ぐらい) Vercel v0を使えば3時間程度あれば、⾃分が作りたいデモアプリが作れる ビジネスとして • デモアプリを含めた素早い提案が可能 • たたき台レベルでのソースコードがあるのためスタートダッシュが早い • ⼀緒に画⾯を修正するのでクライアントとの認識齟齬が少ない* *クライアントは既にアプリが出来ていると勘違いする可能性が⾼いので、そこは「これは動 く画⾯だけです」とかで認識を合わせましょう
14. Vercel v0を使って分かったこと
15. Vercel v0を使って分かったこと 15 デザインや技術スタックは無理に宣⾔しない (悪い例) 技術スタックはReactをベースに‧‧‧‧して、ライブラリは‧‧‧‧ デザインはポップ調で‧‧‧‧、ベースカラーは‧‧‧‧ ⾃分のイメージとかけ離れた、使いづらい画⾯が⽣成される (良い例) デザインは極⼒シンプルにしなさい *技術スタックの部分は何も記載しない あくまでクライアントとざっくりとした画⾯構成を決めるためにVercel v0を使⽤するので技 術スタックやデザインはあくまで、もうちょっと後の⼯程で考えましょう
16. Vercel v0を使って分かったこと 16 修正は⽅針 + 詳細で指⽰を出す (悪い例) 画⾯フローを添付画像のように全て修正しなさい (何⼗画⾯もあるような特⼤画像) 全然、修正されていない‧‧‧ (良い例) 〇〇機能について以下のように修正しなさい 修正⽅針としては△△サイトのように修正したいです 具体的な修正内容は以下の内容です 1. ⼊⼒画⾯で「次へ」ボタンが押下されると確認画⾯に遷移するようにしなさい 2. 確認画⾯ではショッピングカートの⼀覧を表⽰しなさい また、画⾯フローに関しては添付画像を参考にしなさい(関係のある部分のみの画像) ⼈間と同じで⼤きくて雑な処理は理解できない AIの⽴場になって修正指⽰を出しましょう
17. Vercel v0を使って分かったこと 17 無理して平⾏作業しない Vercel v0は命令量にもよりますが、3~5分ぐらいの処理が⾛ります この待機時間で 「せや！この時間で、API仕様書書いたろ！」 「せや！この時間で、経費精算したろ！」 など関係のない作業をしだすと‧‧‧ 作業終わったで 何の作業依頼したっけ？ なんで、この作業依頼したんだ？ コンテキストスイッチの切り替えが⼤変
18. Vercel v0 + 他のAIツール
19. Vercel v0 + 他のAIツール 19 要件から機能に落とし込むのが⾯倒‧‧‧ Vercel v0に指⽰するプロンプトどうすればいいんや‧‧‧ そこもAIを使っていきましょう!! (⾃分なりの⽅法) ① Gemini使って要件から機能等に落とし込む ② Claude Sonnet 4 Thinkingで①からVercel v0に指⽰するプロンプトを作成 ③ ②のプロンプトをVercel v0で実⾏
20. Vercel v0 + 他のAIツール 20
21. まとめ
22. まとめ 22 • Vercel v0は⾃然⾔語からAIにUIを⽣成させるツール • Vercel v0の効果 ◦ デモアプリの作成時間削減 ◦ クライアントへの素早い提案 ◦ クライアントと⼀緒に画⾯を作成できる • Vercel v0はこうやって使おう ◦ 技術スタックやデザインは無理に指定しない ◦ 処理待ち時間で他のタスクをしない ◦ 修正は⽅針 + 詳細で指⽰を出す • 他のAIツールと組み合わせて ◦ 機能要件の落とし込み ◦ Vercel v0へのプロンプトを考えてもらう AIツールで楽しく仕事をしましょう!!