Geminiとv0による高速プロトタイピング

Transcript

1. 東京AI祭 2025.06.26 Geminiとv0による高速プロトタイピング
2. 燈株式会社／Akari Inc. 2021年2月 野呂　侑希 275名(2025年5月現在) 東京都文京区小石川一丁目28番1号 小石川桜ビル４階 AIを中心とする最先端技術の研究開発、パートナー企業とのDX・AI PJの 設計・実施、AI SaaSの開発・提供 企業名 設立 代表 従業員数 本社住所 事業内容 URL https://akariinc.co.jp/ 燈について
3. 卸売‧⼩売業 最先端テクノロジーを産業特化で提供することで、業界ごとの奥深い課題まで解決 建設業DXから事業を開始し、現在は製造業などを対象に含めた、ものづくり産業 DXに進化 事業内容 産業特化DXで深い課題解決 業界特化の最先端テクノロジー 業界の業務や⽂化に特化した最先端技術を社内で独⾃に開発しており、 他社技術では解決できない業界固有の課題を解決可能 例：建設業の専⾨知識や⽂脈を学習したLLM 深い業界専⾨知識 専⾨知識の不⾜によって他社では難しい課題抽出‧ソリューション提案‧ ソリューション開発が可能。 例：設計図⾯を読めるエンジニア, 建設業会計を理解したカスタマーサクセス 蓄積される信頼と実績 特定企業とのプロジェクト事例や導⼊実績が全て、対象業界に おける信頼と実績に変わる。 は弊社内でリーディングカンパニーとの取引実績がある業界(⼀部抜粋) 対象領域の伸⻑ ものづくり 産業 フェーズ1 インフラ 住宅 建築 ⼟⽊ フェーズ2(現在) フェーズ3 宇 宙 産 業 建設業 家具 医療機器 ⾷品 ⾃動⾞ 航空 設備 情報通信業 ⾦融保険業 不動産業
4. サービス紹介 スマートフォンによる道路構造物点検システム （インフロニア‧ホールディングス様） 点検員の⽬視で⾏っていた道路の異常検知を⾞にスマートフォンを 取り付けて⾛⾏するだけでAIが⾃動検知。 点検結果を地図と合わせて表⽰し、 システム上で確認‧保存が可能。 顧客の課題に深く向き合い、様々な技術領域を扱うことで根本課題を解決しています。 47都道府県、約 1000社に提供
5. 開発カルチャー 開発時の⽣成AI利⽤ Lightning Talks 隔週でエンジニアが⾃由にテーマを選び、LT形式で発表する場を設けています。 すでに60回以上開催しており、技術的な知⾒の共有だけでなく、エンジニア同⼠ の相互理解の場にもなっています。 Light up Hack! 定期的に社内ハッカソンを開催し、勤務時間の⼀部を活⽤して新技術の探求やプ ロトタイピングに取り組んでいます。この場から、新規事業に発展した取り組みも ⽣まれています。 Tech Blog 週1回、エンジニアの学びや取り組みをテックブログとして社外に発信していま す。燈の技術スタックや開発⽂化が⾃然と伝わるような、現場の声を重視したコン テンツを意識しています。 Devin 様々な技術カルチャーが燈の成長を加速させています
6. v0の変遷 期間 主な機能・アップデート 利用ケース／効果 2023年10月 • 初公開（ベータ版） • テキストプロンプトから、 React＋Tailwind自動生成 • コンポーネントレベルでの実装 〜2024年前半 • チャット UI導入による対話的作業 • テーマ機能追加でデザイン統一 • 生成結果のブラッシュアップを細かく指示可能 2024年後半〜 • 複数ページ生成対応 • 即デプロイ機能追加 • プロトタイプのワンストップ生成・配布 v0とは...Vercel社が提供する AI搭載のUIデザイン/コード生成ツール
7. Figmaによるプロトタイピングの比較 Figmaによるプロトタイピングは、より専門性の高いデザイナー向きになり、 エンジニアやデザイン未経験者がプロトタイピングを高速に行うには v0が向いている 対象 プログラミング知識の要 求度 デザイン知識の要求度 プログラミング工程 0 ⇨ 1 の速度 エンジニア向 き 修正にプログラミン グの知識が一定必 要 一定水準のデザイ ンは自動的に生成 即コード化 かなり速い デザイナー向 き 基本的に不要 デザイン知識必要 （デザイン未経験のエン ジニアが使うとパワポレ ベルになりがち） プラグインを併用し てもコーディング負 担は残る。 作り込みが必要 v0 figma
8. Geminiとv0を使ったプロトタイピングの流れ ① 設計用定型プロンプト＋ 作りたいアプリケーションを指示 ② 設計に際し不足情報を聞く PdM ③ 出来上がった設計をそのまま渡す ④ プロトタイピング エンジニア ステークホルダー ⑤ プロトタイプのレビュー ⑥ Reactのコードを提供
9. Geminiに入れる設計用プロンプト 役割と目標 : ・与えられた要望・要件に基づいて、モダンな業務用 Webアプリケー ションの画面設計を行う。 ・不足情報があれば、提案として補完するが、与えられた要件と矛盾 しないようにする。 振る舞いとルール : ~~ ユーザーの要望・要件を丁寧に理解し、不明な点は質問する。 ~~ 各画面の目的と要素を明確にし、ワイヤーフレームや UIデザインツー ルを用いて具体的に設計する。 ~~ ポイント① 不明点は対話形式でブラッシュアップさせる。 ポイント② v0が生成できるようにUIパーツを明確化。 設計用定型プロンプト
10. 私は、「旅行プラン自動生成アプリ」を作りたいです。 ＋設計プロンプト Geminiと対話によるブラッシュアップ＋アイディア出し例 以下を教えてください。 1. アプリケーションの主な目的 : 例えば〜〜〜 2. 対象となるユーザー 3. 特に重視したい機能や要件 : 1. 目的地と日数を入れるだけで、おすすめの観光スポットやレストラン、移動手段を 含んだ完璧な旅程を自動で提案 2. 旅行には興味あるが、詳細な日程を組むのが煩雑と感じ苦手な方 3. 地図上で確認する機能
11. Geminiが出した設計をそのままv0に流し込む Geminiの設計を入力 v0のアウトプット
12. 今回出来上がったプロトタイピング 綺麗なローディング画面 シンプルでモダンな結果画面
13. アイディア出し 生成AIによって指示していない機能を搭載することもあるが、 プロトタイピングの段階ではアイディア出しに有効 共有・印刷機能 金額表示 クリックすることでルー トの詳細を表示 日付ごとに タブ切り替え
14. Reactで修正 不要な箇所は変更したい箇所は Reactベースで修正可能
15. まとめ PdM エンジニア デザイナー ワイヤーフレームの叩き台 ベーシックなReactコード シンプルで基本的なデザイン ユーザーヒアリングとプロダクト 戦略 アーキテクチャ設計 ブランディングやコンセプト設計 プロダクト制作における各ロールの一歩目を代替する存在に 専門性高 戦略や設計に注力する人材が求められる 基礎
16. We’re hiring! 熱量の高いメンバーと日本産業の発展を。 そして日本一、世界一の企業へ。 ともに産業の難題に挑みましょう！ AI Engineer Project Manager Software Engineer 募集ロール Mobile Engineer QA Engineer