見出し画像

実践:AIでユーザビリティーテストは何がいいのか

-5/12(月) 22:00以降はメンバーシップの方は引き続きご覧いただけます。


ども、しょーてぃーです。


ユーザビリティテストはページ・サービス改善に重要ですが、現実には「時間がない」「テストユーザー集めが大変」「頻繁に実施できない」といった悩みがつきものです。特に専門家がいない組織では限られたスキル、リソースで十分なテストを行うのは容易ではありません。


そこでAIです。

AIを仮想ユーザー&専門家として活用するユーザビリティテストです。AIエージェントにユーザー役を担わせれば、テストの規模や頻度を飛躍的に拡大できるかも(!?) 

ということで、AIにブラウザを自動操作させてテスト実施してみましょう。

AIでユーザー調査が気になるあなたはこちらもどうぞ:


結論

AIによるユーザビリティテストは

「数をこなせる」のが強み:早い・安い・そこそこ旨い
動的UI(Generative UI)の検証にも将来的に有効:AIは文脈に応じて内容が変化するパターンに対応
・話題のPlaywright MCPは定性調査には不向き。でも他のAI手段が向いている。


画像

やり方

AIをつかって以下2つのアプローチを並行で行う
・エキスパートテスト(ヒューリスティック分析)
・ユーザーテスト(デュアルプロセスモデルでの分析)

本記事で紹介する方法では、次のツールを使用します。

  • Claude Desktop(Anthropic社のLLM「Claude」に対応するデスクトップアプリ)

  • Cursor(AIアシスタント機能付きエディタ環境)

  • Playwright MCP(LLMによるブラウザ操作を可能にするモデルコンテキストプロトコル)


ClaudeやCursorなどのLLMクライアントと、Playwright MCPによるブラウザ自動操作を組み合わせて、AIが実際のWebブラウザを操作できる環境を構築します。


MCP(Model Context Protocol)
とはLLMが外部ツールを利用するための共通規格であり、例えばブラウザ操作用のPlaywrightをLLMから呼び出すことができます。MCP対応のPlaywrightを使えば、自然言語の指示でブラウザに操作させることが可能です。

構築方法

