Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by Shinya Masadome(東京AI祭)

Other Decks in Technology

Transcript

  1. 卸売‧⼩売業 最先端テクノロジーを産業特化で提供することで、業界ごとの奥深い課題まで解決 建設業DXから事業を開始し、現在は製造業などを対象に含めた、ものづくり産業 DXに進化 事業内容 産業特化DXで深い課題解決 業界特化の最先端テクノロジー 業界の業務や⽂化に特化した最先端技術を社内で独⾃に開発しており、 他社技術では解決できない業界固有の課題を解決可能 例:建設業の専⾨知識や⽂脈を学習したLLM

    深い業界専⾨知識 専⾨知識の不⾜によって他社では難しい課題抽出‧ソリューション提案‧ ソリューション開発が可能。 例:設計図⾯を読めるエンジニア, 建設業会計を理解したカスタマーサクセス 蓄積される信頼と実績 特定企業とのプロジェクト事例や導⼊実績が全て、対象業界に おける信頼と実績に変わる。 は弊社内でリーディングカンパニーとの取引実績がある業界(⼀部抜粋) 対象領域の伸⻑ ものづくり 産業 フェーズ1 インフラ 住宅 建築 ⼟⽊ フェーズ2(現在) フェーズ3 宇 宙 産 業 建設業 家具 医療機器 ⾷品 ⾃動⾞ 航空 設備 情報通信業 ⾦融保険業 不動産業
  2. 開発カルチャー 開発時の⽣成AI利⽤ Lightning Talks 隔週でエンジニアが⾃由にテーマを選び、LT形式で発表する場を設けています。 すでに60回以上開催しており、技術的な知⾒の共有だけでなく、エンジニア同⼠ の相互理解の場にもなっています。 Light up Hack!

    定期的に社内ハッカソンを開催し、勤務時間の⼀部を活⽤して新技術の探求やプ ロトタイピングに取り組んでいます。この場から、新規事業に発展した取り組みも ⽣まれています。 Tech Blog 週1回、エンジニアの学びや取り組みをテックブログとして社外に発信していま す。燈の技術スタックや開発⽂化が⾃然と伝わるような、現場の声を重視したコン テンツを意識しています。 Devin 様々な技術カルチャーが燈の成長を加速させています
  3. v0の変遷 期間 主な機能・アップデート 利用ケース/効果 2023年10月 • 初公開(ベータ版) • テキストプロンプトから、 React+Tailwind自動生成

    • コンポーネントレベルでの実装 〜2024年前半 • チャット UI導入による対話的作業 • テーマ機能追加でデザイン統一 • 生成結果のブラッシュアップを細かく指示可能 2024年後半〜 • 複数ページ生成対応 • 即デプロイ機能追加 • プロトタイプのワンストップ生成・配布 v0とは...Vercel社が提供する AI搭載のUIデザイン/コード生成ツール
  4. Figmaによるプロトタイピングの比較 Figmaによるプロトタイピングは、より専門性の高いデザイナー向きになり、 エンジニアやデザイン未経験者がプロトタイピングを高速に行うには v0が向いている 対象 プログラミング知識の要 求度 デザイン知識の要求度 プログラミング工程 0

    ⇨ 1 の速度 エンジニア向 き 修正にプログラミン グの知識が一定必 要 一定水準のデザイ ンは自動的に生成 即コード化 かなり速い デザイナー向 き 基本的に不要 デザイン知識必要 (デザイン未経験のエン ジニアが使うとパワポレ ベルになりがち) プラグインを併用し てもコーディング負 担は残る。 作り込みが必要 v0 figma
  5. Geminiに入れる設計用プロンプト 役割と目標 : ・与えられた要望・要件に基づいて、モダンな業務用 Webアプリケー ションの画面設計を行う。 ・不足情報があれば、提案として補完するが、与えられた要件と矛盾 しないようにする。 振る舞いとルール :

    ~~ ユーザーの要望・要件を丁寧に理解し、不明な点は質問する。 ~~ 各画面の目的と要素を明確にし、ワイヤーフレームや UIデザインツー ルを用いて具体的に設計する。 ~~ ポイント① 不明点は対話形式でブラッシュアップさせる。 ポイント② v0が生成できるようにUIパーツを明確化。 設計用定型プロンプト
  6. 私は、「旅行プラン自動生成アプリ」を作りたいです。 +設計プロンプト Geminiと対話によるブラッシュアップ+アイディア出し例 以下を教えてください。 1. アプリケーションの主な目的 : 例えば〜〜〜 2. 対象となるユーザー

    3. 特に重視したい機能や要件 : 1. 目的地と日数を入れるだけで、おすすめの観光スポットやレストラン、移動手段を 含んだ完璧な旅程を自動で提案 2. 旅行には興味あるが、詳細な日程を組むのが煩雑と感じ苦手な方 3. 地図上で確認する機能
  7. まとめ PdM エンジニア デザイナー ワイヤーフレームの叩き台 ベーシックなReactコード シンプルで基本的なデザイン ユーザーヒアリングとプロダクト 戦略 アーキテクチャ設計

    ブランディングやコンセプト設計 プロダクト制作における各ロールの一歩目を代替する存在に 専門性高 戦略や設計に注力する人材が求められる 基礎