少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf

ベンチャーの少人数チームで「ユーザーに使われるサービス」に最短で辿り着くため、本番環境と同じUIを再現しやすい環境をつくり、チームメンバー全員がプロトを触って議論できるようにしました。その実践と、まだハーネスしきれていない部分についてお話しします。

Transcript

1. 少人数チームで 使われるプロダクトにたどり着くための デザインハーネス 2026.07.09 デザインハーネス 西谷 歩
2. にしゃみー 一人デザイナー Rimo 合同会社
3. デザイナー(自分)の 手を動かす速度を上げるための 仕組みとハーネス
4. 想像してるユーザーフローを渡して レイアウトや インタラクションパターンを 早く形にして検討できるツールに
7. 仕組み
9. ハーネス4層で説明 token に存在するもの以外を使わない コンポーネントの新 Variant を作らない frontend 実装を参照 token や Component だけでなく、コード全体 制約違反チェック + スクショチェック 制約 : コンテキスト 検証 Project (検討単位) ごとに人間の指摘を 覚えさせて振り返り可能にする フィードバック
10. 目的 
 ユーザーストーリー
 参照すべき実装 ...etc
16. 4か月近く使ってみて どうだったか
17. Good ユーザーストーリーやUIフローの パターン検討が早くなった UI上でドッグフーディングできるので、 改善を早く回しやすい
18. Good ログから制約を改善し続けることで 制約が守れるようになってきた 既存画面の改善が回しやすくなった 部分的に仕事を委譲しやすくなった
19. BAD 指示の仕方によって、AI-Slop 再現 セッションのやり取りや1回でのタスクが多いと頻発 怠惰でそのまま渡しちゃう案件 仕様に落としきる前に時間切れでパス... よしな力頼りに
20. 壁 新しい機能や画面を
 デザイナーやPdM以外が作るのは 難しいかも...? 作るべきものを定義できる力が必要 AIから提案されたものをより良くするための 形を想像できる力・作らせる力が必要
21. とはいえ 直したい部分が言語化できている デザインは向いてたので...
22. Next チャレンジ 既存UIの改善を AIが自動で回すための Loopとハーネス
24. 🔥 絶賛検証まわしてる最中 うまくいってそう...
25. 🕑🥺 ...ですが今日は割愛！ 気になる人は私を捕まえてください...
26. 前のめりに試してみるチームで 良いサービスに早くたどり着く仕組みを 一緒に考えて作りませんか？
27. JOIN US!