プロダクト内で混在するUIと技術スタック、コーディングエージェントで整理できるか？

「AI駆動デザイン開発勉強会～各社の取り組みや課題から学ぶ会～」で使用したスライドです。
https://techplay.jp/event/985857

Transcript

1. プロダクト内で混在する UIと技術スタック 
 コーディングエージェントで整理できるか？ 株式会社 RightTouch 菅家大地 2025/9/25 AI駆動デザイン開発勉強会
2. © 2024 RightTouch Inc.　|　Confidential 2 自己紹介
 Daichi Kanke 株式会社RightTouch デザインエンジニア kan_dai KanDai 宮城県 仙台フロントエンドUG / Product Engineer Session ・ デザイナー → フロントエンドエンジニア → デザインエンジニア
 ・ RightTouchの一人目デザインエンジニア 
 ・ UI実装をメインにフロントエンド開発に従事 
 

3. © 2024 RightTouch Inc.　|　Confidential 3 AGENDA 1. 会社紹介・プロダクト紹介 
 2. 異なるUIや技術スタック混在問題 
 3. AIコーディングツールを使って整理 

4. © 2024 RightTouch Inc.　|　Confidential 4 AGENDA 1. 会社紹介・プロダクト紹介 
 2. 異なるUIや技術スタック混在問題 
 3. AIコーディングツールを使って整理 

5. 5 株式会社RightTouch 設⽴：2021年12⽉ 従業員：52名（2025年7⽉時点） 2020年9⽉ 2021年1⽉ 2021年12⽉ 2022年3⽉ 2023年10⽉ 2023年10⽉ 2024年1⽉ 2024年10⽉ 2024年11⽉ 2024年12⽉ 2025年4⽉ 次世代Customer Supportの実証実験を複数顧客と開始 設⽴準備室を⽴ち上げ 株式会社RightTouchを創業 Webサポートプラットフォーム 「KARTE RightSupport（β）をリリース Webと電話をつなぎ、全く新しい問い合わせ体験を作る 2ndプロダクト「RightConnect by KARTE（β）」をリリース 「RightSupport by KARTE」正式版を提供開始 ベストベンチャー100に初選出 ⽣成AI基盤「Right Intelligence」を発表 新プロダクト「RightVoicebot by KARTE（β）」をリリース 新プロダクト「RightVoC by KARTE（β）」をリリース シリーズAラウンドで8億円の資⾦調達を発表 沿⾰
6. © 2024 RightTouch Inc.　|　Confidential 6 ミッション 
 あらゆる⼈を負の体験から解放し、 可能性を引き出す OUR MISSION 私たちのミッション ⼀般⽣活者 企業‧サービス 「負の体験」を解決する → 企業/サービスの本来価値が伝わる → 豊かな⽣活者体験が広がる ＆ 経済が活性化する
7. © 2024 RightTouch Inc.　|　Confidential 事業内容：カスタマーサポートプラットフォーム 
 7
8. © 2024 RightTouch Inc.　|　Confidential RightSupport by KARTE
 8
9. © 2024 RightTouch Inc.　|　Confidential 9 AGENDA 1. 会社紹介・プロダクト紹介 
 2. 異なるUIや技術スタック混在問題 
 3. AIコーディングツールを使って整理 

10. © 2024 RightTouch Inc.　|　Confidential 10 プロダクトの歴史 
 2022年3⽉ プロダクトβリリース 2023年10⽉ 新デザインシステムの適⽤開始 「BAISU」というデザインシステム (⾃社開発) フレームワーク: React スタイリング：Vanilla Extract (CSS inJS) UIコンポーネント：BAISU 「Sour」というデザインシステム (⾃社開発) フレームワーク: React スタイリング：Tailwind CSS UIコンポーネント：Sour
11. © 2024 RightTouch Inc.　|　Confidential 11 プロダクトの歴史 

12. © 2024 RightTouch Inc.　|　Confidential 12 プロダクトの歴史 

13. 🤔
 新デザインシステムを適用する前後で 
 UIと技術スタックが異なる状態に 

14. © 2024 RightTouch Inc.　|　Confidential 14 何が問題なのか？ 
 • ページによってUIが異なるのでユーザー体験に影響がある • 開発体験への影響 ◦ 古いページを触らないわけではないので異なる技術スタックの 開発を行き来することになりコンテキストスイッチが発生 ◦ 古い技術スタックという知らなくていいことに対する学習コスト ◦ デザインシステムによってコンポーネントの有無が異なるため 開発スピードに影響する
