デザインハーネスはじめの一歩

デザインハーネスの始め方を、数ヶ月の実践と4つの成長段階から紹介しています。デザインルールに沿ったAIのUI生成から、品質の改善、他職種への展開、記録を活用した継続的な改善まで、試行錯誤の過程と具体的な工夫をまとめました。

Transcript

1. 10/29 デザインハーネスの 始めの一歩 ハーネスの4つの成長段階 ファインディ株式会社 プロダクトデザイナー 佐藤友介 (サティ) @satty_5695
2. 人とAIで、 つくる力を進化させる。
3. ファインディ株式会社 CTO室 プロダクトデザイナー サティ （佐藤友介） @satty_5695 新卒で金融機関に入社し、CSを経験。その後、約1年 間独学でUIデザインを学び、デザイナーへ転身。主に toB SaaSのWebプロダクトのデザインを手がけ、 2025年3月にファインディにジョイン。Findy Team+、Findy Eventsのプロダクトデザインを担 当。趣味は2週に一回のサウナとAIで遊ぶこと。
4. 突然ですが... デザインハーネスって どれくらい理解していますか？
5. 四つの制約の図 デザインハーネスの4層 出典：こぎそさんhttps://design-harness.com/を引用
6. ハーネスは何をし、どこで誰がどう 使うものかイメージが湧かなかった
7. 試行錯誤の末、 この図にたどりつきました
8. 深さと広さ 広さ (誰が使うか) PdM デザイナー エンジニア 表層 色・文字・余白 骨格 パーツの選択・配置・組み合わせ 情報の組み立て・ 構造 操作や状態の変化 要件 必要な機能・コンテンツ 戦略 ユーザーのニーズ・目的 深さ (ルール適用の精度)
9. 深さと広さ 広さ PdM (誰が使うか) Step3 ほかの職種で利用される デザイナー Step4 記録から改善を回せる エンジニア 表層 色・文字・余白 Step1 骨格 パーツの選択・配置・組み合わせ ルールを元につくれる 情報の組み立て・ 構造 操作や状態の変化 Step2 要件 必要な機能・コンテンツ 意図した デザインを作れる ユーザーのニーズ・目的 戦略 深さ (ルール適用の精度)
10. その前に
11. Step0 環境を"ある程度"整える
12. 環境を"ある程度"整える 達成条件 人間が混乱しない程度に、
 デザインシステムが整理されている FigmaかコードをAIに読ませて、一緒に作れるか
13. 要素ごとに、ドキュメントを作る 最低限、レイアウト・インタラクションまで準備する トークン カラー スペーシング タイポグラフィ コンポーネント レイアウト インタラクション ...など 使い方やルールをまとめ、AIが参照できるようにする
14. Step 1へGo！👉
15. Step1 ルールを元につくれる 記録から改善を回せる Step4 広さ Step3 PdM ほかの職種で利用される デザイナー エンジニア 表層 色・文字・余白 Step1 ルールを元につくれる 骨格 パーツの選択・配置・組み合わせ 情報の組み立て・ 構造 操作や状態の変化 Step2 意図した 必要な機能・コンテンツ 要件 デザインを作れる 戦略 ユーザーのニーズ・目的 深さ (ルール適用の精度)
16. ルールを元につくれる 達成条件 ドキュメントを元にAIがそれを参照してUIを作るSkill がある
17. ルールを元につくれる AI ドキュメント 読み取り・生成 HTML／Figma／実装コード
18. とりあえず作らせてみた
19. ひとまず1画面分は 生成できるようになった🙌
20. Step 1 まとめ 作らせた過程を、Skillにする 次回はSkillを呼び出し、同じ手順で作らせる
21. 次のステップへ👉
22. Step2 意図したデザインを作れる 記録から改善を回せる Step4 広さ Step3 PdM ほかの職種で利用される デザイナー エンジニア 表層 色・文字・余白 Step1 ルールを元につくれる 骨格 パーツの選択・配置・組み合わせ 情報の組み立て・ 構造 操作や状態の変化 Step2 意図した 必要な機能・コンテンツ 要件 デザインを作れる 戦略 ユーザーのニーズ・目的 深さ (ルール適用の精度)
23. 意図したデザインを作れる 達成条件 生成結果が、意図したデザインになっている 品質を向上させるまでにあった壁をご紹介
24. 本番のコンポーネントを再現しない どういうコンポーネントがあるか の情報と使わないで欲しいものを 定義するか
25. 似ているけれど違う どのコンポーネントが正しいの か。もう少し定義を具体化
26. 既存を無視しすぎる 既存の画面の情報を見るように指 定するか
27. Emptyとデータあり両方出す Emptyなどの状態定義を言語化し ておこう
28. 完成...！！！ つ、ついに....😭
29. Step 2 まとめ 人間のレビュー：意図したデザインか、目視で確認 AIのレビュー：Token・コンポーネントの使い方を採点 両方の結果をもとに、AIと壁打ちしながら直す
30. 次のステップへ👉
31. Step3 ほかの職種で利用される 記録から改善を回せる Step4 広さ Step3 PdM ほかの職種で利用される デザイナー エンジニア 表層 色・文字・余白 Step1 ルールを元につくれる 骨格 パーツの選択・配置・組み合わせ 情報の組み立て・ 構造 操作や状態の変化 Step2 要件 必要な機能・コンテンツ 意図した デザインを作れる 戦略 ユーザーのニーズ・目的 深さ (ルール適用の精度)
32. ほかの職種で利用される 達成条件 ほかの職種が使っている ┗ すでに利用されている他Skillと共存できている
33. まず自分で使い、共有して広げた 01 自分で使って、 アウトプットを 共有 02 開発部長/開発 チームに相談 03 04 GitHubに登録して、 他のスキルと共存 品質が良く、 口コミで広がった 開発メンバーと一 緒に導入 使ってもらえる ようになった
34. 大事なのはコミュニケーション
35. Step 3 まとめ 仕組みへの信頼 事業の成果につながるイメージ デザイナー以外にとってもメリットを感じてもらえること
36. あと少し！👉
37. Step4 記録から改善を回せる 記録から改善を回せる Step4 広さ Step3 PdM ほかの職種で利用される デザイナー エンジニア 表層 色・文字・余白 Step1 ルールを元につくれる 骨格 パーツの選択・配置・組み合わせ 情報の組み立て・ 構造 操作や状態の変化 Step2 意図した 要件 必要な機能・コンテンツ デザインを作れる 戦略 ユーザーのニーズ・目的 深さ (ルール適用の精度)
38. 記録から改善を回せる 達成条件 記録をもとに改善Issueを作り、自分から推進できる ┗ 意思決定を残し、改善に使うため
39. 記録を改善につなげる 01 Skillで回した記録 02 改善Issueを作る 全員が見れるIssueなどに記録 ※ すぐ改善が難しければ
 ドキュメントに残すのでも良し 03 自分から改善を推進
40. Step 4 まとめ みんなで使って、記録して、直してを繰り返していき、 デザインハーネスを 育てて行く 一旦ゴールだけど 運用保守は続くよ！
41. 今日のまとめ 広さ Step3 PdM ほかの職種で利用される デザイナー Step4 記録から改善を回せる エンジニア 表層 色・文字・余白 Step1 ルールを元につくれる 骨格 パーツの選択・配置・組み合わせ 情報の組み立て・ 構造 操作や状態の変化 Step2 意図した 必要な機能・コンテンツ 要件 デザインを作れる 戦略 ユーザーのニーズ・目的 深さ (ルール適用の精度)
42. ご清聴ありがとうございました！