Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Daichi Daichi
September 25, 2025

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

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

Avatar for Daichi

Daichi

September 25, 2025
Tweet

More Decks by Daichi

Other Decks in Technology

Transcript

  1. © 2024 RightTouch Inc. | Confidential 2 自己紹介
 Daichi Kanke 株式会社RightTouch デザインエンジニア

    kan_dai KanDai 宮城県 仙台フロントエンドUG / Product Engineer Session ・ デザイナー → フロントエンドエンジニア → デザインエンジニア
 ・ RightTouchの一人目デザインエンジニア 
 ・ UI実装をメインにフロントエンド開発に従事 
 

  2. © 2024 RightTouch Inc. | Confidential 3 AGENDA 1. 会社紹介・プロダクト紹介 
 2.

    異なるUIや技術スタック混在問題 
 3. AIコーディングツールを使って整理 

  3. © 2024 RightTouch Inc. | Confidential 4 AGENDA 1. 会社紹介・プロダクト紹介 
 2.

    異なるUIや技術スタック混在問題 
 3. AIコーディングツールを使って整理 

  4. 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億円の資⾦調達を発表 沿⾰
  5. © 2024 RightTouch Inc. | Confidential 6 ミッション 
 あらゆる⼈を負の体験から解放し、 可能性を引き出す OUR

    MISSION 私たちのミッション ⼀般⽣活者 企業‧サービス 「負の体験」を解決する → 企業/サービスの本来価値が伝わる → 豊かな⽣活者体験が広がる & 経済が活性化する
  6. © 2024 RightTouch Inc. | Confidential 9 AGENDA 1. 会社紹介・プロダクト紹介 
 2.

    異なるUIや技術スタック混在問題 
 3. AIコーディングツールを使って整理 

  7. © 2024 RightTouch Inc. | Confidential 10 プロダクトの歴史 
 2022年3⽉ プロダクトβリリース 2023年10⽉

    新デザインシステムの適⽤開始 「BAISU」というデザインシステム (⾃社開発) フレームワーク: React スタイリング:Vanilla Extract (CSS inJS) UIコンポーネント:BAISU 「Sour」というデザインシステム (⾃社開発) フレームワーク: React スタイリング:Tailwind CSS UIコンポーネント:Sour
  8. © 2024 RightTouch Inc. | Confidential 14 何が問題なのか? 
 • ページによってUIが異なるのでユーザー体験に影響がある •

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

    シンプルにリソースが限られている ため手が回らない • 作業としても意外と工数がかかる • ページとして動いていて動作に問題があるわけではないので、 デザインシステムのリプレイスは優先度が上がりにくい
  10. © 2024 RightTouch Inc. | Confidential 16 AGENDA 1. 会社紹介・プロダクト紹介 
 2.

    異なるUIや技術スタック混在問題 
 3. AIコーディングツールを使って整理 

  11. © 2024 RightTouch Inc. | Confidential コーディングエージェントの登場 
 17 • CursorやClaude Codeのような

    コーディングエージェントが登場 • これらを使うことでデザインシステムの リプレイスを効率的に行うことができるのではと 考え試してみることに • 前提としてFigmaのデザインは無し
  12. © 2024 RightTouch Inc. | Confidential やったこと / やり方
 21 • 前提条件やルールをまとめた移行用のドキュメントを作成

    ◦ コンポーネントAはコンポーネントBに置き換えるのような 決まったルールはAIにドキュメントを作ってもらった • 指示する時に構成が近い参考ページを提示 する • 自社の有志が開発したデザインシステムのMCPで移行をサポート • Playwright MCPを使って実際のページを確認 させる
  13. © 2024 RightTouch Inc. | Confidential 移行用ドキュメントを作成して指示 (例)
 22 
 ${移行ルールのドキュメント }

    を参考に 
 ページAを新しいデザインシステムに移行してください 
 

  14. © 2024 RightTouch Inc. | Confidential 移行用ドキュメント + 参考ページを提示 (例)
 24 


    ${移行ルールのドキュメント } を参考にページ Aを移行してください 
 ページBは新しい技術スタックで作られていて、 
 構成がページ Aに似ているので参考にしてください 
 

  15. © 2024 RightTouch Inc. | Confidential 移行用ドキュメント + 参考ページを提示 + Playwright MCP

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

  16. © 2024 RightTouch Inc. | Confidential 結果その3 (ルール + 参考ページ + Playwright

    MCP)
 27 だいぶ精度が向上して少し調整したら使えそうなレベル 

  17. © 2024 RightTouch Inc. | Confidential やったこと / やり方 (2回目)
 28 •

    前提条件やルールをまとめた移行用のドキュメントを作成 ◦ コンポーネントAはコンポーネントBに置き換えるのような 決まったルールはAIにドキュメントを作ってもらった • 指示する時に構成が近い参考ページを提示 する • 自社の有志が開発したデザインシステムのMCPで移行をサポート • Playwright MCPを使って実際のページを確認 させる
  18. © 2024 RightTouch Inc. | Confidential 結果と所感 
 29 • 7月からメイン開発と並行で進めて14ページのリプレースが完了 •

    全て任せるのは 難しいので人のチェックと調整が前提 • 全体的な工数は少なくなる しリプレイスに手をつけるきっかけ になる • (自分には) 完全にメイン開発と並行するのは難しかった ◦ コンテキストスイッチで集中が切れるのが辛かった ◦ 業務後にお願いして朝に確認するとかを試したい
  19. 32