Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
生成AI×UIデザイン勉強会@千株式会社 社内勉強会
Search
moco
June 28, 2025
0
850
生成AI×UIデザイン勉強会@千株式会社 社内勉強会
moco
June 28, 2025
Tweet
Share
More Decks by moco
See All by moco
インタビューだけじゃない!ユーザーに共感しユーザーの目👀を手に入れるためのインプット
moco1013
0
720
Figmaで印刷物つくってみた
moco1013
4
11k
忙殺されたワーママデザイナーが育休中に勉強して自分を取り戻すまで
moco1013
2
2.8k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Navigating Team Friction
lara
187
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Adopting Sorbet at Scale
ufuk
77
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
YesSQL, Process and Tooling at Scale
rocio
173
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
生成AI×UIデザイン勉強会 プロンプトで差をつけろ!
moco(@moco_megane) ものづくり部 ナーサリー開発グループ プロダクトデザイナー
生成AI×UIデザイン やってますか?
本日のゴール E ツールの使い方、ツールごとの特性が理解でき# E AIを使ってUIデザインを体験す# E 自分の業務にどう活かすかをイメージできる
タイムスケジュール 13:05〜13:20 ツール紹介+事例デモ(15分) 13:20〜13:40 ミニワーク 「生成AIでUIを作ってみよう」 (20分) 13:40〜13:55 アウトプット発表・ 学んだことのふりかえり(15分)
ツール紹介+事例デモ
プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
プロンプト→UI自動生成 Google Stitch(スティッチ) 2025年5月リリーb Galileo AIの後続とされていY テキストや画像からUIを自動生成し、FigmaやGoogleエコ
システム(Firebase等)と連 Gemini 2.5 Pro搭載で高精度
プロンプト→UI自動生成 スタイルを編集できる
プロンプト→UI自動生成 v0(ブイゼロ) Next.jsの開発元として知られるVercel社のサービt テキストで要件を入力すると、React/Next.jsベースのUIコ ンポーネントやページをAIが自動生 生成物はそのままコードとして利用可C
開発者向けに特化した最新ツール
プロンプト→UI自動生成 デザインを直にいじれる!
プロンプト→UI自動生成 Claude(クロード) q Anthropic社のAIチャットボッ1 q UIデザインのアイデア出しや構成案の生成、プロンプトに よるワイヤーフレームのテキスト出力などに活用可能
プロンプト→UI自動生成 センスいい気がする (個人の感想)
プロンプト→UI自動生成 Relume(レリューム) 9 サイトマップやワイヤーフレーム、スタイルガイドまでAI で自動生G 9 Figma/Webflowエクスポート対応。構成設計や初期ワイ ヤー作成に強み
プロンプト→UI自動生成 Webサイトに特化
プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
手書き・画像→UI変換 Uizard(ウィザード) 7 手書きスケッチやスクリーンショットからUIデザインを自 動生2 7 プロンプト入力やテンプレートも充0 7 Figmaエクスポート可
手書き・画像→UI変換 スクショ・手書きワイヤーを参考にできる
プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
Figma機能・Figma用AIプラグイン Figma Make f Figma公式のAI機w f プロンプトからUIデザインやプロトタイプ、Webアプリを 自動生成できB f 既存デザインの一部をAIで編集・拡張したり、コードを書
かずに公開まで可w f 他のFigma製品とも連携可能
Figma機能・Figma用AIプラグイン デザインを直接編集できる (v0よりさらに直感的?)
Figma機能・Figma用AIプラグイン Layermate Figma上でAIチャットに要望を伝えるだけで、UIデザイン を自動生成できる最新プラグイX 自然言語で画面やパーツの指示ができ、既存レイヤーを参照 しながら一貫性のあるデザインを生S 生成結果はFigma上でそのまま編集可能。
Figma機能・Figma用AIプラグイン 一番絵心がある!好き!! (個人の感想です)
ミニワーク 「生成AIでUIを作ってみよう」
宇宙旅行のお役立ちアプリ お題は………
デザインを楽しんで! 〜13:40まで p 失敗してもOK!たくさん失敗して学びましょうX p 「自分ならではのこだわり」を一つでもいいので盛り込んで みましょうX p 困った時はチャット等で声かけてください
アウトプット発表・ 学んだことのふりかえり
勉強会の様子を記事にまとめました! https://productblog.sencorp.co.jp/entry/2025/07/02/085500 「千 プロダクトブログ」で検索してください 以下をチェック