15. © 2024 RightTouch Inc.　|　Confidential 15 統一できないのか？ 
 • できるならしたい • シンプルにリソースが限られている ため手が回らない • 作業としても意外と工数がかかる • ページとして動いていて動作に問題があるわけではないので、 デザインシステムのリプレイスは優先度が上がりにくい
16. © 2024 RightTouch Inc.　|　Confidential 16 AGENDA 1. 会社紹介・プロダクト紹介 
 2. 異なるUIや技術スタック混在問題 
 3. AIコーディングツールを使って整理 

17. © 2024 RightTouch Inc.　|　Confidential コーディングエージェントの登場 
 17 • CursorやClaude Codeのような コーディングエージェントが登場 • これらを使うことでデザインシステムの リプレイスを効率的に行うことができるのではと 考え試してみることに • 前提としてFigmaのデザインは無し
18. DEMO
19. © 2024 RightTouch Inc.　|　Confidential 19 プロダクトの歴史 
 対象
20. © 2024 RightTouch Inc.　|　Confidential 20 プロダクトの歴史 
 参考
21. © 2024 RightTouch Inc.　|　Confidential やったこと / やり方
 21 • 前提条件やルールをまとめた移行用のドキュメントを作成 ◦ コンポーネントAはコンポーネントBに置き換えるのような 決まったルールはAIにドキュメントを作ってもらった • 指示する時に構成が近い参考ページを提示 する • 自社の有志が開発したデザインシステムのMCPで移行をサポート • Playwright MCPを使って実際のページを確認 させる
22. © 2024 RightTouch Inc.　|　Confidential 移行用ドキュメントを作成して指示 (例)
 22 
 ${移行ルールのドキュメント } を参考に 
 ページAを新しいデザインシステムに移行してください 
 

23. © 2024 RightTouch Inc.　|　Confidential 結果その1 (ルールのみ )
 23 ほぼほぼ使い物にならない結果 

24. © 2024 RightTouch Inc.　|　Confidential 移行用ドキュメント + 参考ページを提示 (例)
 24 
 ${移行ルールのドキュメント } を参考にページ Aを移行してください 
 ページBは新しい技術スタックで作られていて、 
 構成がページ Aに似ているので参考にしてください 
 

25. © 2024 RightTouch Inc.　|　Confidential 結果その2 (ルール + 参考ページ )
 25 ルールだけに比べて明らかに精度が向上 

26. © 2024 RightTouch Inc.　|　Confidential 移行用ドキュメント + 参考ページを提示 + Playwright MCP (例)
 26 
 ${移行ルールのドキュメント } を参考にページ Aを移行してください 
 ページBは新しい技術スタックで作られていて、 
 構成がページ Aに似ているので参考にしてください 
 
 移行が終わったら Playwright MCPで対象ページと参考ページを比較して 
 参考ページの見た目に合わせて調整してください 
 

27. © 2024 RightTouch Inc.　|　Confidential 結果その3 (ルール + 参考ページ + Playwright MCP)
 27 だいぶ精度が向上して少し調整したら使えそうなレベル 

28. © 2024 RightTouch Inc.　|　Confidential やったこと / やり方 (2回目)
 28 • 前提条件やルールをまとめた移行用のドキュメントを作成 ◦ コンポーネントAはコンポーネントBに置き換えるのような 決まったルールはAIにドキュメントを作ってもらった • 指示する時に構成が近い参考ページを提示 する • 自社の有志が開発したデザインシステムのMCPで移行をサポート • Playwright MCPを使って実際のページを確認 させる
29. © 2024 RightTouch Inc.　|　Confidential 結果と所感 
 29 • 7月からメイン開発と並行で進めて14ページのリプレースが完了 • 全て任せるのは 難しいので人のチェックと調整が前提 • 全体的な工数は少なくなる しリプレイスに手をつけるきっかけ になる • (自分には) 完全にメイン開発と並行するのは難しかった ◦ コンテキストスイッチで集中が切れるのが辛かった ◦ 業務後にお願いして朝に確認するとかを試したい
30. © 2024 RightTouch Inc.　|　Confidential 30 全職種募集中 

31. © 2024 RightTouch Inc.　|　Confidential 31 Product Engineer Session #5