---
title: AI×VRT SSOTな UIカタログで手戻り抑制
tags: 
author: [Motone Adachi](https://docswell.com/user/waricoma)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/3JK964MMJD.jpg?width=480
description: https://increments.connpass.com/event/387592 で登壇させていただきました。
published: July 09, 26
canonical: https://docswell.com/s/waricoma/5Y89MR-2026-04-28-190000
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/3JK964MMJD.jpg)

AI×VRT SSOTな
UIカタログで手戻り抑制
Motone Adachi | x.com/waritocomatta (撮影/SNS: OK)


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LE3W6LY2E5.jpg)

お礼 と 自己紹介 - エンジニアやってます👨‍💻
㈱ビザスク と ナイトランプ(同) に所属
システムリプレース や 社外技術支援 等
← 2社とも Qiita 投稿 や AI 活用 💪
企業アドベントカレンダー完走 / AI関連の記事多数


# Page. 3

![Page Image](https://bcdn.docswell.com/page/8EDKVN567G.jpg)

https://github.com/fumiya-kume/ai-in-japan


# Page. 4

![Page Image](https://bcdn.docswell.com/page/V7PKV5DZJ8.jpg)

🎨 Figma上にあるUIコンポーネ
ントがプロダクトに実装されて
ない / 見た目が違う
こんなお悩みは
ございませんか？
とくに デザイナ / エンジニア / PdM
👻 プロダクトに実装されてるが
Figma に存在しない幽霊UIコン
ポーネントの存在
🔥 依存ライブラリの更新で見た
目が崩れないか心配 & デグレの
チェックも大変


# Page. 5

![Page Image](https://bcdn.docswell.com/page/2JVVZP1MJQ.jpg)

🎨 Figma上にあるUIコンポーネ
ントがプロダクトに実装されて
ない / 見た目が違う
これらを解決したい
メンテナンスコストやコミュニケー
ションコスト、動作確認の手間
👻 プロダクトに実装されてるが
Figma に存在しない幽霊UIコン
ポーネントの存在
🔥 依存ライブラリの更新で見た
目が崩れないか心配 & デグレの
チェックも大変


# Page. 6

![Page Image](https://bcdn.docswell.com/page/5EGL4P2XJL.jpg)

よくある手法
UIカタログの構築/維持


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4JQYG2P57P.jpg)

よくある手法
UIカタログの構築/維持 は大変


# Page. 8

![Page Image](https://bcdn.docswell.com/page/K74W5LYVE1.jpg)

よくある手法
UIカタログの構築/維持 は大変


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LJ1YWL64EG.jpg)

よくある手法
UIカタログの構築/維持 は大変


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GJWG6VWZ72.jpg)

よくある手法
UIカタログの構築/維持 は大変 → 自動メンテ


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EZLY45L73.jpg)

構成 (対象アプリ)


# Page. 12

![Page Image](https://bcdn.docswell.com/page/Y76WD39M7V.jpg)

構成 (UIカタログ専用リポジトリを別途用意)


# Page. 13

![Page Image](https://bcdn.docswell.com/page/G75M3LNQ74.jpg)

構成 (対象アプリとUIカタログを同期させる部分)


# Page. 14

![Page Image](https://bcdn.docswell.com/page/9J29ZL5WER.jpg)

✨️プロダクトには一切手を加え
ない → 直ぐ導入できる
利点
同期待ちや PRレビュー待ち で、
若干同期インターバルはある🙏
💰️実装やメンテナンスコスト →
プロダクトへの影響を切り離し
す &
AIに思いっきり
動いていただいて人的には
低コストで実現


# Page. 15

![Page Image](https://bcdn.docswell.com/page/DEY4RQK9JM.jpg)

出来上がったもの


# Page. 16

![Page Image](https://bcdn.docswell.com/page/VJNYDKRD78.jpg)

出来上がったもの


# Page. 17

![Page Image](https://bcdn.docswell.com/page/YE9PGVM8J3.jpg)

出来上がったもの


# Page. 18

![Page Image](https://bcdn.docswell.com/page/GE8DVPLZED.jpg)

✨️プロダクトには一切手を加え
ない → 直ぐ導入できる
利点
同期待ちや PRレビュー待ち で、
若干同期インターバルはある🙏
💰️実装やメンテナンスコスト →
プロダクトへの影響を切り離し
す &
AIに思いっきり
動いていただいて人的には
低コストで実現


# Page. 19

![Page Image](https://bcdn.docswell.com/page/LELM51L17R.jpg)

✨️これも自動化したい
同期待ちや PRレビュー待ち で、
若干同期インターバルはある🙏


# Page. 20

![Page Image](https://bcdn.docswell.com/page/4JMY3WM5JW.jpg)

✨️これも自動化したい
→ VRT (Visual Regression Test)
同期待ちや PRレビュー待ち で、
若干同期インターバルはある🙏


# Page. 21

![Page Image](https://bcdn.docswell.com/page/PJR9QYVZ79.jpg)

左 (現在のソースコードから作った正となるUIの画像)
右 (わざと正と異なる状態にしたコードから作られた画像)
→ 画像処理で全自動間違い探し → PRレビュー/動作確認短縮💪


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PEXQ5GZ1JX.jpg)

左 (現在のソースコードから作った正となるUIの画像)
右 (わざと正と異なる状態にしたコードから作られた画像)
→ 画像処理で全自動間違い探し → PRレビュー/動作確認短縮💪


# Page. 23

![Page Image](https://bcdn.docswell.com/page/3EK9648MED.jpg)

✨️これも自動化したい → ✌
同期待ちや PRレビュー待ち で、
若干同期インターバルはある🙏


# Page. 24

![Page Image](https://bcdn.docswell.com/page/L73W6L2275.jpg)



# Page. 25

![Page Image](https://bcdn.docswell.com/page/87DKVNZ6JG.jpg)

ご清聴ありがとうございました！
AI×VRT SSOTな
UIカタログで手戻り抑制
Motone Adachi | x.com/waritocomatta (撮影/SNS: OK)