生成AI×UIデザイン勉強会＠千株式会社

Transcript

1. 生成AI×UIデザイン勉強会 プロンプトで差をつけろ！
2. moco（@moco_megane） ものづくり部 ナーサリー開発グループ プロダクトデザイナー
3. 生成AI×UIデザイン やってますか？
4. 本日のゴール 4 ツールの使い方、ツールごとの特性が理解でき2 4 AIを使ってUIデザインを体験す2 4 自分の業務にどう活かすかをイメージできる
5. タイムスケジュール 13:05〜13:20 ツール紹介＋事例デモ（15分） 13:20〜13:40 ミニワーク 「生成AIでUIを作ってみよう」 （20分） 13:40〜13:55 アウトプット発表・ 学んだことのふりかえり（15分）
6. ツール紹介＋事例デモ
7. プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
8. プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
9. プロンプト→UI自動生成 Google Stitch（スティッチ） ‚ 2025年5月リリーˆ ‚ Galileo AIの後続とされていI ‚ テキストや画像からUIを自動生成し、FigmaやGoogleエコ システム（Firebase等）と連@ ‚ Gemini 2.5 Pro搭載で高精度
10. プロンプト→UI自動生成 スタイルを編集できる
11. プロンプト→UI自動生成 v0（ブイゼロ） ƒ Next.jsの開発元として知られるVercel社のサービb ƒ テキストで要件を入力すると、React/Next.jsベースのUIコ ンポーネントやページをAIが自動生i ƒ 生成物はそのままコードとして利用可( ƒ 開発者向けに特化した最新ツール
12. プロンプト→UI自動生成 デザインを直にいじれる！
13. プロンプト→UI自動生成 Claude（クロード） i Anthropic社のAIチャットボッX i UIデザインのアイデア出しや構成案の生成、プロンプトに よるワイヤーフレームのテキスト出力などに活用可能
14. プロンプト→UI自動生成 センスいい気がする
 （個人の感想）
15. プロンプト→UI自動生成 Relume（レリューム） Y サイトマップやワイヤーフレーム、スタイルガイドまでAI で自動生i Y Figma/Webflowエクスポート対応。構成設計や初期ワイ ヤー作成に強み
16. プロンプト→UI自動生成 Webサイトに特化
17. プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
18. 手書き・画像→UI変換 Uizard（ウィザード） h 手書きスケッチやスクリーンショットからUIデザインを自 動生U h プロンプト入力やテンプレートも充e h Figmaエクスポート可
19. 手書き・画像→UI変換 スクショ・手書きワイヤーを参考にできる
20. プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
21. Figma機能・Figma用AIプラグイン Figma Make @ Figma公式のAI機y @ プロンプトからUIデザインやプロトタイプ、Webアプリを 自動生成できE @ 既存デザインの一部をAIで編集・拡張したり、コードを書 かずに公開まで可y @ 他のFigma製品とも連携可能
22. Figma機能・Figma用AIプラグイン デザインを直接編集できる （v0よりさらに直感的？）
23. Figma機能・Figma用AIプラグイン Layermate ™ Figma上でAIチャットに要望を伝えるだけで、UIデザイン を自動生成できる最新プラグイ` ™ 自然言語で画面やパーツの指示ができ、既存レイヤーを参照 しながら一貫性のあるデザインを生T ™ 生成結果はFigma上でそのまま編集可能。
24. Figma機能・Figma用AIプラグイン 一番絵心がある！好き！！ （個人の感想です）
25. ミニワーク 「生成AIでUIを作ってみよう」
26. 宇宙旅行のお役立ちアプリ お題は………
27. デザインを楽しんで！ 〜13:40まで p 失敗してもOK！たくさん失敗して学びましょう4 p 「自分ならではのこだわり」を一つでもいいので盛り込んで みましょう4 p 困った時はチャット等で声かけてください
28. アウトプット発表・ 学んだことのふりかえり
29. 勉強会の様子を記事にまとめました！ https://productblog.sencorp.co.jp/entry/2025/07/hoge 以下をチェック