2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIだけでヒューリスティック評価ツールを作ってみた

2
Last updated at Posted at 2026-07-28

最近、SNSやYouTubeを見ると、Claude CodeやCodexといったAIを使ってアプリケーションを開発する事例が急速に増えているようです。
私自身もUX分析にAIを活用することがあり、その中で「ヒューリスティック評価もAIに任せられるのではないか」と思うようになりました。
もちろん最終判断は人間が行いますが、デザインレビューのたたき台作り、見落としの削減、レビュー品質の標準化はAIが得意な領域だと感じています。
そこで今回は、AIを使ってヒューリスティック評価ツールを作ってみました。

ヒューリスティック評価とは

ヒューリスティック評価とは、Webサイトやアプリの画面を、あらかじめ定めたユーザビリティの原則に照らして確認し、使いにくさにつながる問題を洗い出す評価手法です。
ここでいう「ヒューリスティック」とは、厳密な数式や絶対的なルールではなく、過去の知見から導かれた経験則や判断基準を指します。
実際のユーザーに操作してもらうのではなく、デザイナーやUX担当者などの評価者が画面を確認し、

  • ユーザーが現在の状態を理解できるか
  • 操作方法を迷わず判断できるか
  • 誤操作を防ぐ仕組みがあるか
  • 画面内の表現に一貫性があるか
  • 必要な情報を簡単に見つけられるか
    といった観点から問題を探します。

Nielsenのユーザビリティ10原則

ヒューリスティック評価でよく使われるのが、ユーザビリティ研究者のJakob Nielsenが提唱した「ユーザビリティ10原則」です。

代表的な評価観点は、次のようなものです。

  1. システム状態の可視性
    処理中、完了、エラーなど、現在何が起きているかをユーザーが把握できるか。

  2. 実世界との一致
    システム独自の専門用語ではなく、ユーザーが普段使う言葉や理解しやすい表現になっているか。

  3. ユーザーの主導権と自由度
    間違った操作をした場合に、戻る、キャンセルする、やり直すといった手段があるか。

  4. 一貫性と標準
    同じ意味のボタンや操作が、画面によって異なる表現になっていないか。

  5. エラーの防止
    エラーが発生してから説明するだけでなく、そもそも間違いが起こりにくい設計になっているか。

  6. 記憶ではなく認識を促す
    ユーザーが前の画面の内容を覚えていなくても、選択肢や必要な情報を画面上で確認できるか。

  7. 柔軟性と効率性
    初心者にも使いやすく、慣れたユーザーは効率よく操作できるか。

  8. 美しく最小限のデザイン
    必要性の低い情報や装飾が、重要な情報の理解を妨げていないか。

  9. エラーからの回復支援
    エラーメッセージから、何が問題で、次に何をすればよいかが分かるか。

  10. ヘルプとドキュメント
    操作に迷ったときに、必要な説明やサポート情報へアクセスできるか。

これらの原則を使うことで、「なんとなく使いにくい」という感覚的な指摘を、一定の基準に沿って整理できます。

ヒューリスティック評価で分かること

例えば、入力フォームを評価した場合、次のような問題を発見できます。

  • 必須項目が分かりにくい
  • 入力エラーの原因が表示されない
  • 送信後に処理が完了したか分からない
  • 戻る操作で入力内容が消えてしまう
  • 同じ意味のボタンに異なる文言が使われている
  • ユーザーが理解しにくい社内用語が表示されている

こうした問題は、一つひとつは小さく見えても、積み重なることで離脱や操作ミスにつながります。

ヒューリスティック評価は、これらの問題を比較的早い段階で発見するための方法です。

ユーザーテストとの違い

ヒューリスティック評価とユーザーテストは、似ているようで目的が異なります。

ヒューリスティック評価では、専門家や担当者が原則に基づいて問題を予測します。一方、ユーザーテストでは、実際のユーザーに製品を操作してもらい、その行動や発言から問題を発見します。

比較項目 ヒューリスティック評価 ユーザーテスト
評価する人 デザイナー、UX担当者、専門家 実際の利用者に近いユーザー
評価方法 原則や経験則との比較 実際の操作行動を観察
得意なこと 一般的なユーザビリティ問題の発見 想定外の行動や実際の迷いの発見
実施コスト 比較的低い 参加者募集や実施準備が必要
主な限界 実際のユーザー行動とは異なる可能性がある 少人数ではすべての問題を発見できない

ヒューリスティック評価を実施したからといって、ユーザーテストが不要になるわけではありません。
最初にヒューリスティック評価で明らかな問題を取り除き、その後ユーザーテストで実際の行動を確認する、という組み合わせが現実的な手順です。

今まで人間が行なっていたデザインレビューは、
・人によって指摘内容が違う
・レビュー担当者によって品質がばらつく
・初学者にはレビュー観点が難しい
・レビューに時間がかかる
といった問題があったと思います。
ヒューリスティック評価は便利ですが、「10原則を知っている」だけでは実際にはなかなか評価できないという問題がありました。

そこで、AIにレビューを任せれば一定品質の指摘ができるのでは?と思ったのがきっかけです。
開発はほぼAIで、私がやったことは意外と少なく、主に担当したのは
・要件を考える
・評価項目を整理する
・AIへ指示する
・動作確認する
くらいでした。