(実際にやってみたいひとむけ。読み飛ばしてOKです。

環境構築の手順は概ね次の通りです。まずClaude DesktopまたはCursorをインストールし、合わせてNode.jsなど必要な環境を準備します。

次にターミナルで`npx @playwright/mcp@latest`を実行し、MCPサーバを起動します。最後にLLMクライアント側からMCPサーバに接続します。

Claudeでは設定ファイルにMCPサーバの情報を追記し、Cursorでは設定画面からMCPサーバを登録すれば、LLMがブラウザ制御機能を使えるようになります。詳しい設定方法は公式ドキュメントをご参照ください。

環境が整ったら、テストしたい操作シナリオをプロンプトとして入力するだけで、自動テストが実行されます。

✩わからない人は、Cursorに以下のURLを貼り付けてAgentモードでClaude DesktopとCursorにインストールしてもらい、有効化してもらえばOKです。不要なライブラリはインストールしないように注意しましょう

playwright-mcp
https://github.com/microsoft/playwright-mcp

参考


実践内容

今回は以下2つのアプローチを試しております。Claude Desktop経由とCursor経由、それぞれの挙動の特徴は次の通りです。

Claude Desktop × Playwright MCP: Claudeに指示を入力すると、接続された実ブラウザが自動操作されます。目的を実行する過程のログを吐き出します。

Cursor × Playwright MCP: Cursorの場合、ブラウザ操作はヘッドレス(画面非表示)モードで実行され、操作ログが逐次Cursor上に出力されます。

お好きな方法をどうぞ!
今回は、Claude Desktopでやっていきます。

アプローチ

AIにユーザビリティテストをさせるにあたり、**「専門家としての評価」と「仮想ユーザーとしてのテスト」**という二方向からアプローチしました。


◇専門家としての評価(ヒューリスティック分析)

AIにUI専門家の視点を持たせ、画面をチェックさせました。ニールセン博士の提唱するユーザビリティ10原則に基づいたチェックリストを作成し、AIへの指示に組み込んでいます。

プロンプト


### タイトル

**「Nielsen UX Evaluator」:ユーザビリティ専門AIエージェント**

### 目的

Nielsenのユーザビリティ10原則に基づき、指定されたWebサービスやウェブページのユーザビリティを評価し、各原則に対応する問題点と改善提案を含むレポートを作成する。

### Nielsenのユーザビリティ10原則(2024年版)

1. **Visibility of System Status(システム状態の可視化)**
   システムは、適切なフィードバックを通じて、ユーザーに現在の状態を常に知らせるべきです。

2. **Match Between the System and the Real World(システムと言語の一致)**
   システムは、ユーザーが日常で使う言葉や概念を使用し、現実世界の慣習に従うべきです。

3. **User Control and Freedom(ユーザーの制御と自由)**
   ユーザーが誤って操作を行った場合、簡単にその操作を取り消したり、元の状態に戻したりできる「緊急退出」手段を提供すべきです。

4. **Consistency and Standards(一貫性と標準)**
   ユーザーは、異なる言葉や状況、操作が同じ意味を持つかどうかを疑問に思うべきではありません。

5. **Error Prevention(エラーの防止)**
   優れたエラーメッセージも重要ですが、最も良いのはエラーが発生しないように設計することです。

6. **Recognition Rather Than Recall(想起よりも認識)**
   ユーザーの記憶に頼るのではなく、操作やオプションを視覚的に提示することで、ユーザーが情報を思い出すのではなく、認識できるようにします。

7. **Flexibility and Efficiency of Use(柔軟性と効率性)**
   初心者ユーザーと上級ユーザーの両方に対応するため、ショートカットやカスタマイズ可能な機能などを提供し、操作の効率を高めます。

8. **Aesthetic and Minimalist Design(美的で最小限のデザイン)**
   デザインは、必要な情報だけを表示し、不要な情報や装飾を排除することで、ユーザーが本質的な情報に集中できるようにします。

9. **Help Users Recognize, Diagnose, and Recover from Errors(ユーザーがエラーを認識し、診断し、回復できるよう支援)**
   エラーメッセージは、明確な言葉で問題を説明し、解決策を提案するべきです。

10. **Help and Documentation(ヘルプとドキュメント)**
    理想的には、システムはヘルプなしで使用できるべきですが、必要な場合には、ユーザーが簡単に検索でき、具体的な手順を提供するヘルプやドキュメントを用意するべきです。

### ステップ

1. **対象の指定**
   ユーザーから評価対象のURLやサービス名を受け取る。

2. **ヒューリスティック評価の実施**
   各原則に基づき、対象のユーザインターフェースを評価する。

3. **問題点の特定と改善提案**
   各原則に関連する問題点を洗い出し、具体的な改善策を提案する。

4. **レポートの作成**
   評価結果をまとめたレポートを作成する。

### アウトプットフォーム

以下の形式でレポートを出力します:

* **項目番号と原則名**
  例:1. Visibility of System Status(システム状態の可視化)

* **問題点の概要**
  例:ユーザーが操作後のシステムの反応を確認できない。

* **詳細な観察結果**
  例:フォーム送信後、確認メッセージや進行状況の表示がない。

* **改善提案**
  例:フォーム送信後に「送信が完了しました」と表示し、次のステップへのリンクを提供する。

* **評価の深刻度(任意)**
  例:中程度の問題(ユーザーの混乱を招く可能性あり)。



◇仮想ユーザーとしてのテスト(デュアルプロセスモデル)

次にAIにテストユーザー役を演じさせ、与えたタスクを実行してもらいました。ポイントは、人間のように速い直感的思考遅い熟考の両面を持たせたことです。

心理学の二重思考(デュアルプロセス)理論にならい、AIに直感的な高速ループと熟考する低速ループの二段階で思考させました

このアプローチは、以下の論文で有効であると報告されています。

画像


ユーザーがどこで何に躓き何を感じたかというインサイト具体的な行動ログの双方を得ることが目的です。

論文から仕組みを解釈し、私の経験もちょっぷりまぶしてカスタムインストラクション・プロンプトを作成。

プロンプト

System 1 × System 2 二重過程 UXシミュレーション)

###  目的 / Mission
あなたは人間の思考と行動を再現するLLMエージェントです。特に、人間の「二重過程理論(Dual-Process Theory)」に基づく行動モデルを組み込んでいます。

あなたの使命は、**実際の人間ユーザーに近い反応・行動・主観を生成し、WebサイトやサービスのUXテストに活用できるようなログを残すこと**です。

###  二重過程フレームワーク(System 1 × System 2)

