Zenn
✨

UX分析AI Agent「UX-AI Insight」第 2 回 AI Agent Hackathon with Google Cloud

に公開
AI
Google Cloud
hackathon
idea

序章：Web サイトの成功を左右する「UX」の重要性

今日のデジタル時代において、Web サイトは企業と顧客をつなぐ最前線であり、その成功はユーザーエクスペリエンス（UX）の質に大きく依存します。どんなに優れた機能やコンテンツがあっても、ユーザーが使いにくい、分かりにくいと感じれば、すぐにサイトを離れてしまうでしょう。しかし、専門的な UX 評価は時間とコストがかかり、多くの開発チームにとって大きな負担となっています。

この課題に対し、私たちは AI の力を活用した画期的なソリューション「UX-AI Insight」を開発しました。本記事では、「UX-AI Insight」がどのように Web サイトの UX 改善プロセスを自動化し、開発者、デザイナー、プロダクトマネージャーの皆様を強力に支援するのかを詳しくご紹介します。

1. プロジェクトが対象とするユーザー像と課題、そして「UX-AI Insight」が提供するソリューション

1.1. ターゲットユーザー：すべての Web 開発・運用担当者へ

「UX-AI Insight」は、Web サイトの UX 品質向上を目指すすべてのプロフェッショナルを対象としています。

  • Web デベロッパーの皆様へ：
    実装した UI が UX の観点から優れているか、アクセシビリティに問題はないか、といった疑問を抱えていませんか？ コードの品質だけでなく、ユーザーが実際にどのように感じるかを客観的に評価することは、サービスの成功に不可欠です。「UX-AI Insight」は、あなたのコードがユーザーに最高の体験を提供しているかを瞬時に診断し、具体的な改善策を提示します。

  • UI/UX デザイナーの皆様へ：
    デザイン案が論理的・客観的な UX 原則に基づいているかを検証したい時、主観的な判断に頼りがちではありませんか？ 「UX-AI Insight」は、あなたのデザインがユーザーの行動や認知にどのように影響するかを AI が分析し、データに基づいたフィードバックを提供します。これにより、より説得力のあるデザイン提案が可能になります。

  • プロダクトマネージャー/ディレクターの皆様へ：
    担当する Web サイトの UX 上の課題を迅速に把握し、改善の優先順位を効率的に付けたいと考えていませんか？ ユーザーテストやヒューリスティック評価は時間とリソースを要します。「UX-AI Insight」は、サイト全体の UX 品質を包括的に評価し、改善すべき点を明確にすることで、意思決定を加速させ、開発リソースを最適に配分する手助けをします。

1.2. 既存の UX 評価における課題

従来の UX 評価手法には、以下のような課題が存在します。

  • 時間とコストの制約： 専門家によるヒューリスティック評価やユーザーテストは、多大な時間と費用を要します。特にアジャイル開発のような迅速なイテレーションが求められる環境では、UX 評価がボトルネックとなることがあります。
  • 主観性の介入： 評価者の経験や知識に依存するため、結果に主観が入り込む可能性があります。客観的で一貫性のある評価基準を設けることが難しい場合もあります。
  • 具体的な改善策の不足： 問題点が指摘されても、「なぜそれが問題なのか」「どうすれば改善できるのか」という具体的な解決策まで踏み込んだ提案が得られないことがあります。特に、開発者がすぐに実装できるようなコードレベルの示唆は稀です。
  • 開発プロセスへの統合の難しさ： UX 改善が開発サイクルの「特別なイベント」として扱われがちで、日常的な開発プロセスに組み込むことが困難です。結果として、UX の考慮が後回しになったり、手戻りが発生したりすることがあります。
  • アクセシビリティの専門性： WCAG（Web Content Accessibility Guidelines）などのアクセシビリティ基準は複雑であり、専門知識なしに網羅的に評価することは困難です。

1.3. 「UX-AI Insight」が提供するソリューションと特徴

「UX-AI Insight」は、これらの課題を解決し、Web サイトの UX 改善を劇的に効率化するための革新的なソリューションです。

1.3.1. AI による UX 評価の自動化と効率化

Web サイトの URL を入力するだけで、AI が自動で UX を多角的に分析します。これにより、専門家による評価にかかる時間とコストを大幅に削減し、迅速なフィードバックループを実現します。開発の初期段階から継続的に UX の品質を評価・改善できるため、手戻りを減らし、開発効率を高めます。

1.3.2. 具体的・実践的な改善案の提供

単に問題点を指摘するだけでなく、「なぜ」それが問題なのかを UX の原則に基づいて解説し、具体的な改善案を提示します。さらに、必要に応じて修正後の HTML/CSS コードスニペットを生成したり、デザイン改善のための参考となるレイアウトパターンや配色案を提示したりすることで、開発者がすぐにアクションに移せるように支援します。

