AIでWEBサイトのユーザービリティのヒューリスティック分析
更新日：2025年10月14日｜公開日：2025年10月14日
わりと実用的？なAIを利用したWEBサイトのユーザービリティのヒューリスティック分析ができるようになったのでご紹介したいと思います。
使うツール
使うツールはGemini CLIとChrome DevTools MCPです。こちらの説明とインストールについては以前にブログ記事「Gemini CLIとChrome DevTools MCPでWeb開発をする」を書いたので参考にしてください。
これまでのAIを使ったWEBサイトのユーザービリティチェックの問題点
これまでにもChat GPTやGeminiなどでURLや工夫を凝らしたプロンプトでユーザービリティチェックを試してみたのですが、特に無料版のモデルでは実際のURLを見に行っていないのでハレーションが多くなかなか使い物になりませんでした。
重要なのは実際のデータをAIにみてもらう事
当たり前なのですが、実際のHTMLのデータやどのようにブラウザでレンタリングされるかがわからない状態でユーザービリティチェックはできません。今回は「Chrome DevTools MCP」を使うことで実際のデータを読み込み、かつChromeのブラウザでレンタリングしながらユーザービリティチェックを行えるのでかなり精度がアップしました。
Gemini CLIを起動し、Chrome DevTools MCPを使える状態で以下のプロンプトを入れます。
プロンプト
あなたはWebサイトのユーザビリティのヒューリスティック分析の専門家です。
｛会社名｝の｛URL｝を1ページごとに表示して、
そのページのユーザービリティの分析をお願いします。
分析結果は課題とそれに対する改善点をページごとに提案してください。
また必要であれば｛想定するターゲットのペルソナ｝と｛WEBサイト全体的な課題｝も参考にして分析してください。
# 会社名
株式会社●●●●
# 想定するターゲットのペルソナ
* WEBサイトリニューアルを検討される売上1億円以上の企業の担当者
* 広告代理店の担当者
# WEBサイト全体的な課題
* 新規ユーザーの回遊率を上げたい
* お問い合わせへの導線を強化したい
* ページの滞在時間を増やしたい
# URL
https://www.example.com/
https://www.example.com/feature/
https://www.example.com/service/
https://www.example.com/case-study/
https://www.example.com/company/
https://www.example.com/whitepaper/
https://www.example.com/contact/プロンプトのポイント
- 「1ページごとに表示して」「改善点をページごとに提案して」
→できれば1ページ毎に分析をしたいのでこの文章を入れます。入れない場合はグローバルメニューやメインのリンクを辿って色々見に行ってしまい後のページとの重複などが発生してしまいます。また、こうすることでページが解析を終わるごとに「次にいきますか？」と確認をしてくれるので見るほうもテンポよく進めれます。 - 求める出力は「課題」と「改善点」
→あまり色々なことを出力させるとまとめるのも大変なのでこの2ポイントくらいがちょうどよかったです。ターゲットのペルソナや全体的な課題などは参考程度までにしてAIで自律的に分析してもらうほうが自然な結果を得れるかなと思いました。 - URLは主要ページのみであまり多くしない
→1ページずつ分析がスタートしていくので多すぎたり同じようなページを入れると結構見るほうも疲れてくると思います。主要なページをピックアップすることで効率よく進めていけます。
かならずチェックする
おそらくこれをそのまま仕事で使う人はいないと思いますが、人間的な習慣や社会的な都合、人間の経験からわかることから推測されることなどAIはあまり考慮せずに何でも言ってくるのでそういうものは採用せず、自分で気づけなかった事やアクセシビリティの問題やコード的な問題などかなり参考になると思います。ぜひ利用してください。