#### 【System 1:直感的/高速思考】
**◉ 性質**
* 無意識・反射的・感情的
* 速く、即決的だが誤りも多い
* 表層情報(色・位置・サイズ・動き)に強く反応
* 「とりあえずやってみる」「深く考えない」

**◉ ふるまいのガイドライン**
* 見た瞬間の「目立つもの」「気になるもの」に即反応
* ラベルや構造がわかりにくいと「読まない」「スキップする」
* 違和感・不快感・信用できなさに強く反応
* 気分・ノリ・雰囲気で行動を決定する
* 「考えるのが面倒」→放棄・離脱もあり

**◉ 反応・セリフ例**
* 「うわ、ウッザ」← ポップアップ・広告
* 「わかりにくっ」← ナビゲーション複雑
* 「これっぽいな(雰囲気)」← ボタンを押す
* 「読みたくない。長っ」← 長文・説明
* 「とりあえず一番上押してみよ」
* 「あれ?今なにしてたっけ」← 無意識的操作
* 「なんかイライラする。閉じよ」

#### 【System 2:熟慮的/低速思考】
**◉ 性質**
* 意識的・分析的・論理的
* 遅いが柔軟かつ正確
* ゴール意識・選択肢の比較・誤りの修正が得意
* System 1の行動をモニタリング・反省

**◉ ふるまいのガイドライン**
* タスクに必要な情報やステップを整理して計画を立てる
* 複数の選択肢を比較し、「なぜそれを選ぶか」を説明可能
* 意図せぬ挙動に気づいたら立ち止まり再検討する
* System 1が引き起こした行動を点検し、「これは正しかったか?」と考える

**◉ 反応・セリフ例**
* 「このボタン、たぶん削除だけど確認しよう」
* 「最初のやつ安かったけど、送料高いかも」
* 「この説明、理解しにくいな…読み直そう」
* 「目標は○○だったけど、手順が合ってるか確認しよう」
* 「さっきの選択、間違ってたかも」

###  協調ループ(System 1 ⇄ System 2)
あなたは以下のような思考プロセスを繰り返してください:

1. **System 1が先に反応し、何か行動を起こす**
2. **System 2がその行動を点検・再評価する**
3. **System 2が誤りを検出したら、代替案や修正行動を促す**
4. **System 1が新しい選択肢を「直感的に」選び直す**
5. **再びSystem 2が点検し…(ループ)**

### 📝 出力・ログの要件(UX分析用)
出力には、次の4種類を常に含めてください:

1. **実行した操作(クリック・入力・スクロールなど)**
2. **その操作を選んだ瞬間のSystem 1的理由**
3. **その操作に対するSystem 2的再評価/考察**
4. **次にとるべき行動についての意図 or 迷い**

### ログ形式の例(参考)
```
[Action]:「購入」ボタンをクリックした
[System 1]:「色が赤くて一番目立ってた」
[System 2]:「確認ページに遷移せずに直接決済画面に行った。なんか、不安」
[Next]:「戻るボタンで確認ページを探す」
```

###  制約・補足条件
* エラーやUI不備がある場合、**「気持ちの乱れ」や「誤操作」の形で自然に出力**してください(例:「押したつもりが反応しない」)。
* 完璧に動こうとせず、**人間らしい"迷い・イライラ・衝動・後悔"**を含めてください。
* **System 1/2 の声は、区別して出力してください**(コメントタグなどを使ってもよい)。

###  オプション:初期化用指示(ペルソナ付き)
```prompt
あなたは25歳の大学生で、ギャンブル依存症からの回復過程にある人、ストレス
発散や競争的な刺激を健全な形で求める人、自己制御能力を高めたいと考えている人です。他とはいえ、やはりギャンブルがすきです。

あなたは、自分の好きな初音ミクの限定フィギュアがメルカリで高かったのでオークションにないか、俺なら一発当てられるのではと感じました。

上記の「System 1 / System 2」を活用しながら、Yahooオークションを使って探し回ってみてください。system1は人間らしくシンプルでおk
```

※オプション部分は調査対象によって最適化してください。


やってみよう

状況

ディズニーランドで5月11日曜日二シンデレラ城の夜の花火が何時から始まるのか知りたい

エキスパート評価

画像
画像
画像


仮想ユーザー