1.3.3. 開発プロセスへの UX 視点の統合

「UX-AI Insight」は、開発者が日常的に利用できるツールとして設計されています。これにより、UX 改善を「特別なイベント」ではなく「当たり前の習慣」として開発プロセスに組み込むことが可能になります。CI/CD ツールとの連携（将来的な機能拡張）により、デプロイ前の自動 UX レビューも実現できます。

1.3.4. 包括的な分析項目とアクセシビリティの担保

以下の多角的な視点から Web サイトを評価します。特に、WCAG などの基準に基づいたウェブアクセシビリティの観点からの評価と改善提案は、すべてのユーザーにとって使いやすいサイト構築を強力に後押しします。

  • 総合 UX 評価: サイト全体の UX 品質を評価し、強みと弱みを可視化。
  • 項目別評価:
    • レイアウトと視覚的整合性: 要素の配置、余白、アライメント、色のコントラスト、タイポグラフィの可読性など。
    • ナビゲーションと情報構造: グローバルナビゲーション、パンくずリスト、情報階層の分かりやすさ、重要な情報へのアクセスのしやすさなど。
    • インタラクションとフィードバック: ボタンやリンクの CTA、フォーム入力の分かりやすさ、エラーメッセージ、ユーザーアクションへの視覚的フィードバックなど。
    • アクセシビリティ (A11y): 画像の alt 属性、キーボード操作、ARIA 属性の適切性など。
    • コンテンツとコピーライティング: 見出しや説明文の明確さ、専門用語の適切性など。

1.3.5. Geminiによる高精度な評価

中核となる AI 分析機能には、Gemini APIを活用しています。
Web サイトの HTML/CSS のテキスト情報やPlaywrightによる操作をインプットとして与え、より人間的で高精度な UX 評価と改善提案を実現します。

2. システムアーキテクチャ

「UX-AI Insight」は、Google Cloud Platform の堅牢なインフラストラクチャ上に構築されています。

  • フロントエンド/バックエンド: React (Next.js) を採用し、ユーザーフレンドリーなインターフェースを提供します。Google CloudRun 上でホスティングされ、高いスケーラビリティと可用性を実現します。指定された URL の HTML/CSS コンテンツの取得、ページのスクリーンショット撮影、そして Gemini へのプロンプト生成と API コールは Next.js のサーバサイドで動作しています。
  • AI / 機械学習基盤: Gemini API が、Web サイトの UX 分析の中核を担います。UX 原則、デザインパターン、アクセシビリティ基準などを学習した上で、マルチモーダルな入力（HTML テキストとスクリーンショット画像）を分析し、精度の高い評価と改善提案を生成します。

処理フローの概要:

  1. ユーザーがフロントエンドで分析したい Web サイトの URL と操作ユースケース を送信します。
  2. CloudRun 上のバックエンドがリクエストを受け取ります。
  3. バックエンドは対象サイトの HTML/CSS コンテンツとスクリーンショットを Playwright を使って取得します。
  4. 取得した情報を構造化し、操作ユースケースに基づいた操作を Gemini API を使って構築し、その操作を Playwright を使って行います。
  5. 最終的に目標としていた操作ユースケースを完了すると、分析用のプロンプトを生成して Gemini API を呼び出します。
  6. Gemini が情報を分析し、評価と改善提案を構造化された JSON 形式で返します。
  7. バックエンドが JSON を受け取り、フロントエンドに渡します。
  8. フロントエンドがレポートをリッチな UI で表示し、ユーザーに提示します。

3. 「UX-AI Insight」デモ動画

「UX-AI Insight」の実際の動作をデモ動画でご覧いただけます。URL を入力してから分析結果が表示されるまでの流れ、そして提供される改善提案の具体性をご確認ください。

https://www.youtube.com/watch?v=M9RinvFOxk8

また、デモサイトで実際に動作を確認ください。(2025/7/16 まで)

https://ai-ux-analyzer-235999812743.asia-northeast1.run.app/

結論：AI が拓く UX 改善の新たな地平

「UX-AI Insight」は、Gemini の強力な生成能力と Cloud Run のスケーラブルな実行環境を組み合わせることで、これまで専門家の領域であった UX 評価を、すべての開発者にとって身近で実践的なものに変える可能性を秘めています。

私たちは、本プロジェクトを通じて、より良いユーザー体験を持つ Web サービスが世の中に増えることに貢献したいと考えています。ぜひ「UX-AI Insight」をご活用いただき、あなたの Web サイトの UX を次のレベルへと引き上げてください。

開発後記

本プロダクトは、開発期間 2025/6/28-29 の期間で、99% Gemini CLI で生成されました。

Generated by Gemini

Discussion