Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地

Transcript

1. DESIGN HARNESS 2nd Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地 2026年9⽉15⽇ ソフトバンク株式会社 窪内

   彩佳（Kubouchi Sayaka） © SoftBank Corp.

2. ABOUT ME 登壇者紹介 窪内 彩佳 Kubouchi Sayaka ソフトバンク株式会社 UI/UXデザイナー HCD-Net認定

   ⼈間中⼼設計専⾨家 2016年、エンジニア職で⼊社。翌年デザイナーにキャ リアチェンジし、デザインチームの⽴ち上げに参画。 社内業務システムを中⼼にUIデザインやデザインディ レクションを担当。 現在はAIを活⽤したデザインプロセス変⾰と戦略⽴案 に取り組み、AIと共に進化するデザイン組織の実現を ⽬指している。 © SoftBank Corp. 2

3. BUSINESS ソフトバンクの事業と開発環境 通信事業を基盤に、個⼈・法⼈向けの多種多様な領域でサービスを展開している コンシューマ事業 エンタープライズ事業 ディストリビューション事業 モバイル / ブロードバンド ⽣活に⾝近なサービス

   通信 / クラウド / DX 企業の業務を⽀えるサービス デジタルサービス / AI 新しい利⽤体験をつくる領域 © SoftBank Corp. 3

4. WHY NOW デザインハーネス構築の⽬的 ⽬指す姿 / VISION 制作・レビューの効率化と共通部分の品質向上を全社的に進め、 デザイナーがより上流の⼯程や事業価値に関わる活動へシフトできる状態 必要なアプローチ /

   ACTION ハーネスやエージェントの構築によるデザインガバナンスの強化 © SoftBank Corp. 5

5. SECTION 01 なぜデザインガバナンスの強化が必要なのか 設計主体・関与⼯程・AI活⽤状況が異なる中で、判断基準の扱い⽅を定めていく © SoftBank Corp. 6

6. CONTEXT 01 「デザイナーの関与度」の課題 プロダクトによってデザイナーの関与⼯程と⽀援範囲が異なり、品質のばらつきがあった プロダクト 企画 要件 設計 実装 レビュー

   ⼀部関与 関与 関与 ̶ 関与 社内システムA ̶ ⼀部関与 関与 ̶ ⼀部関与 社内システムB ̶ ̶ ̶ ̶ ̶ 顧客向けサービスX 限られたデザイナーリソースでは、すべての品質を⽀えきれない © SoftBank Corp. 7

7. CONTEXT 02 「再現性」の課題 デザインの判断基準が散在・暗黙知化すると、⼈もAIも意思決定や出⼒がブレる 判断基準の散在 出⼒のばらつき 意思決定ログが複数箇所に分散し コンテキストが追えない 同じ要件でも⽣成結果が揺れ、 プロダクトとして成⽴しない

   Figma、レビュー、⽂書、会話、担当者 の記憶、etc... 出⼒の安定性を担保するための制約条件 が整備されていない どのプロダクトでも⼀定の品質を担保できる「判断基準」を定義したい © SoftBank Corp. 8

8. CONTEXT 03 開発プロセスの変化への適応 「AI駆動開発への転換」の流れへの適応が急務となっている 背景 開発プロセスの変化 エージェントが設計〜デリバリーまで⾃律的に⾏い、 ⼈間の介⼊ポイントが限定される 課題 デザインのボトルネック化

   プロセスが従来のまま・判断基準が個別定義のままだと、 後続⼯程のボトルネックになる可能性がある 対策 AIが参照できる基準と仕組みを整える デザインの知識と判断基準を整え、 エージェントと⼈間が同じ基準を参照できる状態にする 開発ワークフローの中に「デザイン品質を担保する仕組み」を組み込む必要がある © SoftBank Corp. 9

9. SECTION 02 三層ハーネス構想 共通ルールとプロダクト個別の制約を、制作・レビュー・改善の⼯程へ渡す © SoftBank Corp. 10

10. HYPOTHESIS 三層ハーネスの役割 ベースハーネス 全社共通のUI品質ゲート 共通ブランド / デザイン原則 / ライティング /

    アクセシビリティ標準 / 情報設計 / 共通UXフロー Base デザインシステム UI部品と画⾯構造の適⽤条件 コンポーネント / トークン / コンポジション / ガイドライン / アクセシビリティ / レスポンシブ プロダクトハーネス プロダクトごとの制約 Design System © SoftBank Corp. Product 業務要件 / 画⾯⽬的 / 成功条件 / ユーザー / 利⽤状況 / データ / 権限・ロール 11

11. HYPOTHESIS 三層ハーネスで⽬指す状態 ベースハーネス 全社共通のUI品質ゲート 組織の知⾒を再利⽤する Base デザインシステム UI部品と画⾯構造の適⽤条件 プロダクトハーネス Design

    System © SoftBank Corp. Product プロダクトごとの制約 ⼀貫したUIを効率よく作る プロダクト固有の価値を磨く 12

