2025/10/10 Figma MakeではじめるバイブUIデザイン

Transcript

1. “Figma Make”で はじめる バイブUIデザイン 2025.10.10
2. 本日のアジェンダ 1 バイブUIデザインとは？ 2 なぜFigma Makeなのか？ 3 デザインの課題と解決策 4 Figma Makeによるワークフロー 5 Figma Makeの長所と短所 © 2025 MAKE A CHANGE Inc. 1
3. 岡村 匡洋 ‧株式会社MAKE A CHANGE / 代表取締役 ‧1982年⽣ ‧ITエンジニア、PMとして10年以上の経験を持つ ‧AI案件には2019年から携わっている ‧PMP（プロジェクトマネージメントの国際資格）取得済 ‧⾃社プロダクト HR Tech SaaSのイクジット経験あり ‧ラッコ🦦、アメリカビーバー🦫 好き 著書 「ゼロからわかる⽣成AI駆動開発⼊⾨」 2025年1⽉発売 オカムラ X(Twitter)アカウント プロフィール © 2025 MAKE A CHANGE Inc.
4. 01 1. バイブUIデザインとは？ © 2025 MAKE A CHANGE Inc. 3
5. バイブUIデザインの定義 “バイブ（ノリ）でUIデザインを作成していく手法 — 私の造語です © 2025 MAKE A CHANGE Inc. 4
6. 本日のタイトルの変遷 ここに至るまでの道のり 1 「“Cursor”, “Claude Code”, “Codex” ではじめるバイブUIデザイン」 2 「“BOLT.new” ではじめるバイブUIデザイン」 3 「“Figma Make”ではじめるバイブ UIデザイン」 © 2025 MAKE A CHANGE Inc. 5 元のデザインはまぁまぁいい。編集はそこそこ。 Figma連携できるがクオリティが微妙・・・ そこそこのものはできる。が、編集はしずらい。 手軽にはじめられるので良き
7. 02 2. なぜFigma Makeなのか？ © 2025 MAKE A CHANGE Inc. 6
8. Figma Makeとは？ • 自然言語のプロンプト（指示）を入力するだけで、 アプリや Webサイトのプロトタイプを 　AIが自動生成 するFigmaの新しいAI搭載ツール © 2025 MAKE A CHANGE Inc. 15
9. Figma Makeに至るまでに各ツールでデザインのクオリティを試しました 題材として「AIアインシュタインとの音声対話アプリ」の UIデザインを以下プロンプトで生成 いまから「AIアインシュタインとの音声対話アプリ」の UIデザインを作成します。 #デザインについて 添付画像のようなイメージを持っているが、以下の要件に必要と思われるものは適宜追加 して。 デザインはシンプルながら洗練されたデザインで白地にメインカラーを #77CDE9 として。 #主な機能 ビデオ通話のようにアインシュタインと対話できる機能。 アバターは写真でOK ただしAIが話している時は話していることが分かるビジュアルエフェクトを表示 （以下略） © 2025 MAKE A CHANGE Inc. 7
10. 各ツールの生成結果比較 以下のツールで試しました Figma Make Codex Cursor Claude Code BOLT.new © 2025 MAKE A CHANGE Inc. 8
11. 各ツールの生成結果比較 Figma Make © 2025 MAKE A CHANGE Inc. 8 いい感じ
12. 各ツールの生成結果比較 8 想像以上に良い
13. 各ツールの生成結果比較 8 シンプル。悪くない。
14. 各ツールの生成結果比較 8 これは・・・・
15. 各ツールの生成結果比較 8 こちらも悪くない。
16. Figma MakeがバイブUIデザイン向き 試行錯誤の上、“Figma Make”が以下の点で優れ ているとの結論 ・導入の簡単さとクオリティのバランスが良い ・FigmaがUIUXツールだけあって 　一番手直しがしやすい 正直、Codexのデザインは中々いい・・・ © 2025 MAKE A CHANGE Inc. 9
17. 03 3. デザインの課題と解決策 © 2025 MAKE A CHANGE Inc. 10
18. AI駆動開発のデザインにおける 4つの課題 ① AI臭の問題 生成AIで作ったUIは独特のクセがあり、オリジナリティに欠ける ② UIデザインへのモチベーションの問題 UIデザインを一から作る気力がおきない（現役デザイナー談） ③ スキルの問題 そもそもデザイナーではないので UIデザインができない © 2025 MAKE A CHANGE Inc. 11 ④ Figmaや画像でデザインを作っても実装でズレる AIツール（CursorやClaude Codeなど）で反映しようとするとズレる
19. バイブUIデザインによる解決策 Q. ① AI臭をなくせるか？ A. これは正直、人の手を加える他ないかも ・・・ Q. ②と③ やる気とスキルがなくても大丈夫か？ A. バイブUIデザインがまさに解決策 となる。まずはAIに作らせることで、最初の大きなハードルを越えられる Q. ④ 実装ズレはなくなるか？ A. Figma Makeからソースコードを DLできる為、デザインと実装の乖離を抑えることが可能 © 2025 MAKE A CHANGE Inc. 12 AI 臭
20. 04 4. Figma Makeによるワークフロー © 2025 MAKE A CHANGE Inc. 13
21. バイブUIデザインの流れ 驚くほどシンプルで簡単な4ステップ 1 Figma MakeでUIデザインを生成 2 Figma Makeで作り込む 3 Figma MakeからソースコードをDLする 4 Cursor等で起動し機能実装スタート 🎉 © 2025 MAKE A CHANGE Inc. 14
22. 1. Figma MakeでUIデザインを生成 © 2025 MAKE A CHANGE Inc. 14 ①プロンプトを入力 いまから「AIアインシュタインとの音声対話アプリ」の UIデザインを作成します。 #デザインについて 添付画像のようなイメージを持っているが、以下の要件に必要と思われるものは適宜 追加して。 デザインはシンプルながら洗練されたデザインで白地にメインカラーを #77CDE9 とし て。 #主な機能 ビデオ通話のようにアインシュタインと対話できる機能。 アバターは写真で OK ただしAIが話している時は話していることが分かるビジュアルエフェクトを表示 （以下略）
23. 1. Figma MakeでUIデザインを生成 © 2025 MAKE A CHANGE Inc. 14
24. 2. Figma Makeで作り込む（プロンプト） © 2025 MAKE A CHANGE Inc. 14 ①「Point and Edit」をクリック ②修正したい部分を選択 ③選択部分に対して修正を指示（例：「背景色をグ レーにして」など）
25. 2. Figma Makeで作り込む（ GUI） © 2025 MAKE A CHANGE Inc. 14 ①スタンダードな修正（フォント 　、文字色、サイズ、など）は 　直接指定が可能
26. 2. Figma Makeで作り込む © 2025 MAKE A CHANGE Inc. 14 アニメーションもいい感じに実装してくれる。これは他の AIツールより頭一つ抜けている印象
27. 3. Figma Makeからソースコードを DLする © 2025 MAKE A CHANGE Inc. 14 ①「Code」をクリック ②DLアイコンを クリック
28. 4. Cursor等で起動し機能実装スタート 🎉 © 2025 MAKE A CHANGE Inc. 14
29. 05 5. Figma Makeの長所と短所 © 2025 MAKE A CHANGE Inc. 16
30. Figma Makeの良いところ Point and Edit コンポーネントを 指定して修正指示が可能 基本的な修正はプロンプトを 使わないでも可能 リッチなアニメーション アニメーションも いい感じで実装してくれる ソースコード DL TypeScript+Reactの コードをDL可能 スムーズに開発へ移行可能 © 2025 MAKE A CHANGE Inc. 17
31. Figma Makeの懸念点 （課金すれば解決します・・・） ① GUIでの直接編集が不可 本家Figmaのようなドラッグ＆ドロップでの 調整はできない → 近日中に本家 Figmaへのコピー機能 を実装予定 が実装されました ② 無料枠の制限 トークン数の上限があり チームでの共有も不可 © 2025 MAKE A CHANGE Inc. 18
32. 06 6. まとめと今後の展望 © 2025 MAKE A CHANGE Inc. 19
33. 本日のまとめ バイブUIデザイン Figma Makeで自然言語からUIデザインを高速生成 インタラクティブな修正・リッチなアニメーション コンポーネントを指定してチャットで修正指示が出せる。アニメーションもリッチ。 バイブUIデザイン → バイブコーディングにシームレスな移行 UIデザイン完了後はコードを DLしてCursor等で機能実装へ🚀 © 2025 MAKE A CHANGE Inc. 20
34. 今後の展望 FigmaがバイブUIデザイン、自然言語による UIデザイン機能を現在開発中 © 2025 MAKE A CHANGE Inc. 21 これが実装されればバイブ UIデザインが捗る🚀🚀🚀
35. 07 おまけ: 他のバイブ UIデザイン手法 © 2025 MAKE A CHANGE Inc. 22
36. LayermateとFigma-Context-MCP • Layermate 自然言語でFigma上でデザインを生成する プラグイン 👉Figma生成→調整→MCPでCursorに連携、という流れも可能。 Figma Makeに比べて手順が複雑 © 2025 MAKE A CHANGE Inc. 23 • Figma-Context-MCP Figmaのデザイン情報をAIコーディングツー ル（Cursor等）に直接連携することが可能
37. 08 8. 宣伝 © 2025 MAKE A CHANGE Inc. 22
38. 弊社（株式会社 MAKE A CHANGE）の取り組みについて • AI駆動PM（プロジェクトマネジメント）にも注力しています • AI駆動開発者を集めた専門企業を目指します • AI駆動開発、AI駆動PM やりたい方はお声がけください！ 23 コーポレートサイト オカムラ X(Twitter)アカウント
39. ご清聴ありがとうございました。