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

by Daichi

Slide 1

Slide 1 text

プロダクト内で混在する UIと技術スタック   コーディングエージェントで整理できるか？株式会社 RightTouch 菅家大地 2025/9/25 AI駆動デザイン開発勉強会

Slide 2

Slide 2 text

© 2024 RightTouch Inc.　|　Confidential 2 自己紹介  Daichi Kanke 株式会社RightTouch デザインエンジニア kan_dai KanDai 宮城県仙台フロントエンドUG / Product Engineer Session ・デザイナー → フロントエンドエンジニア → デザインエンジニア  ・ RightTouchの一人目デザインエンジニア   ・ UI実装をメインにフロントエンド開発に従事    

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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億円の資⾦調達を発表沿⾰

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

© 2024 RightTouch Inc.　|　Confidential 14 何が問題なのか？   ● ページによってUIが異なるのでユーザー体験に影響がある ● 開発体験への影響 ○ 古いページを触らないわけではないので異なる技術スタックの開発を行き来することになりコンテキストスイッチが発生 ○ 古い技術スタックという知らなくていいことに対する学習コスト ○ デザインシステムによってコンポーネントの有無が異なるため開発スピードに影響する

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

DEMO

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

© 2024 RightTouch Inc.　|　Confidential やったこと / やり方  21 ● 前提条件やルールをまとめた移行用のドキュメントを作成 ○ コンポーネントAはコンポーネントBに置き換えるのような決まったルールはAIにドキュメントを作ってもらった ● 指示する時に構成が近い参考ページを提示する ● 自社の有志が開発したデザインシステムのMCPで移行をサポート ● Playwright MCPを使って実際のページを確認させる

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Slide 28

Slide 28 text

© 2024 RightTouch Inc.　|　Confidential やったこと / やり方 (2回目)  28 ● 前提条件やルールをまとめた移行用のドキュメントを作成 ○ コンポーネントAはコンポーネントBに置き換えるのような決まったルールはAIにドキュメントを作ってもらった ● 指示する時に構成が近い参考ページを提示する ● 自社の有志が開発したデザインシステムのMCPで移行をサポート ● Playwright MCPを使って実際のページを確認させる

Slide 29

Slide 29 text

© 2024 RightTouch Inc.　|　Confidential 結果と所感   29 ● 7月からメイン開発と並行で進めて14ページのリプレースが完了 ● 全て任せるのは難しいので人のチェックと調整が前提 ● 全体的な工数は少なくなるしリプレイスに手をつけるきっかけになる ● (自分には) 完全にメイン開発と並行するのは難しかった ○ コンテキストスイッチで集中が切れるのが辛かった ○ 業務後にお願いして朝に確認するとかを試したい