Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
プロダクト内で混在するUIと技術スタック、コーディングエージェントで整理できるか?
Search
Daichi
September 25, 2025
Technology
0
30
プロダクト内で混在するUIと技術スタック、コーディングエージェントで整理できるか?
「AI駆動デザイン開発勉強会~各社の取り組みや課題から学ぶ会~」で使用したスライドです。
https://techplay.jp/event/985857
Daichi
September 25, 2025
Tweet
Share
More Decks by Daichi
See All by Daichi
◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた
kandai
0
1.7k
マージンを使わずに Webサイト構築してみた
kandai
0
3.3k
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.5k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.5k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
kandai
1
1.7k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.5k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
1.1k
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
570
CSS組版で技術書を作った話
kandai
0
430
Other Decks in Technology
See All in Technology
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.1k
BtoBプロダクト開発の深層
16bitidol
0
350
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
570
いまさら聞けない ABテスト入門
skmr2348
1
210
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
1
580
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
210
社内お問い合わせBotの仕組みと学び
nish01
0
410
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
Green Tea Garbage Collector の今
zchee
PRO
2
390
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
350
多野優介
tanoyusuke
1
450
VCC 2025 Write-up
bata_24
0
180
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Being A Developer After 40
akosma
91
590k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
GitHub's CSS Performance
jonrohan
1032
460k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Invisible Side of Design
smashingmag
301
51k
Building Applications with DynamoDB
mza
96
6.6k
Transcript
プロダクト内で混在する UIと技術スタック コーディングエージェントで整理できるか? 株式会社 RightTouch 菅家大地 2025/9/25 AI駆動デザイン開発勉強会
© 2024 RightTouch Inc. | Confidential 2 自己紹介 Daichi Kanke 株式会社RightTouch デザインエンジニア
kan_dai KanDai 宮城県 仙台フロントエンドUG / Product Engineer Session ・ デザイナー → フロントエンドエンジニア → デザインエンジニア ・ RightTouchの一人目デザインエンジニア ・ UI実装をメインにフロントエンド開発に従事
© 2024 RightTouch Inc. | Confidential 3 AGENDA 1. 会社紹介・プロダクト紹介 2.
異なるUIや技術スタック混在問題 3. AIコーディングツールを使って整理
© 2024 RightTouch Inc. | Confidential 4 AGENDA 1. 会社紹介・プロダクト紹介 2.
異なるUIや技術スタック混在問題 3. AIコーディングツールを使って整理
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億円の資⾦調達を発表 沿⾰
© 2024 RightTouch Inc. | Confidential 6 ミッション あらゆる⼈を負の体験から解放し、 可能性を引き出す OUR
MISSION 私たちのミッション ⼀般⽣活者 企業‧サービス 「負の体験」を解決する → 企業/サービスの本来価値が伝わる → 豊かな⽣活者体験が広がる & 経済が活性化する
© 2024 RightTouch Inc. | Confidential 事業内容:カスタマーサポートプラットフォーム 7
© 2024 RightTouch Inc. | Confidential RightSupport by KARTE 8
© 2024 RightTouch Inc. | Confidential 9 AGENDA 1. 会社紹介・プロダクト紹介 2.
異なるUIや技術スタック混在問題 3. AIコーディングツールを使って整理
© 2024 RightTouch Inc. | Confidential 10 プロダクトの歴史 2022年3⽉ プロダクトβリリース 2023年10⽉
新デザインシステムの適⽤開始 「BAISU」というデザインシステム (⾃社開発) フレームワーク: React スタイリング:Vanilla Extract (CSS inJS) UIコンポーネント:BAISU 「Sour」というデザインシステム (⾃社開発) フレームワーク: React スタイリング:Tailwind CSS UIコンポーネント:Sour
© 2024 RightTouch Inc. | Confidential 11 プロダクトの歴史
© 2024 RightTouch Inc. | Confidential 12 プロダクトの歴史
🤔 新デザインシステムを適用する前後で UIと技術スタックが異なる状態に
© 2024 RightTouch Inc. | Confidential 14 何が問題なのか? • ページによってUIが異なるのでユーザー体験に影響がある •
開発体験への影響 ◦ 古いページを触らないわけではないので異なる技術スタックの 開発を行き来することになりコンテキストスイッチが発生 ◦ 古い技術スタックという知らなくていいことに対する学習コスト ◦ デザインシステムによってコンポーネントの有無が異なるため 開発スピードに影響する
© 2024 RightTouch Inc. | Confidential 15 統一できないのか? • できるならしたい •
シンプルにリソースが限られている ため手が回らない • 作業としても意外と工数がかかる • ページとして動いていて動作に問題があるわけではないので、 デザインシステムのリプレイスは優先度が上がりにくい
© 2024 RightTouch Inc. | Confidential 16 AGENDA 1. 会社紹介・プロダクト紹介 2.
異なるUIや技術スタック混在問題 3. AIコーディングツールを使って整理
© 2024 RightTouch Inc. | Confidential コーディングエージェントの登場 17 • CursorやClaude Codeのような
コーディングエージェントが登場 • これらを使うことでデザインシステムの リプレイスを効率的に行うことができるのではと 考え試してみることに • 前提としてFigmaのデザインは無し
DEMO
© 2024 RightTouch Inc. | Confidential 19 プロダクトの歴史 対象
© 2024 RightTouch Inc. | Confidential 20 プロダクトの歴史 参考
© 2024 RightTouch Inc. | Confidential やったこと / やり方 21 • 前提条件やルールをまとめた移行用のドキュメントを作成
◦ コンポーネントAはコンポーネントBに置き換えるのような 決まったルールはAIにドキュメントを作ってもらった • 指示する時に構成が近い参考ページを提示 する • 自社の有志が開発したデザインシステムのMCPで移行をサポート • Playwright MCPを使って実際のページを確認 させる
© 2024 RightTouch Inc. | Confidential 移行用ドキュメントを作成して指示 (例) 22 ${移行ルールのドキュメント }
を参考に ページAを新しいデザインシステムに移行してください
© 2024 RightTouch Inc. | Confidential 結果その1 (ルールのみ ) 23 ほぼほぼ使い物にならない結果
© 2024 RightTouch Inc. | Confidential 移行用ドキュメント + 参考ページを提示 (例) 24
${移行ルールのドキュメント } を参考にページ Aを移行してください ページBは新しい技術スタックで作られていて、 構成がページ Aに似ているので参考にしてください
© 2024 RightTouch Inc. | Confidential 結果その2 (ルール + 参考ページ ) 25
ルールだけに比べて明らかに精度が向上
© 2024 RightTouch Inc. | Confidential 移行用ドキュメント + 参考ページを提示 + Playwright MCP
(例) 26 ${移行ルールのドキュメント } を参考にページ Aを移行してください ページBは新しい技術スタックで作られていて、 構成がページ Aに似ているので参考にしてください 移行が終わったら Playwright MCPで対象ページと参考ページを比較して 参考ページの見た目に合わせて調整してください
© 2024 RightTouch Inc. | Confidential 結果その3 (ルール + 参考ページ + Playwright
MCP) 27 だいぶ精度が向上して少し調整したら使えそうなレベル
© 2024 RightTouch Inc. | Confidential やったこと / やり方 (2回目) 28 •
前提条件やルールをまとめた移行用のドキュメントを作成 ◦ コンポーネントAはコンポーネントBに置き換えるのような 決まったルールはAIにドキュメントを作ってもらった • 指示する時に構成が近い参考ページを提示 する • 自社の有志が開発したデザインシステムのMCPで移行をサポート • Playwright MCPを使って実際のページを確認 させる
© 2024 RightTouch Inc. | Confidential 結果と所感 29 • 7月からメイン開発と並行で進めて14ページのリプレースが完了 •
全て任せるのは 難しいので人のチェックと調整が前提 • 全体的な工数は少なくなる しリプレイスに手をつけるきっかけ になる • (自分には) 完全にメイン開発と並行するのは難しかった ◦ コンテキストスイッチで集中が切れるのが辛かった ◦ 業務後にお願いして朝に確認するとかを試したい
© 2024 RightTouch Inc. | Confidential 30 全職種募集中
© 2024 RightTouch Inc. | Confidential 31 Product Engineer Session #5
32