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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for moco moco
June 28, 2025
2.3k
0

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

Avatar for moco

moco

June 28, 2025

More Decks by moco

See All by moco
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
200
Claude Codeに介抱されながらアプリ作ってみた
Avatar for moco moco1013
0
430
インタビューだけじゃない！ユーザーに共感しユーザーの目👀を手に入れるためのインプット
Avatar for moco moco1013
0
1k
Figmaで印刷物つくってみた
Avatar for moco moco1013
4
13k
忙殺されたワーママデザイナーが育休中に勉強して自分を取り戻すまで
Avatar for moco moco1013
2
2.8k

Featured

See All Featured
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
170
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
110k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
340
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
340
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
150
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
510

Transcript

  1. 生成AI×UIデザイン勉強会 プロンプトで差をつけろ！

  2. moco（@moco_megane） ものづくり部 ナーサリー開発グループ プロダクトデザイナー

  3. 生成AI×UIデザイン やってますか？

  4. 本日のゴール E ツールの使い方、ツールごとの特性が理解でき# E AIを使ってUIデザインを体験す# E 自分の業務にどう活かすかをイメージできる

  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月リリーb ’ Galileo AIの後続とされていY ’ テキストや画像からUIを自動生成し、FigmaやGoogleエコ

    システム（Firebase等）と連” ’ Gemini 2.5 Pro搭載で高精度

  10. プロンプト→UI自動生成 スタイルを編集できる

  11. プロンプト→UI自動生成 v0（ブイゼロ） € Next.jsの開発元として知られるVercel社のサービt € テキストで要件を入力すると、React/Next.jsベースのUIコ ンポーネントやページをAIが自動生’ € 生成物はそのままコードとして利用可C €

    開発者向けに特化した最新ツール

  12. プロンプト→UI自動生成 デザインを直にいじれる！

  13. プロンプト→UI自動生成 Claude（クロード） q Anthropic社のAIチャットボッ1 q UIデザインのアイデア出しや構成案の生成、プロンプトに よるワイヤーフレームのテキスト出力などに活用可能

  14. プロンプト→UI自動生成 センスいい気がする
 （個人の感想）

  15. プロンプト→UI自動生成 Relume（レリューム） 9 サイトマップやワイヤーフレーム、スタイルガイドまでAI で自動生G 9 Figma/Webflowエクスポート対応。構成設計や初期ワイ ヤー作成に強み

  16. プロンプト→UI自動生成 Webサイトに特化

  17. プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類

  18. 手書き・画像→UI変換 Uizard（ウィザード） 7 手書きスケッチやスクリーンショットからUIデザインを自 動生2 7 プロンプト入力やテンプレートも充0 7 Figmaエクスポート可

  19. 手書き・画像→UI変換 スクショ・手書きワイヤーを参考にできる

  20. プロンプト→UI自動生成 手書き・画像→UI変換 Figma機能・Figma用AIプラグイン ツールの種類

  21. Figma機能・Figma用AIプラグイン Figma Make f Figma公式のAI機w f プロンプトからUIデザインやプロトタイプ、Webアプリを 自動生成できB f 既存デザインの一部をAIで編集・拡張したり、コードを書

    かずに公開まで可w f 他のFigma製品とも連携可能

  22. Figma機能・Figma用AIプラグイン デザインを直接編集できる （v0よりさらに直感的？）

  23. Figma機能・Figma用AIプラグイン Layermate ƒ Figma上でAIチャットに要望を伝えるだけで、UIデザイン を自動生成できる最新プラグイX ƒ 自然言語で画面やパーツの指示ができ、既存レイヤーを参照 しながら一貫性のあるデザインを生S ƒ 生成結果はFigma上でそのまま編集可能。

  24. Figma機能・Figma用AIプラグイン 一番絵心がある！好き！！ （個人の感想です）

  25. ミニワーク 「生成AIでUIを作ってみよう」

  26. 宇宙旅行のお役立ちアプリ お題は………

  27. デザインを楽しんで！ 〜13:40まで p 失敗してもOK！たくさん失敗して学びましょうX p 「自分ならではのこだわり」を一つでもいいので盛り込んで みましょうX p 困った時はチャット等で声かけてください

  28. アウトプット発表・ 学んだことのふりかえり

  29. 勉強会の様子を記事にまとめました！ https://productblog.sencorp.co.jp/entry/2025/07/02/085500 「千　プロダクトブログ」で検索してください 以下をチェック