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
デザインレビューをAIに支援してもらう.pdf
Search
irom219
October 10, 2025
Programming
0
47
デザインレビューをAIに支援してもらう.pdf
irom219
October 10, 2025
Tweet
Share
More Decks by irom219
See All by irom219
DroidKaigi CfP分析
yukihiromori
0
290
レイヤードアーキテクチャにおける例外との向き合い方
yukihiromori
1
6.1k
DMM Android Meetup#5 「例外と向き合う」
yukihiromori
2
830
Android meetup #3 モバイルエンジニア向けのGCP Cloud Functions
yukihiromori
2
380
DMM android meatup #2 Android OpenGLES
yukihiromori
2
440
Other Decks in Programming
See All in Programming
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
CSC509 Lecture 03
javiergs
PRO
0
330
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
840
What's new in Spring Modulith?
olivergierke
1
140
チームの境界をブチ抜いていけ
tokai235
0
170
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
130
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
670
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.1k
止められない医療アプリ、そっと Swift 6 へ
medley
1
170
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
310
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
A better future with KSS
kneath
239
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Language of Interfaces
destraynor
162
25k
The Invisible Side of Design
smashingmag
302
51k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
デザインレビューを AIに支援して もらう 2025/10/10 株式会社リクルート 森 幸浩
自己紹介 株式会社リクルート HOT PEPPER Beauty でiOS,Android横断のチームの チームリーダーをしています。 2015 ~ 2019
広告系会社 (2+2年) 2019 ~ 2023 合同会社DMM.com (4年) 2023/8 ~ 株式会社リクルート 2023/10 ~ 2024/6 : HOT PEPPER Beauty WORK アプリ開発リーダー 2024/6 ~ : HOT PEPPER Beauty アプリチームリーダー
こんな課題ありませんか? UIを作っている時にデザイン通りに実装できているか不安 ...! PRをレビューしている時にマージンやパディング設定などを 1つ1つ確認するのに手間がかかる ...! そんな、悩みを解決するために ... Figma mcpとGithub
mcpを組み合わせることで、 Github Copilotにデザインレビューをやってもらう AI 活用術をご紹介します!
システム構成図 Github CopilotにFigma mcpとGithub mcpを登録し ・デザインはFigmaから取得する ・PR情報はGithubから取得する いたってシンプルな構成です。 Github CopilotはAndroid
StudioのPluginを使用しま す。
システムの導入 ~GHEの接続①~ 事前にGHEのmcpサーバを立てるた めに仮想環境をローカルに用意しま す。 1例としてDocker環境としてColima を用意します。
システムの導入 ~GHEの接続②~ Docker PluginをAndroidStudioの Pluginsのマーケットストアで入れま しょう。
システムの導入 ~GHEの接続③~ Servicesからadd Docker instancesで Colimaでインスタンス作成しましょう。 Servicesは左のツールバーにあります。 configureでColima選択しましょう。 Services
システムの導入 ~GHEの接続④~ Githubアクセストークンの作成 Githubにログイン → Settings → Developer settings →
Personal access tokens → Tokens (classic) → Generate new token で、トークンに名前を付け、有効期限とスコープを設定してアクセストークンを作成しましょう。 PRのURLをCopilotに渡してレビューしてもらうというユースケースの場合は repoスコープを設定するとできま す。
システムの導入 ~GHEの接続⑤~ AndroidStudioのmcp.jsonを開いて左記を追加しましょ う。 AndroidStudio > Settings > GithubCopilot >
Model Context Protocol(MCP) > Configures で開けます。
システムの導入 ~Figmaの接続①~ GLips/Figma-Context-MCP を使用します。 Figmaアクセストークンの作成 Figmaにログイン → Settings →Securityタブ→ Personal
access tokensセクション → Generate new tokenをクリック で、トークンに名前を付けアクセストークンを作成しましょう。 権限はRead権限でFile contentと Dev resourcesを選択しましょう。
システムの導入 ~Figmaの接続②~ AndroidStudioのmcp.jsonを開いて左記を追加しましょ う。 AndroidStudio > Settings > GithubCopilot >
Model Context Protocol(MCP) > Configures で開けます。
依頼プロンプト 依頼プロンプトは下記のようにして Github CopilotのAgentモードで依頼します。 PRのURL及び、実装対象のデザイン Nodeのリンクを指定して依頼します。
正誤検証 人によるレビュー済みの PRに実際のデザインとは異なるマージン設定をあえて設定し 誤りを検知してくれるのかを検証してみました チェックボックスの左マージンをわざと 変更する
実行結果① 問題なくPR内容もデザインも取得できて、実装内容を理解してレビューしてくれていそう ...
実行結果② なんと、マージンの調整が必要と指摘してくれました!
修正の依頼① どうせなので、そのまま修正も依頼してみました。
修正の依頼② よくよくみてみると、今回わざと変更したマージン以外にもコンテンツエリアの左マージンも修正している ...おかし いぞこれは...
修正内容の確認① AIによる修正内容はこちら チェックボックス側は意図していれた誤りだが、コンテンツエリア側は勝手に修正されていた チェックボックスの左マージンを修正 コンテンツエリアの左マージンを勝手に 修正
修正内容の確認② 改めてマージン定義を見直してみる
修正内容の確認③ チェックボックスの左マージンは 16dpなので正しく修正 されている
修正内容の確認④ コンテンツエリアの左マージンは 12dpなので... あれ、この修正実は正しいやんとなる。
結果 つまり、AIによる修正が正しかった
結論 今回のケースでは、人間では見落としがちなポイントも AIが検知できることを確認できた!