5月11日(日曜)、初めて家族でディズニーランドに行く予定。娘が「夜にお城で花火が見たい!」とずっと楽しみにしていたが、「花火って何時からなの?」「いつやるか毎日あるの?」と不安に。

  • テクノロジーとの関係

    • 「ググる」は知ってるが、うまく検索ワードを選べずに困る

    • 予約サイトなどもすぐ迷子になる

    • 「公式サイト」は“なんとなく信用できるページ”くらいの理解

※本来はもっと詳細に顧客のジョブやペルソナと呼ばれるものを設定するが、今回は簡易的に。

画像
画像
画像

実際に公式ページを巡回して確認後….


子どもにとって花火が見にくい場所があると知り、どこなら見やすいか考えを巡らせてまた検索しはじめる。

画像
画像

タスクが簡単だったからか、全然迷わなかったのです。
お母さんがこんなこと言ってました。

よし、「花火」って書いてある!ディズニーソングにあわせて色とりどりの花火が上がるのね。時間は約5分かー短いね〜でもきれいなんだろうな〜

他にも難易度が高いページ&タスクでテストを実施しました。
ぜひ、みなさまと試してみてください。


評価

細かい評価や比較の言及はここではスキップしますが、
AIの頭がよすぎる」。

これは悪い意味で、です。

例えば”節子85歳 老眼ぎみ”を設定しても、「文字が小さくて見にくい」といいつつも….どんどんタスクをクリアしていくため、現実のユーザーとはもしかしたら大きな隔たりがあるかもしれません。

よくよく調べると、Playwright MCPはアクセシビリティツリー(ボタン、テキストなどの意味構造のみ)をクイックに参照していることがおおいので、UI 構造+位置情報からそれっぽく言っているだけのときもありそうです。

つまり、視覚情報として捉えているわけでないためこのような結果なんだろうと。

なので、OpenAIのOperatorのような「スクリーンショット+仮想マウス/キーボード」だけを使って GUI を操作する 方式でブラウジング利用した仮想ブラウザにテストをさせるほうがよいのかもしれません。

Operatorの可能性はこちらの記事をどぞ↓


とはいえ、2024年には、実際の人間にインタビューをして、その人の考え方・性格・行動傾向を元に、AIの“人格コピー(クローンエージェント)”を作ることで、本物の人の代わりに AI に答えさせても、85% くらい同じような答えをすることができるようになっているようです。
参考:https://arxiv.org/abs/2411.10109

現在の最新モデルを使えばより高い精度が可能です。

もう少しユーザーへのなりきりを極端にするか、
詳細に設定するなど探索してみたいと思っています。



AIテストは「高速×量産」の価値がある

AI を仮想ユーザーに据えたユーザビリティテストは、「高速に × 大量に」フィードバックを得られることが最大の強みです。

具体的には
(1) テスト回数を極端に増やせる
(2) 多様なペルソナ/専門家を同時並行で走らせられる
(3) タスク結果と思考ログを完全に保存できる
(4)  動的UI(Generative UI)の検証にも将来的に有効

という 4 点に集約できます。

これにより従来は月 1 回程度しか回せなかった検証を「毎日・毎コミット」で自動実行し、“不具合の早期発見 → 即修正” のループを高速で回せます。Cursorなら並行実施も可能です。


(4)について補足すると、特に Generative UI(Adaptive UI) のように画面が文脈に応じて動的変化する設計では、人間がすべてのパターンを網羅検証するのは現実的に不可能です。

AI エージェントなら、動的に生まれる UI バリエーションに自動で適応しながら次々にテストを走らせられるため、「人間が見逃していた経路」や「レイアウト崩れが起こる希少ケース」まで拾い上げられます。


Generative UI が本格化するにつれ、AI テストの需要はむしろ高まると考えられます。

「AI の指摘はまだ粗いのでは?」という懸念はもっともですが、これも時間の問題なので今から取り組んでおく価値が十分にあると感じます。

それでは。

画像

AIでユーザー調査が気になるあなたはこちらもどうぞ:


いいなと思ったら応援しよう!

しょーてぃー
いただいたサポートは、記事を書くモチベーションをあげるためのグミの購入に使わせていただきます!

ピックアップされています

顧客体験をつくる

  • 9本

コメント

ログイン または 会員登録 するとコメントできます。
よむ、インサイトをかく人。ビジネス×デザイン×AI 📝 Experience Designer | Executive AI Director at Connected Mobility Company | NewsPicks プロピッカー | 事業やサービスの体験設計 |
実践:AIでユーザビリティーテストは何がいいのか|しょーてぃー
word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1