AI Coding Agent と歩むプロダクト開発 〜現場とデザイナーの変化〜

Transcript

1. AI Coding Agent と歩むプロダクト開発 〜現場とデザイナーの変化〜 株式会社LegalOn Technologies 2026/05/13 デザインとコードの垣根はこう溶かす Claude Codeで変えるプロダクトデザイン 駒ヶ嶺（@Koma_Studio） 渡辺（@wataryooou）
2. Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. 2023年にプロダクトデザイナーとして⼊社。 様々な重要プロジェクトに携わった後、2025年より ジェネラルマネージャーに就任。 トライアスロンに出場するために体作りばかりしています。 駒ヶ嶺 亮一 プロダクトデザイン ジェネラルマネージャー Design Office 兼 Design Ops部 部長
3. Our Purpose すべてのプロフェッショナルに、 驚きと感動を。 LegalOn Technologiesは、専⾨性とAIを掛け合わせたプロダクト"Professional AI"を提供している グローバルリーディングカンパニーです。 AIが⼈々の可能性を広げ、できることの幅が⾶躍的に広がる時代。企業の競争⼒を決めるのは、プロフェッショナルとしての仕事の⽔ 準です。 誰もがAIを⼿にし、あらゆることに挑戦できる今だからこそ、私たちはプロフェッショナルに⼒をお届けします。 会社名 株式会社LegalOn Technologies 設⽴ 2017年4⽉21⽇ 従業員数 639名（役員含む∕2026年3⽉時点） 所在地 〒150-6219 東京都渋⾕区桜丘町1-1        渋⾕サクラステージSHIBUYAタワー19F 資本⾦ 201.5億円（資本準備⾦等含）
4. 圧倒的な成長を続けるAIカンパニー 8,500+ 顧客数グローバル8,500社を突破 639人 従業員数 7拠点合計 （東京‧⼤阪‧福岡‧名古屋‧サンフラン シスコ‧ロンドン‧ミュンヘン） 20人 弁護⼠資格保有者数 ⽇本、NY州、CA州、ドイツの資格者を含む 1000+ 導⼊上記業者数 / 前上場企業者数 3,800社 200人 開発チーム⼈数 286億円 ゴールドマン‧サックス、ソフト バンクなどが出資。全調達ラウン ド累計
5. AI駆動経営 powered by Professional AI 経営上主要な専⾨業務オペレーションを網羅するProfessinonal AIを開発‧提供。
6. Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. agenda AIによる現場と デザイナーの変化
7. 「議論してから作る」から 「作ってから議論する」へ 渡辺 凌央（@wataryooou） 2026/05/13 デザインとコードの垣根はこう溶かすClaude Codeで変えるプロダクトデザイン 〜 Aegis Lab がもたらした現場の変化 〜
8. Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. 自己紹介 渡辺 凌央（@wataryooou） • 新卒で DeNA に⼊社 • 2022年から LegalOn Technologies に参画。 ソフトウェアエンジニア、PdM等、多種多様なロールを経験 • 現在はデザインシステムチームにて開発‧運⽤に従事 • 内製プロトタイピングツール「Aegis Lab」を開発‧社内展開 Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies.
9. Vibe Coding の登場と、立ちはだかる山積した課題 学習不⾜による精度低下 ⾃社のデザインシステムを学習して いない AI Coding Agent は、公開ラ イブラリと⽐較しても出⼒精度が劣 る。 ガイドラインにも準拠していない。 開発速度の停滞 プロトタイプと本番コードの差異に より、考慮漏れが発⽣。 コストが増し速度が上がらない。 共有の壁 ローカル環境に閉じており、他者に プロトタイプをシェアできない。 Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies.
10. Vibe Coding の登場と、立ちはだかる山積した課題 1. 学習不⾜による精度低下 ⾃社のデザインシステムを学習して いない AI Agent は、公開ライブラリ と⽐較しても出⼒精度が劣る。 ガイドラインにも準拠していない。 2. 開発速度の停滞 プロトタイプと本番コードの差異に より、考慮漏れが発⽣。 コストが増し速度が上がらない。 3. 共有の壁 ローカル環境に閉じており、他者に プロトタイプをシェアできない。 Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. これらの問題を解決したのが Aegis Lab
11. Aegis Lab による開発環境の改善 詳細は技術記事を参照: https://tech.legalforce.co.jp/entry/aegis-agent-skills-improvement Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. 1. AI Coding Agent の出⼒精度向上 課題 公開ライブラリに⽐べ⾃社システムでの精度が劣る 解決策 ⾃社デザインシステムのベストプラクティスを AI に提供 2. デザインガイドラインへの準拠 課題 プロトタイプがガイドラインから逸脱する 解決策 AI への個別ルール提供（例: StatusLabel と Tag の使い分け徹底） 3. 開発速度の向上と不具合削減 課題 プロトタイプと本番コードの乖離によるコスト増 解決策 本番コードの構成ベースのプロトタイプ開発環境を提供 4. プロトタイプの共有を円滑化 課題 ローカル環境に閉じ、他者へのシェアが困難 解決策 URL 発⾏機能により、社内メンバー全員が閲覧可能に
12. 精度が上がり、デザイナーや PdM が ⾃由にプロトタイプを開発できるように なった現場で、 どのような変化が起きたのでしょうか？ Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies.
13. 1816回 プロトタイプの URL 発⾏回数 382個 プロトタイプの種類‧個数 56人 ユニークユーザー数 現在の運用状況 ※ 2026/05/12 時点 Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies.
14. AI Coding Agent の登場で変わった開発フロー AFTER プロトタイプ（全⼯程の統合） → 設計 / 実装 コミュニケーションの変化 BEFORE • PdMのドキュメントをベースに、デザイナーが画⾯ をFigmaに起こす • 起こした静的な画⾯を⾒て議論 • 何度か議論を重ね、設計‧実装フェーズに移る AFTER 動くプロトタイプをベースにプロダクトを磨く • PdM‧デザイナーがそれぞれプロトタイプを持ち寄 り、触りながら⽐較‧判断 • 「PdM とデザイナーの間にあった「認識ズレ」を解 消し、より⾃信を持って意思決定するができるよう になった」という声もあった Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. BEFORE 企画書 / PRD / 要件定義 → Figma → 設計 → 実装
15. プロトタイプ開発のメリット  認識齟齬の解消 「触れるもの」ベースの議論で齟齬が激減 • ⾔葉や静⽌画では伝わりにくいUIの差異を具体化 • チーム‧顧客に対し、具体的なイメージを共有し、より 質の⾼いフィードバックを得られるようになった  コスト‧⼯数削減 説明コストと作成コストの双⽅を削減 • 複数パターンのUIを⽐較する際の説明がスムーズに • 最初からコードを⽣成するため、Figma からコードへ変 換する⼯程を省略できた Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies.  意思決定の質向上 「触った感想」に基づく迅速な判断 • リアルなフィードバックにより⾃信を持って判断可能に • 具体的な挙動を確認しながらの議論で納得感が⾼まる  早期の品質担保 設計‧実装前の考慮漏れを早期発⾒ • エラーケース、ローディング、戻る導線の⽋如を察知 • ⼿戻りの⼯数を削減し、開発効率を最⼤化
16. プロトタイプ開発の注意点 Fat（肥⼤化）を防ぐ オーバーデザイニングに注意。関係 ない要素が⼊り込みがち。 ‧作った後に「削る」意識を強く持つ ‧ブレストの結果から最良のものを選び 抜く「審美眼」を養う 「Why」を⽰すドキュメント プロトタイプだけでは背景や経緯は 伝わらない。 ‧デザイナーの意図（Why）を明⽂化し て残す ‧AI Coding Agent や他メンバーが背景 を理解し、実装の意図を壊さない 「いきなり作らない」 何を作るかの前に「なぜ作るか」を 明確にする。 ‧「椅⼦が欲しい」というお客様がいた として、外注先に「椅⼦を作って」と発 注しますか？ 1 「どのような課題を解決したいのか」 2 「プロトタイプの開発」 3 「仕様のブラッシュアップ」 Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies.
17. まとめ  適切なベストプラクティスの伝達 ⾼速かつ⾼品質なプロトタイプ開発を実現するためには、 AIに対して設計思想や制約を適切に伝えることが不可⽋ Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies.  認識齟齬の解消と意思決定の迅速化 「触れる」プロトタイプによりチーム内の共通⾔語が形成 され、⾃信を持った意思決定と早期に考慮漏れを発⾒でき るようになった  削ぎ落とす意識と「Why」のドキュメント化 プロトタイプの肥⼤化を防ぐため、常にシンプルさを意識 し、設計背景を明⽂化して残すことが重要  「なぜ作るのか」への⽴ち返り 開発が⾼速化した今こそ、安易に作り始めるのではなく、 ⼀度⼿を⽌めて本質的な⽬的を⾒つめ直す姿勢が求められ る
18. Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. agenda AIによる現場と デザイナー の変化
19. Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. 作ること before 選択と判断 after
20. Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. 選択と判断 after 決める 迷いを整理して、最適な一手を選ぶ。 作る 試行錯誤を重ねて、価値ある形にする。 残す 知見を資産にして、再利用可能にする。
21. 作るコストが下がった今、作れるから作るのではなく、顧 客にとって意味があるか、事業として成⽴するかを⾒極め る。複数の選択肢から、根拠を持って選ぶ。これからのデ ザイナーに求められる最も本質的な⼒だと考えています。 決める 何を作るかではなく、何を作 らないかを決められる力
22. 作る⼒がなくなるわけではありません。むしろ前提です。 ただし、AIと協働して⾼速に検証サイクルを回せるからこ そ、「何を検証すべきか」を設計する⼒が問われます。考 慮漏れに早く気づけたのは、偶然ではなく、検証の観点を 持てていたからです。体験品質は、意図を持って設計しな ければ実現できません。 作る 作る力は前提。 その上で何を検証すべきか設 計できる力
23. AIが活⽤される現場では、個⼈の頭の中にある暗黙知の ままでは、⼈もAIも再現できない。判断基準やベストプ ラクティスを⾔語化し、組織の資産にする。それが次の プロジェクトの品質と速度を⽀えます。「残す」は、 個⼈の成果を超えて組織を強くする⼒です。 残す 判断基準を言語化し、 人にもAIにも再現可能な形 にする力
24. Confidential This document is provided for your convenience only and may not be copied, quoted or made available to third parties without the prior written consent of LegalOn Technologies. 変化の真っ只中 AI時代のデザイナー像をゼロから定義し直しています。 変化を一緒に作っていける方を募集中。
25. noteで情報を発信しています！ 例：アクセシビリティ、ポートフォリオ 提出の廃止など