AIエージェントで拓く、デザインレビューの新しいかたち
本記事は、#IVRy_AIブログリレー の9月4日（4日目）の記事です。昨日は、IVRyのAI推進担当の植田 (chama) さんが「なぜAIの活用を推進するのか」という記事を公開しました。ブログリレーの記事一覧は「IVRy AIブログリレー全記事まとめ」をぜひご覧ください。
はじめに
こんにちは、IVRy（アイブリー）でプロダクトデザイナーをしているみっちー（@michiminstar）です。
最近、Figma MakeやCanvaなどデザインツールにAI機能が搭載されるのが当たり前になってきましたね。ちょっとした画像の生成や、UIデザインのアイデア出しなど、AIが身近な存在になったと感じているデザイナーの方も多いのではないでしょうか。
私自身も、こうした便利なAIツールに日々助けられています。その一方で、「日々の作業を少し効率化するだけじゃなく、もっとチーム全体の根本的な課題解決にAIを使えないだろうか？」と考えることが多くなってきました。
この記事では、そんな「もう一歩先」のAI活用として、私たちのチームが直面していた課題を解決するために、Claude Codeを活用してデザインレビュー専門のAIエージェントを自作した話をご紹介します。
※本記事で言う「AIエージェント」とは、特定の目標を与えられると、自ら計画を立て、必要なツール を駆使して、自律的にタスクを実行するシステムを指します。単に指示に答えるだけでなく、目標達成のために一連のプロセスを主体的にこなしてくれる存在と捉えてください。
なぜ「デザインレビュー」にAIを活用しようと思ったのか
この取り組みの背景には、マルチプロダクトを展開するIVRyならではの課題があります。
IVRyでは現在、対話型音声AI SaaSを主軸に、複数のプロダクトを開発・提供しており、私たちデザイナーはそれぞれのプロダクトを担当するプロジェクトに分かれて、デザインをリードしています。
この体制は、各デザイナーが担当プロダクトのドメイン知識を深め、意思決定を迅速に行えるという、事業の成長にとって大きなメリットがあります。その一方で、それぞれが担当するプロジェクトが異なるがゆえにプロダクトを横断したUI/UXの一貫性を保つ難しさという課題も生まれています。
もちろん、デザインの基盤となるUIライブラリは存在し、基本的なコンポーネントは共通化されていますが、プロダクト共通のデザイン原則がまだ整備されていないため、個々のUI/UX設計は各担当デザイナーの判断に委ねられ、結果プロダクト間の一貫性を保つことが難しくなっています。プロダクトを横断してデザインの一貫性を保つには、デザイナー同士もレビューもかかせないのですが、現体制の構造上、そのための時間を十分に確保しにくいという側面もあります。
こういった経緯から、UIデザインの一貫性を仕組みで担保するため、レビュー専門のAIエージェント開発に乗り出しました。これによって、「定型的なデザインレビュー業務」をAIに任せ、人間のデザイナーはより本質的な課題解決や創造的な業務に集中できる状態にしていくことが狙いです。
具体的な開発ステップ
では、具体的にどのようなエージェントを目指し、どう開発を進めたのか。ここからは、現在検証中の取り組みについて、以下に示したフェーズを追いながらご紹介します。
1. ゴール設定: エージェントに実行してほしいことを決める
2. 情報整備: エージェントに与えるコンテキスト情報を整備する
3. 実装設計: エージェントが実行すべきタスクを実装機能として定義する
1. エージェントに実行してほしいことを決める
まず、どの範囲までレビューを自動化したいのかを以下のように明確にするところから始めました。
スクリーンショットレビュー：特定画面のスクリーンショットを入力として、用意したデザインガイドラインや一般的なベストプラクティス、アンチパターンを参照しながら改善点を洗い出す。ただし、スクリーンショットからは具体的な数値は算出できないので、視覚的な修正が必要な箇所を指摘するに留める。
構造データの活用：スクリーンショットでは取得できないFigmaの細かい階層やプロパティ情報を、Figma Dev Mode MCPサーバーから抽出したJSONデータとして読み込み、デザインガイドライン情報などと照合する。
統合レビューとマーキング：スクリーンショットレビューの視覚的な指摘と、構造データによる数値検証の結果を統合し、修正すべき箇所をスクリーンショット上にハイライトや矢印でマーキングする。
改善案の生成：統合レビューで特定した問題点に対し、理由や想定される影響とともに具体的な修正案を提示。修正案はガイドラインや一般的なUXの法則だけでなく、関連のビジネス要件やUX要件なども参照する。
実際にはこれらをいきなりすべてを目指すのではなく、少しずつ検証可能な粒度に分解し、開発を進めました。
2. エージェントに与えるコンテキスト情報を整備する
ゴールを定めたら、次は期待するアウトプットが得られるように、エージェントに与える必要な情報を整えます。
最初、FigmaにあるアイブリーのDesign Guideline全体をそのままFigma MCP経由で読み込ませようとしたのですが、コンポーネント構造の複雑さやページ量が多さからか、思ったとおりに情報が取得できませんでした。そこで、MCPが読み込めるレベルの簡易的なUIライブラリを新たに作成し、コンポーネントの階層等を必要に応じて整備しました。
Figma MCPを活用するうえでのベストプラクティスについては、
以下のFigma公式ガイドでも紹介しているので、ぜひ参考にしてみてください。
この簡易UIライブラリをもとに、Figma MCPからJSONデータを取得し、Claude Codeに「ボタンの高さ」「カラーコード」「テキストサイズ」などガイドラインの叩きを生成させる→人間がレビューして修正を指示する、というサイクルを繰り返しながらデザインガイドラインを整備しました。
加えて、一般的なUIベストプラクティスやアンチパターンに関するドキュメントなども読み込ませることで、エージェントの知識ベースを構築しました。
ちなみに、この段階でFigma MCPを使わず、単にテキストデータとしてガイドラインを渡すだけならClaude Codeでも十分ですが、Figma MCPで得られる構造データをどのようにレビューに活用できるかを把握したかったため、合わせてMCPも試してみました。
これも叩きはClaudeに生成してもらった
無事、Figma MCP経由でUI Libraryの情報が取得でき、デザインガイドラインの生成に成功しました (この辺りも試行錯誤が必要だったので別の機会に紹介できればと思います)。
ClaudeにFigmaのコンポーネントごとの構造を解析してもらい、
内容を段階ごとにレビューしていった
取得データには余分な情報も多く、まだまだ改善の余地はありますが、レビューエージェントに参照してもらいたい情報が揃ったので、いよいよエージェントの実装に移ります。
3. エージェントが実行すべきタスクを機能として定義する
レビューエージェントが実行すべきタスクを、フェーズに応じた機能として定義し、Claude Codeで実装しました。
以下、開発した3つのコア機能を紹介します。
① レビュー機能
レビュー機能はまず「視覚的レビュー」と「構造的レビュー」をそれぞれ別で実装し、最終的にこの2種類の方法でレビューの精度を高めるアプローチを取りました。
視覚的レビューの実装
この機能は、スクリーンショットからレイアウトのバランスや、配色、余白など視覚的な課題点を洗い出してもらう目的で作成しました。構造的レビューはより実装が複雑になるので、まずはよりシンプルな手段で簡易的なレビューができる状態にしました。
構造的レビューの実装
構造的レビューでは、Figma MCPから取得したコンポーネントのJSONデータを使って、デザインガイドラインの情報と照合しながら、ボタンの高さや色コードなど数値に基づく検証を行えるようにしました。
これら２つのレビューを組み合わせることで、見た目と数値の両面からUIを評価できるようにしました。
具体値はFigmaの情報を参照させ、ガイドラインとの差分をなるべく正確に判定できるように
② マーキング機能
次に、視覚的レビューと構造的レビューの結果を統合し、修正が必要な箇所を視覚的に分かりやすく示すマーキング機能を実装しました。具体的には、スクリーンショット上にハイライトや矢印を重ね、指摘内容を簡潔なラベルとして表示します。
この機能に関しては、マーキング位置の精度やUI要素の認識に課題が残っており、今後改善が必要です。
③ 改善UI生成機能
レビューで指摘された点が改善案に反映されている
最後に、レビューで検出した問題点を踏まえた改善UI生成機能を実装しました。
基本的な仕組みはGemini CanvasなどAIによるUI生成機能と変わらないですが、加えて以下の特徴も持たせています：
ガイドライン準拠：アイブリーのデザインガイドラインに沿った改善案を出力
文脈理解：Notionにあるビジネス要件やUX要件を参照し、単なる見た目の調整ではなく、目的に合ったUI案を提示
代替案の提示：単一の修正ではなく「A案：既存UIを最適化」「B案：配置を大きく見直す」といった複数パターンを生成
まだこの機能もUI生成が忠実に再現されない部分があったりなどするので、今後改善していこうと思います。
さいごに
ここまで、マルチプロダクトにおけるUI/UXの一貫性とレビューの負荷という課題に対し、AIエージェントを自作してデザインレビューを自動化する取り組みをご紹介してきました。
厳密には実際のアイブリーのデザインガイドラインをまだ網羅しきれていないので、運用できるレベルには至っていませんが、短期間でここまでのクオリティをLLMで実装できたことには素直に驚きがありました。
そして何より、この段階から「AI Orientedなプロダクトデザイン」に向き合い、自分なりのアイデアを形にして検証していけること自体が、とても楽しく感じています。
まだ道半ばではありますが、小さなステップから試行錯誤を重ねることで、目の前の課題を着実に解いていきたいと思っています。
他にもIVRyでは、様々な職種のメンバーが、それぞれが解決したいイシューに対して主体的にAIを取り入れており、プロダクト開発や業務効率化にAIを活用し合う社内のカルチャーが、多くの発見や刺激につながっています。
IVRyでは、「もっと会社について詳しく話を聞いてみたい」といった方に向けて、キャリア登録やカジュアル面談の機会をご用意しています。合わせてイベントや最新ニュース、募集ポジションの情報もキャリア登録者向けに随時お届けしています。ご興味をお持ちいただけた方は、ぜひ以下のページよりご登録・お申し込みください。
採用情報
IVRyデザインチームに関する情報
9月9日に、DMM、ログラス、IVRy、ALGO ARTISの4社が登壇するAI×BtoB DESIGN Meetup #3を開催します！
AI時代のデザイン組織をテーマにAI活用やマネジメントの工夫を各社の視点から語り合う予定です。参加は無料ですので、ご興味のある方はぜひイベントページからお申し込みください。
