業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発

2025年4月9日に、「AIとデザインのセカンドステージ」で発表した資料です。

Transcript

1. AIとデザインのセカンドステージ 鈴木慎吾 株式会社つみき Filmarks リードデザイナー |
2. #aidesign_2nd デザイナーが
 AIをどうやって
 使っていくか？ コンテンツライティング リサーチ後の分析 コンセプトの発散 デザインの説明資料 調査資料をまとめる ドキュメントの作成 業務計画の作成 スケジュール調整 ブレスト相手 インタビューの要約
3. #aidesign_2nd 既存業務の
 効率化だけじゃ 物足りない！ コンテンツライティング リサーチ後の分析 コンセプトの発散 デザインの説明資料 調査資料をまとめる ドキュメントの作成 業務計画の作成 スケジュール調整 ブレスト相手 インタビューの要約
4. #aidesign_2nd もっと、 デザイナーの仕事の幅を 広げるような使い方がないか？
5. #aidesign_2nd 事例１ 社内の課題を元に
 ChatGPTで Figmaプラグイン開発 デザイナーの仕事の幅を広げるには？
6. 社内の課題を元にChatGPTでFigmaプラグイン開発 #aidesign_2nd チームの課題 解決策のアイディア デザイナーwaka2kiさん デザイン後に、用語一覧をみながら 文言確認することが抜けがち Figmaプラグインをつくってみる
7. 社内の課題を元にChatGPTでFigmaプラグイン開発 #aidesign_2nd プロトタイプ その日のうちに、ChatGPTを使ってプロトタ イプを開発。 基本となるインタラクションと 誤字判定のロジックが決定。 実現性 インタラクション 誤字判定のロジック
8. 社内の課題を元にChatGPTでFigmaプラグイン開発 #aidesign_2nd デザイン調整 機能追加 リリース プロトタイプを元に、 デザイン調整と機能追 加を行いFigmaプラグインとして公開。 
 基本機能がはじめに検証されていたため、 素早く進めることができた。 ※詳細：Figmaのテキストを自動チェックする用語統一プラグインを作った
 https://note.com/shingo2000/n/nb4a46f000e4e
9. #aidesign_2nd デザイナーの仕事の幅を広げるには？ 事例２ Cursorで、 触覚フィードバックの
 検証用アプリを開発
10. Cursorで触覚フィードバックの検証アプリを開発 #aidesign_2nd チームの課題 自社アプリに効果的に触覚フィードバックを 取り入れたい。 
 OSのガイドラインは確認したが、触ってみな いとイメージが沸かない。
11. Cursorで触覚フィードバックの検証アプリを開発 #aidesign_2nd プロトタイプ Cursor（AIコードエディタ） で検証用iOSアプリを開発 CursorはチャットでAIとやり取りしながら、開 発できるコードエディタ 参考：Vibe Coding for mobile with Cursor AI https://uxplanet.org/vibe-coding-with- cursor-ai-52f5023bc59a
12. Cursorで触覚フィードバックの検証アプリを開発 #aidesign_2nd Xcodeでプロジェクトファイルを新規作成 Cursorで開き、実装を依頼 プロジェクトファイルを確認した上で実装を開始 Xcodeでプロジェクトをビルドして実機確認 必要に応じて修正依頼 指示に基づいて修正 修正依頼を数回繰り返して完成！
13. Cursorで触覚フィードバックの検証アプリを開発 #aidesign_2nd 完成 機能要件の検討 触覚フィードバックを実機確認できる
 iOSアプリが１時間ほどで完成 ˆ 触覚フィードバックの種類を確‚ ˆ カスタムパラメータの設u ˆ カスタムパターンの作成と確認 機能要件の検討に素早く進むことができる ※詳細：Cursorで触覚フィードバックの検証アプリを開発した
 https://note.com/shingo2000/n/n2a0e148824ba
14. #aidesign_2nd プロトタイプを作ってみて、 初めてわかること 事例１ T テキストチェックのFigmaプラグイン の実現E T どんなインタラクションを備えている と実用的になるか8 T テキスト判定にどんなロジックが必 要か？ 事例2 T iOSで標準提供されている触覚 フィードバックの種™ T カスタムする場合はどんなパラメー タがあるか8 T パラメータの変更が触覚にどう影響 するか？
15. #aidesign_2nd プロトタイプ開発 = 試して気づく発見的なアプローチ プロトタイプ開発 = 試して気づく、 発見的なアプローチ 「とりあえず作ってみる」 姿勢は、 デザイナーの得意領域 AIと一緒にプロトタイプ開発すると“試せること”の幅が大きく広がる
16. #aidesign_2nd AIと一緒にプロトタイプ開発して
 「とりあえず作ってみる」 の幅を広げよう
17. #aidesign_2nd Vibe Coding for mobile with Cursor AI
 https://uxplanet.org/vibe-coding-with- cursor-ai-52f5023bc59a アプリエンジニア／Railsエンジニア ／データエンジニア https://www.wantedly.com/ companies/tsumiki/projects Filmarksの
 エンジニアを募集中 5/11 (日) 12時 @面白法人カヤック https://friends.figma.com/events/ details/figma-shonan-presents- shonan-config-watch-party-2025 Config Watch Party 2025 Friends of Figma Shonan The Return of the UX Generalist https://www.nngroup.com/articles/ return-ux-generalist/ 参考資料
18. ありがとうございました @shingo2000 note.com/shingo2000 #aidesign_2nd