この記事はInsight Edge Advent Calendar 2025の18日目です。
はじめまして。Insight EdgeでUI/UXデザイナーとして参画している追分です。 今回はデザイナー観点での記事になりますが、皆さんの業務にも役立つような記事にしたいと思います！
はじめに
UXデザイナーとして日々ユーザーのニーズの調査や分析、画面の設計、評価などに取り組む中で、もっと手軽でスピーディーにできないかと感じることがよくあります。最近では生成AIがデザイン領域でも活用されはじめ、ペルソナやカスタマージャーニーマップを生成する事例や、画面のUIデザインを出力してくれるようなケースはよく見られるようになってきました。今回はヒューリスティック評価に着目し、AIを活用して効率化できないかと考え、「AIにwebアプリのスクリーンショットを渡し、ヒューリスティック評価を行わせるとどこまで使えるのか」というテーマで検証してみました。
もしAIが一定の精度で評価できるのであれば、初期レビューや改善方針の出発点として活用でき、業務効率化にも大きく寄与するはずです。さらに、AIの補助により非デザイナーでもプロダクトの課題に気づきやすくなれば、組織全体のUX視点の向上にもつながるかもしれません。
使用したツールと評価手法
ChatGPT 4o
今回の評価で使用したのは ChatGPT 4o です。画像・テキスト共に扱え、画像認識能力が高くUI構造や要素の配置を読み取ったうえで分析できるとのこと。評価対象となるwebアプリの文脈を理解して評価するのに良いと判断しました。
ヒューリスティック評価
ヒューリスティック評価とは、ユーザビリティ専門家が経験則（ヒューリスティクス）に基づき、実際の画面を観察しながらユーザーの視点でUI上の問題点を洗い出す手法です。初期段階で評価対象の改善方針を理解するために行います。チェック項目はNielsen の10原則などがよく知られており「ユーザーの状況に合っているか」「エラーを防止できているか」「情報の見やすさは十分か」といった観点で評価します。 この専門家の感覚的な判断による定性評価をAIが再現できるか、Nielsen の10原則と照らし合わせて検証します。
事前準備
・対象webアプリのスクリーンショット
・プロンプト
あなたはUXデザインの専門家です。 これから添付するwebアプリのスクリーンショットについて、ニールセンの10のユーザビリティ・ヒューリスティクスに基づき、画像に写っているwebアプリのユーザビリティを専門的に評価してください。 評価では以下の点を守ってください。 【前提条件】 - 対象webサイトは、〇〇〜。（※評価対象ページについての説明） - 想定ユーザーは、△△〜。（※ターゲットについての説明） 【評価方法】 1. 10のヒューリスティクスごとに分類 - システム状態の視認性 - システムと現実世界のマッチ - ユーザーのコントロールと自由 - 一貫性と標準化 - エラーの防止 - 想起より認知 - 柔軟性と効率性 - 美的で最小限のデザイン - エラーの認識・診断・回復 - ヘルプとドキュメント 2. 各原則ごとに以下を出力 - 評価（問題点の有無、5段階で評価） - 具体的な指摘内容（UI上でどの要素が問題か） - ユーザーへの影響（なぜ問題になるか） - 改善提案（実践的なUI改善案） 3. 視覚情報から推測できる範囲で構わないため、画像の内容を元に深く分析すること 【出力フォーマット】 # Nielsenの10ヒューリスティクス評価 ## 1. システム状態の視認性 - 評価： - 指摘： - 影響： - 改善提案： ## 2. システムと現実世界のマッチ （以下同様） … ## 10. ヘルプとドキュメント - 評価： - 指摘： - 影響： - 改善提案：
検証結果
出力例（一部抜粋）
今回評価対象の例として Amazonのトップページ を利用しました(amazon.com)。また、想定ユーザーは、初めてオンラインでショッピングをする年配層としてみました。
10. ヘルプとドキュメント 評価：★★☆☆☆（2/5） 指摘： ヘルプセクションへのリンクがページ下部にしかなく、アクセス性が低い。 影響： 初心者ユーザーが支払い方法や返品条件などで迷ったとき、助けを得にくい。 改善提案： ページ上部や各機能の近くにFAQ・チャットボットなどを配置。 初回訪問ユーザー向けにガイドツアーを導入。
良かった点
画像認識がよくできており、また指摘内容もNielsenの原則に沿いつつバリエーションがあり、概ね妥当だったと感じました。特に想定ユーザー情報など前提条件を充実させたところ、それを考慮して評価と指摘内容が変わったことが印象的でした。 評価も数値と具体的な改善案で出すことで、専門家でなくともどこの改善に取り組めば満点に近づくか、理解しやすいと思います。
懸念点・改善点
今回は1ページのみでテストしたため、あくまで画面単体の観察となります。サイト全体のフローや操作時の画面の変化・ユーザーの心理といった文脈までは読み取れませんでした。複数画面を用いて評価することで、導線の一貫性やステップ間の認知負荷といった観点も判断させることもできるのではないかと考えています。
また、実務で評価利用を考えた際には、セキュリティ面にも注意が必要です。画面に機微な情報が含まれていないか、アップロードした画面が学習に使われないか確認が必要です。
ユースケース検討
今回の検証を通して、実務でどのように活用できそうか、考えてみます。
UXデザイナーの利用
- ヒューリスティック評価のスピードアップ（文脈へ落とし込む前の叩き台作成、改善アイデア出しの効率化）
- 自身の視点の偏りに気づくチェックツールとして利用
開発者や非デザイナーの利用
- UXデザイナー不在時の最低限のレビュー
- vibe codingでの評価と画面生成のサイクル
まとめ
今回、生成AIにWebアプリのスクリーンショットを渡し、ヒューリスティック評価を依頼するという検証を行いました。結果として、AIが画面構造や想定ユーザー情報を理解し、Nielsenの10原則に沿った指摘や数値化を含む“評価の初期案”を出力できることを確認しました。一方で、ユーザー心理を踏まえた深い評価や、サイト全体のフローを考慮した総合的な判断までは十分に行えていない点も明らかになりました。
これは他のUXデザインプロセスでも同様ですが、生成された結果は必ず妥当性を確認し、専門家の視点で補正する必要があります。AIと人間それぞれの得意領域をうまく役割分担することで、より効率的に価値を生み出せると感じました。今回の検証をきっかけに、今後もUX改善と生成AIを組み合わせたアプローチを継続して探っていきたいと思います
