デザインプロセスにAIを組み込む 仕組みを作ってみた.pdf

Transcript

1. デザイン x AI 実践知大放出 デザインプロセスにAIを組み込む 仕組みを作ってみた ファインディ株式会社 プロダクトデザイナー 佐藤友介 (サティ) @satty_5695
2. ファインディ株式会社 CTO室 Design FT プロダクトデザイナー サティ（佐藤友介） @satty_5695 新卒から金融機関でCSを経験後、約1年間独学でUIデ ザインを学びデザイナーへ転身。主にtoB SaaSの Webプロダクトのデザインを中心とし、2025年3月に ファインディにジョイン。Findy Team+のプロダク トデザインを担当。趣味は2週に一回のサウナと
 AIで遊ぶこと。 #AIデザナレ大放出
3. デザインプロセスの中でどうAIを使っているか #AIデザナレ大放出
4. Figmaで作る前にAIでモックを作って、
 体験ベースでPdMやエンジニアと要件を揃えている #AIデザナレ大放出
5. 要件定義書をそのままAIに渡していた 自分は前までは... #AIデザナレ大放出
6. 出てきたアウトプットに対して、 見えている要素を指定しながら 一個ずつ修正させていた #AIデザナレ大放出 すごい恥ずかしいのですがこんな 会話していました...
7. #AIデザナレ大放出 要件定義書 モック
8. もっとうまく使えるやり方が
 あるんじゃないか…？ さすがに... #AIデザナレ大放出
9. エンジニアがAIを使いながらコーディングする というのを体験するワークショップに参加 #AIデザナレ大放出 ↓その時の記事書いているよ
10. #AIデザナレ大放出 複雑なワークフローを して
 作業単位ごとにAIを動かす 分解 精度の高いアウトプット
11. この考え方使えないかな？ #AIデザナレ大放出
12. ...etc. #AIデザナレ大放出 過去読んだ書籍や、新たに仕入れた書籍を読み漁りました。
13. そして先人の知恵を借りて、 AIでどう実現するか考えてみた そして先人の知恵を借りて、 AIでどう実現するか考えてみた
14. #AIデザナレ大放出 要件定義書 ユースケース モック UXコンセプト オブジェクト 画面構成 ナビゲーション設計 etc. デザインプロセスを分解してステップごとにAIに処理をさせる
15. #AIデザナレ大放出 今までのプロセスの場合 動線の一部が確認できない 意図がわからないナビゲーション ※突貫で作ったダミーアプリです
16. #AIデザナレ大放出 新しく試しているプロセス Cursorでドキュメント整理
17. #AIデザナレ大放出 新しく試しているプロセス 動線が揃っていて触れる状態 ナビゲーションに意図が見える 意図的な成果物を出力することが可能 ※突貫で作ったダミーアプリです
18. #AIデザナレ大放出 ① 各ステップで何を確かめるかが決まっているから、
 人間のレビューがしやすくなった 効果 ②品質のコントロールがしやすく、出来上がったモックが、
 PdMやエンジニアとの認識合わせにそのまま使える
19. #AIデザナレ大放出 70％ 体感 まだまだ伸び代あり...！
20. まとめ まずはプロセスを分解してみる。
 そこから始めてみると、
 何か見えるかもしれません。 #AIデザナレ大放出
21. 懇親会で ぜひお話ししましょう！
22. #AIデザナレ大放出 または ファインディ公式note で検索〜♪