「惜しいデザイン」 を生み出さないための AIレビューループ

2026年7月22日 「AIで変わる設計と判断——デザイン × フロントエンド、複数社が語る失敗と工夫」
登壇資料

Transcript

1. ES I G N- P O → D D E SIG → N O OP - E W I V E L R 「惜しいデザイン」 を生み出さないための AIレビューループ AI Kazuhiro Tobita REV IEW L O
2. AIで変わる設計と判断 自己紹介 02 失敗談 03 AIの出力は “それっぽい” 止まり 04 「敵対的レビュー ＋ 差し戻し先」を決めたレビューループ 05 これから目指すところ 01 ©2026 LayerX.inc Date 2026.07.22
3. AIで変わる設計と判断 Date Kazuhiro Tobita Ai Workforce事業部 / デザインエンジニア LayerX 2026.04 - Design Engineer Cybozu, Inc. 2021 - 2026 Design Technologist Trinity College Dublin, 
 Computer Science and Business 2018 - 2021 ©2026 LayerX.inc 2026.07.22
4. AIで変わる設計と判断 企業と成長を共にする AIプラットフォーム Ai Workforceは、エンタープライズ企業がAIを“毎日の仕 事”に組み込むための生成AIプラットフォームです。 社内に点在するナレッジを整備し、検索・ワークフロー・ エージェントで業務に活用。使うほどにデータが蓄積され、 AIもプロダクトも賢く進化していきます。 企業の生産性と人的資本の価値向上を、AIが支える時代を つくります。 ©2026 LayerX.inc Date 2026.07.22
5. AIで変わる設計と判断 Date 今回話すこと デザインの前段階である PRDやSpecの観点の抜け漏れを最大限減らす AIレビュー方法 ©2026 LayerX.inc 2026.07.22
6. AIで変わる設計と判断 Date / が す で 速 早 \ 失敗談 ©2026 LayerX.inc 失敗 ある画面のデザイン＆フロントエンドを担当して デザイン段階で手戻りが複数回発生した 動機 PRDやSpec段階で 「デザイン確度」を上げることで手戻りを減らしたい 2026.07.22
7. AIで変わる設計と判断 Date 振り返り そもそも手戻りって必ずしも悪いとは 限らないんじゃない？ ©2026 LayerX.inc 2026.07.22
8. AIで変わる設計と判断 Date 従来の開発フローと「手戻り」の分析 チケット PRD Spec デザイン デザインは最初のビジュアルアウトプット 手戻りが「問題」として顕在化しやすい 手戻りを分解してみる ©2026 LayerX.inc 2026.07.22
9. AIで変わる設計と判断 防げる手戻り 画面ができあが る 「前」に分か る もの 対象ユーザー 権限やロールによる表示差分 旧画面仕様 DOMツリー / A11yツリーなどの構造 静的API / schema データの実態 件数レンジ（0 / 1 / N件） UI Stack エラー状態 / 空状態 / 待機状態 / 部分状態 画面遷移 ルーティング 将来予定する追加機能 ©2026 LayerX.inc Date 健全な手戻り 画面ができあがった「後」に分か る もの デザインシステム 汎用コンポーネントやデザイントークンの準拠 / 逸脱状況 機能不足や拡張の必要性 ライティング シソーラス（社内/社外用語）やライティングルール 多言語対応を考慮した文言設定 実データでの手触り マイクロインタラクション フォーカスマネジメント / スクリーンリーダー レスポンシブ対応 デザイン崩れ パフォーマンス 初期表示 / 大量データ時の応答 体感待ち時間 2026.07.22
10. AIで変わる設計と判断 Date 本当にAIで仕様やワイヤーフレームを網羅的に作れるのか？ 出力された「っぽい」仕様が 
 “本当に網羅すべき仕様” を満たして いるかはAIは保証してくれない = 作って終わり .mdやSkillsといったハーネス
 （AIの挙動を制約する仕組み）を丁寧 に作っても忠実に守るとは限らない ※特に.mdは都度全体を読み込むため、MCPサーバーに比べてトークン消費 量が多く、処理時間も長い。デザインシステムに準拠しないことも多い ノーガードの仕組みではまだ意図通りにならない ©2026 LayerX.inc 2026.07.22
11. AIで変わる設計と判断 Date レビューのなかで “壊し役” と “差し戻し先” を決めて、ループする 壊し役 敵対的レビュー用の新規エージェント PRD作成や実装とはコンテクストを共 有せず“粗探し” だけを責務とする 仕様 テスト 差し戻し 敵対的レビューが1個でもFAILであれ ば適切なフェーズに戻す PASSするまでループを繰り返す 実装 Agent (Review) 敵対的レビュー FAIL❌ ©2026 LayerX.inc PASS⭕️ 2026.07.22
12. AIで変わる設計と判断 Date P H AS E １ P H AS E ２ Notion Notion チケット作成 P H AS E ３ PRD作成 Agent（Build） prd-builder FAIL❌ PRD修正 Agent（Review） PASS⭕️ SPEC作成 ワイヤーフレーム作成 Notion Storybook prd-adversarial-reviewer PRD修正 P H AS E ４ Skill（Build） /build-spec-design Spec修正 P H AS E ５ デザイン作成 PASS⭕️ Skill（Review） /review-design-wireframe FAIL❌ デザインシステム拡張 防げる手戻り ©2026 LayerX.inc Figma 健全な手戻り 2026.07.22
13. AIで変わる設計と判断 Date 2026.07.22 これから目指すところ 精度は極めて高いが、最終出力までとても時間がかかる（トークン消費量も膨大...） レビューが開発組織内で回るたびに学びが積み上がって、精度が自動向上するのが理想 以前も同じ箇所でFAILしたことあったな〜 ©2026 LayerX.inc
14. Date AIで変わるデザインと判断 最後に ©2026 LayerX.inc t a l e n t i o B e t A I D a y 2 0 2 6 A I Wo r k f o rc e / リ ー ド デ ザ イ ナ ー L a y e r X A I C o n f e re n c e 2026.07.22
15. Date AIで変わるデザインと判断 Thank you! 取 り 組 み な ど 懇親会でお話ししましょう！ ©2026 LayerX.inc 2026.07.22