Slide 1

Slide 1 text

AIとデザインのセカンドステージ 鈴木慎吾 株式会社つみき Filmarks リードデザイナー |

Slide 2

Slide 2 text

#aidesign_2nd デザイナーが
 AIをどうやって
 使っていくか? コンテンツライティング リサーチ後の分析 コンセプトの発散 デザインの説明資料 調査資料をまとめる ドキュメントの作成 業務計画の作成 スケジュール調整 ブレスト相手 インタビューの要約

Slide 3

Slide 3 text

#aidesign_2nd 既存業務の
 効率化だけじゃ 物足りない! コンテンツライティング リサーチ後の分析 コンセプトの発散 デザインの説明資料 調査資料をまとめる ドキュメントの作成 業務計画の作成 スケジュール調整 ブレスト相手 インタビューの要約

Slide 4

Slide 4 text

#aidesign_2nd もっと、 デザイナーの仕事の幅を 広げるような使い方がないか?

Slide 5

Slide 5 text

#aidesign_2nd 事例1 社内の課題を元に
 ChatGPTで Figmaプラグイン開発 デザイナーの仕事の幅を広げるには?

Slide 6

Slide 6 text

社内の課題を元にChatGPTでFigmaプラグイン開発 #aidesign_2nd チームの課題 解決策のアイディア デザイナーwaka2kiさん デザイン後に、用語一覧をみながら 文言確認することが抜けがち Figmaプラグインをつくってみる

Slide 7

Slide 7 text

社内の課題を元にChatGPTでFigmaプラグイン開発 #aidesign_2nd プロトタイプ その日のうちに、ChatGPTを使ってプロトタ イプを開発。 基本となるインタラクションと 誤字判定のロジックが決定。 実現性 インタラクション 誤字判定のロジック

Slide 8

Slide 8 text

社内の課題を元にChatGPTでFigmaプラグイン開発 #aidesign_2nd デザイン調整 機能追加 リリース プロトタイプを元に、 デザイン調整と機能追 加を行いFigmaプラグインとして公開。 
 基本機能がはじめに検証されていたため、 素早く進めることができた。 ※詳細:Figmaのテキストを自動チェックする用語統一プラグインを作った
 https://note.com/shingo2000/n/nb4a46f000e4e

Slide 9

Slide 9 text

#aidesign_2nd デザイナーの仕事の幅を広げるには? 事例2 Cursorで、 触覚フィードバックの
 検証用アプリを開発

Slide 10

Slide 10 text

Cursorで触覚フィードバックの検証アプリを開発 #aidesign_2nd チームの課題 自社アプリに効果的に触覚フィードバックを 取り入れたい。 
 OSのガイドラインは確認したが、触ってみな いとイメージが沸かない。

Slide 11

Slide 11 text

Cursorで触覚フィードバックの検証アプリを開発 #aidesign_2nd プロトタイプ Cursor(AIコードエディタ) で検証用iOSアプリを開発 CursorはチャットでAIとやり取りしながら、開 発できるコードエディタ 参考:Vibe Coding for mobile with Cursor AI https://uxplanet.org/vibe-coding-with- cursor-ai-52f5023bc59a

Slide 12

Slide 12 text

Cursorで触覚フィードバックの検証アプリを開発 #aidesign_2nd Xcodeでプロジェクトファイルを新規作成 Cursorで開き、実装を依頼 プロジェクトファイルを確認した上で実装を開始 Xcodeでプロジェクトをビルドして実機確認 必要に応じて修正依頼 指示に基づいて修正 修正依頼を数回繰り返して完成!

Slide 13

Slide 13 text

Cursorで触覚フィードバックの検証アプリを開発 #aidesign_2nd 完成 機能要件の検討 触覚フィードバックを実機確認できる
 iOSアプリが1時間ほどで完成 ˆ 触覚フィードバックの種類を確‚ ˆ カスタムパラメータの設u ˆ カスタムパターンの作成と確認 機能要件の検討に素早く進むことができる ※詳細:Cursorで触覚フィードバックの検証アプリを開発した
 https://note.com/shingo2000/n/n2a0e148824ba

Slide 14

Slide 14 text

#aidesign_2nd プロトタイプを作ってみて、 初めてわかること 事例1 T テキストチェックのFigmaプラグイン の実現E T どんなインタラクションを備えている と実用的になるか8 T テキスト判定にどんなロジックが必 要か? 事例2 T iOSで標準提供されている触覚 フィードバックの種™ T カスタムする場合はどんなパラメー タがあるか8 T パラメータの変更が触覚にどう影響 するか?

Slide 15

Slide 15 text

#aidesign_2nd プロトタイプ開発 = 試して気づく発見的なアプローチ プロトタイプ開発 = 試して気づく、 発見的なアプローチ 「とりあえず作ってみる」 姿勢は、 デザイナーの得意領域 AIと一緒にプロトタイプ開発すると“試せること”の幅が大きく広がる

Slide 16

Slide 16 text

#aidesign_2nd AIと一緒にプロトタイプ開発して
 「とりあえず作ってみる」 の幅を広げよう

Slide 17

Slide 17 text

#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/ 参考資料

Slide 18

Slide 18 text

ありがとうございました @shingo2000 note.com/shingo2000 #aidesign_2nd