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

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

Avatar for moco moco
June 28, 2025
3.4k
0

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

Avatar for moco

moco

June 28, 2025

More Decks by moco

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

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
590
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
270
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
230
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
760
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
500
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
240
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k

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 「千　プロダクトブログ」で検索してください 以下をチェック