一方、AIは
・UI作成
・レイアウト
・実装
・API接続
・バグ修正
まで担当しています。
「自分でコードを書く」というより「AIに実装を依頼する」という仕事でした。

なぜAIと相性がよいと考えたのか

ヒューリスティック評価では、画面を一定の評価基準と比較し、問題点と改善案を整理します。
この作業には、

  • 複数の評価項目を漏れなく確認する
  • 画面内の問題を言語化する
  • 問題を評価原則に分類する
  • 改善案を一定の形式で出力する
    といった工程があります。

これらは、文章や画像を読み取り、指定された基準と比較して結果を整理する生成AIの特性と相性がよいのではないかと考えました。もちろん、AIの指摘が正しいとは限りません。
それでも、人間がレビューを始める前の一次チェックや、見落としを減らすための補助としては活用できる可能性があると考えられます。
そこで今回、画面をAIに読み取らせ、ヒューリスティック評価の観点から問題点と改善案を出力するツールを作ってみました。

作ったツール

ヒューリスティック評価サンプル1.png

今回作成したツールでは、
スクリーンショットをアップロードする

AIが解析

評価結果を表示
という流れになっています。

当初はURLを入力するとAIがスクリーンショットを生成して自動で解析してくれるツールを考えていたのですが、テストの段階でうまくいかないことが判明したため、自分でキャプチャ画像を用意してそれを入力する形にしました。

評価内容は「Nielsenの10原則」ですが、オプションで
・モバイルフレンドリー
・視覚的階層・情報設計
・コンバージョン最適化(CRO)
を追加できます。

オプションの評価観点として、標準の10項目に加えて、
・アクセシビリティ(WCAG):障害を持つユーザーへの対応状況を評価
・モバイルフレンドリー:スマートフォン・タブレットでの操作性を評価
・視覚的階層・情報設計:情報の優先度や視線誘導の設計を評価
・コンバージョン最適化(CRO):ユーザーの目標達成を促す設計を評価

単に「ここが悪い」ではなく、改善案まで出力するようにしました。
評価の結果は分析完了後、以下の内容が表示されます。

スコア 意味
1 $\Large\color{red}{●}$ 赤 深刻な問題あり
2 $\Large\color{orange}{●}$ オレンジ 要改善
3 $\Large\color{gold}{●}$ 黄 普通
4 $\Large\color{yellowgreen}{●}$ 黄緑 良好
5 $\Large\color{green}{●}$ 緑 優秀

総合スコアの下には総評テキストが表示されます。
以下が評価のサンプルです。
ヒューリスティック評価サンプル.png

履歴も閲覧機能もあります。
ヒューリスティック評価サンプル履歴.png

一番苦労したのは実装ではなかった

実際に開発して感じたのは、コードを書くことではありませんでした。一番難しかったのは、AIに「何を作ってほしいのか」を正しく伝えることでした。

例えば、「評価して」だけでは期待した結果になりません。評価基準を細かく定義し、出力形式も決め、採点方法も決め、改善案の粒度も指定する。
そうすると急に精度が上がります。つまり、AI開発ではプログラミング能力より設計能力や要件定義能力のほうが重要になると感じました。

また、先述した通り、AIは「はい。できますよ」と簡単にできることを宣言するのですが、いざ実装してみると「やっぱりできませんでした」ということがしばしばあります。
その代わりに「こちらの方法なら実装可能です」と別の代替案をセットで提示してくれたため、今回はその新しいアプローチを採用することで無事に乗り切ることができました。

AIレビューは想像以上に使える

実際に使ってみると、毎回かなり似た観点でレビューしてくれます。
もちろん、デザインの美しさ、ブランドイメージ、感情的な印象などはまだ人間の判断が必要です。
しかし、情報不足、ボタン配置、ラベル、操作フロー、一貫性といったルールベースの指摘は十分実用レベルでした。特に、レビュー前のセルフチェックにはかなり役立ちそうです。

作って分かったこと

今回一番印象に残ったのは、AIは「開発者」というより「優秀なペアプログラマー」に近いということです。コードは高速に書いてくれます。しかし、何を作るかどんな品質を目指すかどう評価するかこれらは人間が決めなければいけません。
つまり、AI時代に価値が高まるのはコードを書く能力だけではなく、問題を整理し、要件を定義し、AIに適切な指示を出す能力なのだと感じました。

今後やりたいこと

今回はヒューリスティック評価を対象にしましたが、今後はさらに発展させたいと考えています。
例えば、ブランドイメージ評価、感性(エモーショナル)評価、デザインレビューAIエージェント化などです。
単なるチェックツールではなく、「AIデザインレビューアシスタント」のようなものを目指しています。
今回の開発で一番驚いたのは、「AIでここまで作れるようになった」ということより、「人間の役割が変わった」ということでした。
以前は「コードを書くこと」が開発の中心でしたが、今は「何を作るべきかを定義し、AIに実装させること」が重要になりつつあります。

ヒューリスティック評価ツールは、その変化を実感できたプロジェクトでした。
同じようにデザインレビューやUI改善に携わっている方であれば、AIを「レビューの補助役」として取り入れるだけでも、大きな効果を感じられるかもしれません。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?