12. HYPOTHESIS 三層ハーネス×エージェントでめざす状態 「誰が使っても⼀定の品質の設計を再現できる」状態を作る エンジニア デザイナー Harness 判断基準を再利⽤し、 速く⼀貫した設計・レビューを可能に 実装時にも、デザインシステムの ルールと品質ゲートを外さない

    × Agent ビジネスサイド 企画や要件整理の段階から、 最低限のUX・ブランド基準を満たす デザイナーが関与せずとも、当たり前品質を担保できる開発環境へ © SoftBank Corp. 13

13. IMPLEMENTATION ベースハーネス（Design Compass）の構築 ある特定のプロダクトを検証⽤サンプルとし、 エージェントにデザインプロセスを実⾏させつつ、ハーネスの改善点を探る Design Compass ベースハーネス Unicorn Design

    System プロダクト固有情報 検証⽤プロダクトの固有条件 社内デザインシステム Agentic Design Workflow © SoftBank Corp. 14

14. Unicorn Design System Figma Components React / Vue Components Storybook

    MCP Server Agent Skills ... and more! © SoftBank Corp. 15

15. HARNESS DEFINITION Design Compassにおけるハーネス定義・ガードレール ⼈間向けのルールをAI向けに構造化し、静的・動的な⾃動検証による品質担保を⽬指す ⼈間向けの説明形式 機械向けの構造化形式 ルール準拠の検証 Markdown JSON

    YAML linter Playwright 制約の意図・背景・例外 Must/Should/Mayの説明 制約レベルと 判定条件の構造化 静的/動的を組み合わせた 制約の検証・違反検出 今後拡張予定 © SoftBank Corp. 16

16. AGENTS Design Compassのエージェント構成 要件定義から修正ループまで、複数のエージェントが役割を分担し相互に連携する構成 © SoftBank Corp. 01 02 03

    04 要件整理 ⽂脈定義 情報設計 画⾯⽣成 Requirements Normalize Design Context IA Structure Generate With Principles IAレビュー・要件突合ループ 画⾯修正ループ IA Structure Review / Requirements Coverage Loop Self Correction Loop 17

17. SECTION 03 検証と改善のループ ⽣成過程で⾒つかった課題を、ルール・構成・DDRへ反映して改善する © SoftBank Corp. 18

18. FINDING UDSを利⽤した⽣成検証で⾒つかった課題 コンポーネントは正しく適⽤されているにもかかわらず、UDSらしくない画⾯が⽣成された すでに定義されていたもの（⼀部抜粋） デザイントークン 画⾯構成パターン Color, Typography, Spacing Page

    Shell 基本コンポーネント 情報表⽰パターン Button, Input, Badge, etc. Data Table等 ガイドライン 振る舞い定義 Usage, Constraints, States 上記パターンに付随する定義 ⼈間が組み合わせて利⽤するには⼗分な状態 © SoftBank Corp. 未定義だったもの AIが独⾃実装し、⽣成品質にブレが発⽣ 19

19. RULE UPDATE ベースハーネス側で補完ルールを定義する 構築途中のデザインシステムでも、ベースハーネスで補うことで品質を担保する 01 02 03 04 デザインシステムの 提供範囲を確認

    組み合わせで 表現できないか検討 不⾜している構造を 補完 デザインシステムの 改善候補として記録 コンポーネント / トークン / コンポジション / etc 実在する部品とトークンで 判断 ベースハーネスの⽅針に 沿って扱う DS側へフィードバックし改 善ループを回す 「ベースハーネスの品質向上」と「デザインシステムの改善」を両⽴しながら検証中 © SoftBank Corp. 20

20. LOOP BACK 検証結果を資産化する 検証で明らかになった問題と解決⽅針を「ハーネスデザインの意思決定」として扱い、 DDR（Design Decision Record）に記録する © SoftBank Corp.

    詳細はテックブログをご覧ください！ 21

21. CURRENT STATE 現在地と次のステップ NOW / 現在地 NEXT / 次のステップ 1

    三層ハーネスの構造と役割の整理 1 実案件での実証検証 2 ベースハーネス Design Compass の構築 2 三層の情報連携⽅式と拡張⽅法の定義 3 UDSと特定のプロダクトで検証 3 ⼈間が「⾼品質」と判断する基準の定義 4 UDSの改善点を特定 4 設計・実装・レビュー効率等の効果測定 5 ルール・エージェント構成・DDRへ反映 5 AI駆動開発への組み込み © SoftBank Corp. 22

22. DESIGN HARNESS 2nd Thank you! 10分では語り尽くせないので、 交流会でぜひお話しましょう！ WE ARE HIRING!

    デザイナー・ デザインエンジニア募集中！ © SoftBank Corp.