デザインレビューをAIに支援してもらう.pdf

Transcript

1. デザインレビューを AIに支援して もらう 2025/10/10 株式会社リクルート 森 幸浩
2. 自己紹介 株式会社リクルート 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 アプリチームリーダー
3. こんな課題ありませんか？ UIを作っている時にデザイン通りに実装できているか不安 ...！ PRをレビューしている時にマージンやパディング設定などを 1つ1つ確認するのに手間がかかる ...! そんな、悩みを解決するために ... Figma mcpとGithub mcpを組み合わせることで、 Github Copilotにデザインレビューをやってもらう AI 活用術をご紹介します！
4. システム構成図 Github CopilotにFigma mcpとGithub mcpを登録し ・デザインはFigmaから取得する ・PR情報はGithubから取得する いたってシンプルな構成です。 Github CopilotはAndroid StudioのPluginを使用しま す。
5. システムの導入 ~GHEの接続①~ 事前にGHEのmcpサーバを立てるた めに仮想環境をローカルに用意しま す。 1例としてDocker環境としてColima を用意します。
6. システムの導入 ~GHEの接続②~ Docker PluginをAndroidStudioの Pluginsのマーケットストアで入れま しょう。
7. システムの導入 ~GHEの接続③~ Servicesからadd Docker instancesで Colimaでインスタンス作成しましょう。 Servicesは左のツールバーにあります。 configureでColima選択しましょう。 Services
8. システムの導入 ~GHEの接続④~ Githubアクセストークンの作成 Githubにログイン → Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token で、トークンに名前を付け、有効期限とスコープを設定してアクセストークンを作成しましょう。 PRのURLをCopilotに渡してレビューしてもらうというユースケースの場合は repoスコープを設定するとできま す。 

9. システムの導入 ~GHEの接続⑤~ AndroidStudioのmcp.jsonを開いて左記を追加しましょ う。 AndroidStudio > Settings > GithubCopilot > Model Context Protocol(MCP) > Configures で開けます。
10. システムの導入 ~Figmaの接続①~ GLips/Figma-Context-MCP を使用します。 Figmaアクセストークンの作成 Figmaにログイン → Settings →Securityタブ→ Personal access tokensセクション → Generate new tokenをクリック で、トークンに名前を付けアクセストークンを作成しましょう。 権限はRead権限でFile contentと Dev resourcesを選択しましょう。
11. システムの導入 ~Figmaの接続②~ AndroidStudioのmcp.jsonを開いて左記を追加しましょ う。 AndroidStudio > Settings > GithubCopilot > Model Context Protocol(MCP) > Configures で開けます。
12. 依頼プロンプト 依頼プロンプトは下記のようにして Github CopilotのAgentモードで依頼します。 PRのURL及び、実装対象のデザイン Nodeのリンクを指定して依頼します。
13. 正誤検証 人によるレビュー済みの PRに実際のデザインとは異なるマージン設定をあえて設定し 誤りを検知してくれるのかを検証してみました チェックボックスの左マージンをわざと 変更する
14. 実行結果① 問題なくPR内容もデザインも取得できて、実装内容を理解してレビューしてくれていそう ...
15. 実行結果② なんと、マージンの調整が必要と指摘してくれました！
16. 修正の依頼① どうせなので、そのまま修正も依頼してみました。
17. 修正の依頼② よくよくみてみると、今回わざと変更したマージン以外にもコンテンツエリアの左マージンも修正している ...おかし いぞこれは...
18. 修正内容の確認① AIによる修正内容はこちら チェックボックス側は意図していれた誤りだが、コンテンツエリア側は勝手に修正されていた チェックボックスの左マージンを修正 コンテンツエリアの左マージンを勝手に 修正
19. 修正内容の確認② 改めてマージン定義を見直してみる
20. 修正内容の確認③ チェックボックスの左マージンは 16dpなので正しく修正 されている
21. 修正内容の確認④ コンテンツエリアの左マージンは 12dpなので... あれ、この修正実は正しいやんとなる。
22. 結果 つまり、AIによる修正が正しかった
23. 結論 今回のケースでは、人間では見落としがちなポイントも AIが検知できることを確認できた！