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
33
生成AI×UIデザイン勉強会@千株式会社
moco
June 28, 2025
Tweet
Share
More Decks by moco
See All by moco
インタビューだけじゃない!ユーザーに共感しユーザーの目👀を手に入れるためのインプット
moco1013
0
710
Figmaで印刷物つくってみた
moco1013
4
11k
忙殺されたワーママデザイナーが育休中に勉強して自分を取り戻すまで
moco1013
2
2.8k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Facilitating Awesome Meetings
lara
54
6.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
Code Reviewing Like a Champion
maltzj
524
40k
Designing Experiences People Love
moore
142
24k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Writing Fast Ruby
sferik
628
61k
It's Worth the Effort
3n
184
28k
For a Future-Friendly Web
brad_frost
179
9.8k
Embracing the Ebb and Flow
colly
86
4.7k
Transcript
生成AI×UIデザイン勉強会 プロンプトで差をつけろ!
moco(@moco_megane) ものづくり部 ナーサリー開発グループ プロダクトデザイナー
生成AI×UIデザイン やってますか?
本日のゴール 4 ツールの使い方、ツールごとの特性が理解でき2 4 AIを使ってUIデザインを体験す2 4 自分の業務にどう活かすかをイメージできる
タイムスケジュール 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月リリー Galileo AIの後続とされていI テキストや画像からUIを自動生成し、FigmaやGoogleエコ
システム(Firebase等)と連@ Gemini 2.5 Pro搭載で高精度
プロンプト→UI自動生成 スタイルを編集できる
プロンプト→UI自動生成 v0(ブイゼロ) Next.jsの開発元として知られるVercel社のサービb テキストで要件を入力すると、React/Next.jsベースのUIコ ンポーネントやページをAIが自動生i 生成物はそのままコードとして利用可(
開発者向けに特化した最新ツール
プロンプト→UI自動生成 デザインを直にいじれる!
プロンプト→UI自動生成 Claude(クロード) i Anthropic社のAIチャットボッX i UIデザインのアイデア出しや構成案の生成、プロンプトに よるワイヤーフレームのテキスト出力などに活用可能
プロンプト→UI自動生成 センスいい気がする (個人の感想)
プロンプト→UI自動生成 Relume(レリューム) Y サイトマップやワイヤーフレーム、スタイルガイドまでAI で自動生i Y Figma/Webflowエクスポート対応。構成設計や初期ワイ ヤー作成に強み
プロンプト→UI自動生成 Webサイトに特化
プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
手書き・画像→UI変換 Uizard(ウィザード) h 手書きスケッチやスクリーンショットからUIデザインを自 動生U h プロンプト入力やテンプレートも充e h Figmaエクスポート可
手書き・画像→UI変換 スクショ・手書きワイヤーを参考にできる
プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類
Figma機能・Figma用AIプラグイン Figma Make @ Figma公式のAI機y @ プロンプトからUIデザインやプロトタイプ、Webアプリを 自動生成できE @ 既存デザインの一部をAIで編集・拡張したり、コードを書
かずに公開まで可y @ 他のFigma製品とも連携可能
Figma機能・Figma用AIプラグイン デザインを直接編集できる (v0よりさらに直感的?)
Figma機能・Figma用AIプラグイン Layermate Figma上でAIチャットに要望を伝えるだけで、UIデザイン を自動生成できる最新プラグイ` 自然言語で画面やパーツの指示ができ、既存レイヤーを参照 しながら一貫性のあるデザインを生T 生成結果はFigma上でそのまま編集可能。
Figma機能・Figma用AIプラグイン 一番絵心がある!好き!! (個人の感想です)
ミニワーク 「生成AIでUIを作ってみよう」
宇宙旅行のお役立ちアプリ お題は………
デザインを楽しんで! 〜13:40まで p 失敗してもOK!たくさん失敗して学びましょう4 p 「自分ならではのこだわり」を一つでもいいので盛り込んで みましょう4 p 困った時はチャット等で声かけてください
アウトプット発表・ 学んだことのふりかえり
勉強会の様子を記事にまとめました! https://productblog.sencorp.co.jp/entry/2025/07/hoge 以下をチェック