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

by moco

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

タイムスケジュール 13:05〜13:20 ツール紹介＋事例デモ（15分） 13:20〜13:40 ミニワーク「生成AIでUIを作ってみよう」（20分） 13:40〜13:55 アウトプット発表・学んだことのふりかえり（15分）

Slide 6

Slide 6 text

ツール紹介＋事例デモ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

プロンプト→UI自動生成 Google Stitch（スティッチ） 2025年5月リリーb Galileo AIの後続とされていY テキストや画像からUIを自動生成し、FigmaやGoogleエコシステム（Firebase等）と連 Gemini 2.5 Pro搭載で高精度

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Figma機能・Figma用AIプラグイン Figma Make f Figma公式のAI機w f プロンプトからUIデザインやプロトタイプ、Webアプリを自動生成できB f 既存デザインの一部をAIで編集・拡張したり、コードを書かずに公開まで可w f 他のFigma製品とも連携可能

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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