デザインハーネスをつくるハーネス｜誰でも自社らしいデザインをつくれるようにする仕組み

デザインハーネス 2nd 〜デザインにおけるハーネスエンジニアリング〜の登壇資料です。

Transcript

1. デザインハーネスをつくるハーネス 誰でも自社らしいデザインをつくれるようにする仕組み 株式会社グッドパッチ｜Layermate事業責任者 Akari Katakai © Goodpatch Inc.
2. 自己紹介 片貝 朱里 ｜ Akari Katakai 株式会社グッドパッチ Layermate事業責任者 経歴 2019年～2023年 株式会社ニジボックス ・Webディレクターとしてキャリアをスタート ・新規事業として発足したUX事業部へ異動しUXデザイナーに @katakai_ nb ・UX部門のリーダーとして、組織開発やデザイナー育成に従事 2023年～2026年 株式会社グッドパッチ ・2023年8月にUXデザイナーとして入社 ・主にC向けプロダクトの立ち上げとグロースに従事 ・2024年9月よりUXグループのマネジャー。ナレッジマネジメントを統括 ・2025年9月よりAI×デザインプロダクト事業の事業責任者 © Goodpatch Inc. 2
3. 前提 「自社らしいデザイン」はもう一定、誰でもAIでつくれます。 重要なのはらしいデザインが作れる状態を「サービスごとに高速で立ち上げる」ことと、 「ハーネスが使われ続けれる状態」を設計し、運用すること。 ハーネスをつくるのに 半年以上かかりそう 暗黙知を形式知化して AIに渡すのが大変 ルールが更新されず 形骸化する 例：構築リソース / 知見不足 例：デザインの良し悪しの基準 例：法規制や自社ルールの更新 © Goodpatch Inc. 3
4. 今日お話しすること デザインハーネスを「つくるハーネス」の運用知見 SECTION1 デザインハーネスを つくる ハーネスの構築具体例 © Goodpatch Inc. SECTION2 デザインハーネス構築を 複数実施しての所感 4
5. 今日お話しすること デザインハーネスを「つくるハーネス」の運用知見 SECTION1 デザインハーネスを つくる ハーネスの構築具体例 © Goodpatch Inc. SECTION2 デザインハーネス構築を 複数実施しての所感 5
6. デザインハーネスとは？ ハーネス ＝ AIの出力を意図した形に繋げるための環境設計 制約 できることを限定する 評価 正しくできたか確認する © Goodpatch Inc. 情報 AIエージェント 出力は確率的 何をすべきかを知らせる 修正 フィードバックし自己修正する 6
7. デザインハーネスをつくる「ハーネス」でできること 対象 入力 出力 © Goodpatch Inc. ❶ LPの場合 実装コード格納 GitHubリポジトリ or ❷ UIの場合 LPのURL 実装コード格納 GitHubリポジトリ or Figmaファイル 該当サービスのデザインハーネス一式 ルール・判断基準の収集、生成手順・検証、フィードバックループまで含んだリポジトリ。 以降、誰が使っても一定の「らしさ」が再現可能。 7
8. 実際にどんな風にハーネスが作られ、どう動くのか？ 実際どのようにデザインハーネスをつくるハーネスが動くのか、 自社サービスのLPを例にしてお見せします CASE LPにおける デザインハーネス構築 © Goodpatch Inc. 8
9. ケース：自社サービスのLPのハーネス構築＋FAQ項目追加
10. ケース：自社サービスのLPのハーネス構築＋FAQ項目追加 ❶取り込む ❷与件伝達・整理 ❸デザイン作成 ❹ 実装・反映 ❺ 記録
11. ケース：自社サービスのLPのハーネス構築＋FAQ項目追加 ❶取り込む ❷与件伝達・整理 ❸デザイン作成 ❹ 実装・反映 ❺ 記録
12. ケース：自社サービスのLPのハーネス構築＋FAQ項目追加 ❶取り込む ❷与件伝達・整理 ❸デザイン作成 ❹ 実装・反映 ❺ 記録
13. ケース：自社サービスのLPのハーネス構築＋FAQ項目追加 ❶取り込む ❷与件伝達・整理 ❸デザイン作成 ❹ 実装・反映 ❺ 記録
14. ケース：自社サービスのLPのハーネス構築＋FAQ項目追加 ❶取り込む ❷与件伝達・整理 ❸デザイン作成 ❹ 実装・反映 ❺ 記録
15. APPENDIX：UIの場合 ←与件を同様にヒアリングした後、 与件に合わせた型リストが出てきて、 構成→デザイン→反映の順で進みます！
16. なぜ多様なサービスでデザインハーネスを高速で構築できるのか？ ハーネスの「骨格」は全サービス共通、 サービス固有の「中身」だけを差し替える構造にしているため ❶骨格は共通 ❷中身は固有 ❸骨格の進化に ハーネスが追従 3層skill構成 ルールの段階的開示 レビュー機構（機械+AI）等 トークン・デザインシステム 型カタログ ペルソナ・KPI等 原本ハーネスの変更自動検知 共通部分は自動反映 固有部分はAIが翻案 等 例：ハーネスの構造は同一 例：コードやヒアリングで抽出 例：harness-sync（開発の仕組み） © Goodpatch Inc. 16
17. 今日お話しすること デザインハーネスを「つくるハーネス」の運用知見 SECTION1 デザインハーネスを つくる ハーネスの構築具体例 © Goodpatch Inc. SECTION2 デザインハーネス構築を 複数実施しての所感 17
18. 所感❶ ハーネス構築では「業務設計」が重要 つくって終わりではなく、業務に埋め込むところまでが構築 実態把握：今、誰が、いつ、どんなツールで、何をしているのか？ 構築：現状の業務フローのどこに、どのようにハーネスを組み込むべきか？ 保守運用：誰が、いつ、どのように、ハーネスをアップデートするか？ →これらを現場に入り、泥臭く可視化し、試行し、巻き込んで進めることが必要 © Goodpatch Inc. 18
19. 所感❷ ハーネスは育てるほど「複利の資産」となる 本質は「らしい」デザインをつくれることではなく、 個人の暗黙知を組織の形式知に変え続けられること ループ❶個人の学びの資産化 暗黙知→形式知 ❶ハーネスで 生成 ❷フィード
 バック ループ❷ 個人の暗黙知の組織ルール化 全体還元 ❸採択記録が
 蓄積 ※自動で残る ❶溜まった記録を 人がルール化 ❷組織
 ルールに昇華 ❸ハーネスに 反映 Push Pull © Goodpatch Inc. GitHub repo 個人の記録と組織ルールが集まる場所 Push 19
20. さいごに © Goodpatch Inc. 13
21. グッドパッチのデザインハーネス構築支援ソリューション 👆 概要は上記QRよりご覧いただけます！ https://goodpatch.com/ja/news/202608_design-harness © Goodpatch Inc. 21