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

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

Avatar for moco moco
June 28, 2025
0
2.3k

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

Avatar for moco

moco

June 28, 2025
Tweet

More Decks by moco

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

Featured

See All Featured
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
150
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
96
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
190
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
330
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
380
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.1k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
150
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.5k

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