Playwright MCP を使ってAIにUXを評価してもらう

Posted at 2025-04-12

はじめに

乗り遅れましたが巷ではMCPが流行っていたので、気になっていたPlaywright MCPを使ってみたいと思います。

今回は、AIが画面操作を出来るならUXも評価してくれるのでは？という思い付きを試してみました。

1. MCPとは？

MCPは、Model Context Protocolの略称です。
Protocolとある通り、「AI」と「サービスやリソース」を繋ぐ、共通規格です。

従来の悩み

従来は、AIと他サービスやリソースを連携させる際、それぞれの接続先ごとに個別の実装が必要となり、開発者に大きな負担がかかっていました。

下記ではAIエージェントが利用できるように「ブラウザ操作」「画像生成」など個別に実装する必要があります。

MCPが解決すること

「AI」と「サービスやリソース」を繋ぐ部分を共通規格化することで、開発の負担が減り、手軽にAIとサービス・リソースを接続できるようになりました。

MCPのアーキテクチャ

クライアントサーバモデルを採用しており、主なコンポーネントとしては、「MCPホスト」「MCPクライアント」「MCPサーバー」になります。

大変分かりやすい引用元：https://speakerdeck.com/minorun365/yasasiimcpru-men?slide=12

単語	説明
MCPホスト	MCPクライアントを内包したユーザーが直接やり取りするアプリ
MCPクライアント	MCPサーバーと通信し、接続するための部品
MCPサーバ	MCPサーバは、MCPクライアントからリクエストを受け、データソース、リソース、ツールなどへアクセスし、その結果を返す部品

参考：公式サイトとGitHub

そのほか参考にしたサイト

2. Playwright MCPとは?

Playwrightは自動化ツール

Playwrightは、Microsoftが開発するE2Eテスト向けの自動化ツールです。

E2Eテストは、ユーザー視点で実際にシステムを利用するシナリオを描き、本番に近い形で行うテストです。基本はブラウザ操作を行いテストすることになるのですが、ブラウザ操作をテストコードを元にPlaywrightが自動化してくれます。

Playwright MCPはPlaywrightのMCPサーバー

Playwright MCPはPlaywrightのMCPサーバーになります。
MCPクライアントから呼び出すことで、AIがPlaywrightを使用して画面操作ができるようになります。

Playwright MCPにはモードが2つある

スナップショットモード（デフォルト）

１つめは、アクセシビリティツリーのスナップショットを使用するモードです。

アクセシビリティツリー
アクセシビリティツリーは、DOMツリーから生成されたアクセシビリティ関連情報の集まりです。
例えば、要素の名前、状態、補足説明、役割(ボタン)といった情報です。
なので例えば div/といった要素は、省略されます。

https://developer.mozilla.org/ja/docs/Glossary/Accessibility_tree

ビジョンモード

2つめは、実際のブラウザでページをレンダリングし、動的な要素やインタラクションを含めた評価を行うためのモードです。

参考

3. やってみる

ということで実際にPlaywright MCPを設定して、UXの評価をしてもらおうと思います。
今回は、VSCodeのMCP設定を利用して、GitHubCopilotからMCPを利用します。

Step1. VSCodeに Playwright MCP を使用するための設定を行う

下記の記事を参考にVSCodeの設定を行いました。

VSCodeを開く
ショートカット「Ctrl」 + 「,」で設定を開く
「Mcp」を検索する
Mcp欄の「settings.jsonで編集」リンクを押す (押すとsettings.jsonが開かれます)
settings.jsonを下記の内容に修正する

settings.json

{
  "mcp": {
    "servers": {
      "playwright": {
        "command": "npx",
        "args": [
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

Step2. GitHubCopilotを準備する

以下のアイコンからGitHubCopilotのチャットを開きます
設定を「質問する」から「エージェント」へ変更します
settings.jsonから「▷起動」をクリックして、Playwright MCPサーバーを起動します

Step3. ユーザーのペルソナを用意する

あくまでお試しなので、適当に3名分のペルソナを用意しました。

ペルソナについては、下記を参照。ざっくりと「ペルソナ = 仮想のユーザ象」です。
https://www.softbanktech.co.jp/special/blog/dx_station/2022/0027/

AIには、下記のペルソナに為りきってもらって、評価してもらいます。

Aさん

職業：事務職（大手企業の総務部）
特徴：
- 28歳・女性
- 独身、都内のマンションで一人暮らし
- デジタル機器の基本的な操作は問題なくできる
- 効率化を重視する
- 仕事でExcelやWordを日常的に使用
- 通勤時間は電車で45分、その間スマホで情報収集
課題：
- 新しいシステムの習得に若干の不安がある
- 作業の正確性を重視するあまり慎重になりすぎる

Bさん

職業：中小製造業の工場長
特徴：
- 58歳・男性
- 既婚、子供2人（社会人）
- ガラケーからスマートフォンに切り替えて2年
- 工場のデジタル化プロジェクトを担当
- 休日は家族とゴルフや釣りを楽しむ
- メールは毎日チェックするが返信は遅い
課題：
- 新しいテクノロジーへの適応に時間がかかる
- 操作手順を紙にメモする習慣がある
- 直接的なコミュニケーションを好む
- デジタル機器の同時操作が苦手

Cさん

職業：専業主婦（元小学校教師）
特徴：
- 72歳・女性
- 夫と2人暮らし
- スマートフォンは孫とのLINEで使用
- パソコンは持っているが基本的な操作のみ
- 新しいことを学ぶ意欲はある
- 週1回はシニアのスマホ教室に参加
課題：
- 小さな文字が読みづらい
- タッチパネルの操作が不安定
- エラーメッセージが出ると不安になる
- 専門用語や英語に抵抗がある

Step4. 評価の観点と基準を決める

どのような観点で評価し、良い悪いの基準を定義します。
AIにはこの観点と基準をプロンプトで与えて、実際にUXを評価してもらいます。

評価観点

あなたはペルソナの人物となり、以下のUXを評価してください。
1. ユーザビリティ
- 直感的であるか。などのアプリケーションの使いやすさ	を評価してください。
2. デザイン
- 色、文字の読みやすさ、レイアウトなど、視覚的な要素のわかりやすさを評価してください。
3. パフォーマンス
- 操作に対するレスポンスが遅い表示が遅いなどのストレスが無いかなどを評価してください。

評価基準

以下の5段階で評価観点を評価してください。

5:非常に優れている
- 操作が直感的で、視覚的にも分かりやすく、パフォーマンスが非常に速くストレスが無い。
4:優れている
- 基本的に使いやすく、視覚的にわかりやすいが、改善の余地がある。パフォーマンスはストレスが無い。
3:普通
- 操作に慣れが必要だが、使える範囲。デザインは標準的で、パフォーマンスによるストレスは多少ある。
2:やや劣っている
- 使いにくく、視覚的に見づらい部分が多い。パフォーマンスも遅くストレスに感じやすい。
1:非常に劣っている
- 操作が複雑で、デザインが分かりにくく、システムの動作が遅くて使い物にならない。

Step5. テストのシナリオを考える

実際にPlaywrihgtMCPを使って、どのような画面操作を行ってもらうかを決めます。
今回は、気象庁のホームページから天気を調べるような操作を行ってもらいます。

画面の流れとしては、下記になります。

実際にAIに与えるプロンプトは下記になります。

シナリオ

以下のシナリオに沿って、石狩地方の天気を調べてください。
1. URL(https://www.jma.go.jp/jma/index.html)にアクセスしてください。
2. 地域の情報を開いてください。
3. 石狩地方の天気を調べてください。
4. 4/18の天気を教えてください。

Step6. Let's 評価！

上記のプロンプトを入力していくと、下記のように評価結果が返ってきます。
途中でPlaywrightMCPのツール(browser_nabigate)を実行するか聞かれるので、実行するよう促します。

※PlaywrightMCPのツールのラインナップを知りたい場合は、公式のGitHubに載ってます。
https://github.com/microsoft/playwright-mcp

Step7. 評価結果を確認してみる

ここからは実際のUX評価結果になります。今回はペルソナごとに評価を実施しました。

Aさんの場合

評価項目	スコア	評価内容	改善点
ユーザビリティ	4 (優れている)	サイトのナビゲーションは比較的直感的で、必要な情報にアクセスするのは容易でした。ただし、リンクのラベルがやや専門的で、初心者には少し分かりにくい可能性があります。	地域名や天気情報へのリンクに、より分かりやすい説明を追加すると良いでしょう。
デザイン	3 (普通)	レイアウトは標準的で、情報が整理されていますが、文字サイズや配色がやや古い印象を与えます。	モダンなデザインやアクセシビリティを考慮した配色を採用すると、視認性が向上します。
パフォーマンス	5 (非常に優れている)	ページの読み込み速度は非常に速く、操作に対するレスポンスも良好でした。	特にありません。

総合評価: 4 (優れている)

全体的に使いやすく、情報も迅速に取得できましたが、デザイン面での改善が期待されます。

Bさんの場合

評価項目	スコア	評価内容	改善点
ユーザビリティ	3 (普通)	サイトのナビゲーションは明確ですが、リンクのラベルが専門的で、Bさんのような新しいテクノロジーに不慣れなユーザーには少し難しいと感じる可能性があります。	操作手順をより明確にし、初心者向けのガイドや説明を追加すると良いでしょう。
デザイン	3 (普通)	レイアウトは標準的で情報が整理されていますが、文字サイズや配色がやや古い印象を与えます。Bさんのような年齢層には、文字が小さく感じられる可能性があります。	フォントサイズを大きくし、コントラストを高めることで視認性を向上させると良いでしょう。
パフォーマンス	5 (非常に優れている)	ページの読み込み速度は非常に速く、操作に対するレスポンスも良好でした。Bさんのようなユーザーでもストレスを感じることは少ないでしょう。	特にありません。

総合評価: 3.7 (普通～優れている)
Bさんのような新しいテクノロジーに不慣れなユーザーにとって、操作手順の明確化や視認性の向上が必要です。ただし、パフォーマンスは非常に良好で、全体的に使いやすいと感じられるでしょう。

Cさんの場合

評価項目	スコア	評価内容	改善点
ユーザビリティ	3 (普通)	サイトのナビゲーションは明確ですが、リンクのラベルや専門用語が多く、Cさんのような高齢者には少し難しいと感じる可能性があります。	ボタンやリンクにアイコンや説明を追加し、操作をより直感的にすることが望ましいです。
デザイン	2 (やや劣っている)	文字サイズが小さく、視認性が低いと感じられる部分がありました。Cさんのような高齢者には、文字が読みづらい可能性があります。	フォントサイズを大きくし、コントラストを高めることで視認性を向上させると良いでしょう。
パフォーマンス	5 (非常に優れている)	ページの読み込み速度は非常に速く、操作に対するレスポンスも良好でした。Cさんのようなユーザーでもストレスを感じることは少ないでしょう。	特にありません。

総合評価: 3.3 (普通)
Cさんのような高齢者にとって、視認性の向上や操作の簡略化が必要です。ただし、パフォーマンスは非常に良好で、全体的に使いやすいと感じられるでしょう。

いずれもパフォーマンスの観点は、言うことなしですね。
ただデザイン面がちょっと辛口です。特にCさんは72歳の高齢の設定でしたが、文字が小さいなど改善の余地がありそうです。
ユーザビリティ面もラベルの用語などが専門的すぎるようです。

こんな感じでちゃんとペルソナに沿った評価をしてくれました。

最後に

お試しレベルですが、Playwright MCPを使ってAIにUXを評価してもらいました。

良かった点

下記のような従来の評価の課題を解消できる
- 多数のテスターを長時間拘束することによる人件費
- 開発者側の立ち会い時間
- プロジェクト外部からのテスター調達における調整コスト
開発中など任意のタイミングで評価が可能
- 開発中はAIに評価してもらう。最後は人に評価してもらう。といった使い方もできそう
複数のペルソナでの評価が同時に実施できる
- テスターを用意するのにも💰は発生するので、好きなだけ評価できるのは良さげ

改善点

しっかりユーザー像を考える必要があり、場合によって準備に時間がかかる
あくまで一般論の評価結果しか返ってこない。想像の域を超えるような改善案は出ない
- ただし、人間による評価でも、採用される意見は一般的な観点のものが多く、少数意見の採用は限定的である
- AIによる一般的な観点での評価は十分に価値があるとも思った

結論

開発中のUXを評価するために利用する分には有用。
ただし最後は人に評価してもらうフェーズも必要。
よって評価の代替案というよりは、評価の回数を増やしてさらなるUXの向上に使えそう。

プロンプト次第でもう少し詳細な評価ができる余地は十分にあるので、機会があれば時間をかけて検証してみたいです。

おまけ1：スナップショットモードとビジョンモードで違いは出るか

先ほどPlaywrightMCPの説明の際、スナップショットモードとビジョンモードがあることを説明しました。
前の評価は、デフォルトのスナップショットモード使用したので、次はシナリオでビジョンモードを試してみます。

setting.jsonを修正して、「--vision」の引数を追加します。

setting.json

{
    "mcp": {
        "servers": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

さて以下が評価結果です。

Aさんの場合

評価項目	スコア	前回の評価	評価内容	改善点
ユーザビリティ	4 (優れている)	4	サイトのナビゲーションは比較的直感的で、必要な情報にアクセスするのは容易でした。Aさんのように効率を重視するユーザーにとって、操作性は良好です。	一部のリンクやボタンに、より具体的な説明を追加するとさらに使いやすくなるでしょう。
デザイン	3 (普通)	3	レイアウトは標準的で情報が整理されていますが、デザインがやや古い印象を与えます。Aさんのような若い世代には、もう少しモダンなデザインが好まれるかもしれません。	色使いやフォントの改善で、視覚的な魅力を高めることができます。
パフォーマンス	5 (非常に優れている)	5	ページの読み込み速度は非常に速く、操作に対するレスポンスも良好でした。Aさんのような効率を重視するユーザーにとって、ストレスを感じることはありません。	特にありません。

総合評価: 4 (優れている)
Aさんのような効率を重視するユーザーにとって、全体的に使いやすいと感じられるでしょう。ただし、デザイン面での改善が期待されます。

Bさんの場合

評価項目	スコア	前回の評価	評価内容	改善点
ユーザビリティ	3 (普通)	3	サイトのナビゲーションは明確ですが、リンクのラベルが専門的で、Bさんのような新しいテクノロジーに不慣れなユーザーには少し難しいと感じる可能性があります。	操作手順をより明確にし、初心者向けのガイドや説明を追加すると良いでしょう。
デザイン	3 (普通)	3	レイアウトは標準的で情報が整理されていますが、文字サイズや配色がやや古い印象を与えます。Bさんのような年齢層には、文字が小さく感じられる可能性があります。	フォントサイズを大きくし、コントラストを高めることで視認性を向上させると良いでしょう。
パフォーマンス	5 (非常に優れている)	5	ページの読み込み速度は非常に速く、操作に対するレスポンスも良好でした。Bさんのようなユーザーでもストレスを感じることは少ないでしょう。	特にありません。

Cさんの場合

評価項目	スコア	前回の評価	評価内容	改善点
ユーザビリティ	3 (普通)	3	サイトのナビゲーションは明確ですが、リンクのラベルや専門用語が多く、Cさんのような高齢者には少し難しいと感じる可能性があります。	ボタンやリンクにアイコンや説明を追加し、操作をより直感的にすることが望ましいです。
デザイン	2 (やや劣っている)	2	文字サイズが小さく、視認性が低いと感じられる部分がありました。Cさんのような高齢者には、文字が読みづらい可能性があります。	フォントサイズを大きくし、コントラストを高めることで視認性を向上させると良いでしょう。
パフォーマンス	5 (非常に優れている)	5	ページの読み込み速度は非常に速く、操作に対するレスポンスも良好でした。Cさんのようなユーザーでもストレスを感じることは少ないでしょう。	特にありません。

評価内容が少し具体的になった気がしますが、スコアは変わらなかったです。

おまけ2：最後にモードの違いで評価にどのような違いが生まれたか

プロンプト①

始めの評価は、Snapshot Mode で評価してもらいました。次にVision Modeに切り替わったと思います。モードの違いで何か評価は変わりましたか？

回答①

モードの違いによる評価の変化について説明します。

Snapshot Mode と Vision Mode の違い
Snapshot Mode: ページの静的なスナップショットを取得し、それを基に評価を行います。このモードでは、動的な要素やインタラクションの評価が難しい場合があります。
Vision Mode: 実際のブラウザでページをレンダリングし、動的な要素やインタラクションを含めた評価が可能です。これにより、よりリアルなユーザー体験を再現できます。
評価の変化
ユーザビリティ:

Snapshot Mode: 静的な情報に基づくため、動的な要素やインタラクションの評価が限定的でした。
Vision Mode: 実際の操作感や動的な要素の挙動を確認できるため、より詳細な評価が可能になりました。
デザイン:

Snapshot Mode: 静的なレイアウトや配色の評価に限定されました。
Vision Mode: 実際のフォントサイズや色のコントラスト、動的なデザイン要素の視認性を評価できました。
パフォーマンス:

Snapshot Mode: ページの読み込み速度や操作レスポンスの評価が難しい場合がありました。
Vision Mode: 実際のブラウザでの動作を確認できるため、パフォーマンスの評価がより正確になりました。
総合的な違い
Vision Modeでは、動的な要素やインタラクションを含めたリアルなユーザー体験を評価できるため、より正確で詳細なUX評価が可能です。その結果、特にユーザビリティやデザインの評価がより現実的なものになったと考えられます。

もし具体的な違いをさらに確認したい場合は、どの部分に注目するか教えてください。

プロンプト②

Snapshot Modeは、アクセシビリティツリーを使用した評価と思いますが、評価に影響を与えましたか？

回答

はい、Snapshot Modeが評価に影響を与える可能性があります。以下にその理由を説明します。

Snapshot Modeの特徴
アクセシビリティツリー: Snapshot Modeでは、ページの静的なアクセシビリティツリーを使用して評価を行います。これにより、ページの構造や要素のラベル付け、セマンティクスなどを確認できます。
動的要素の制限: 動的な要素やインタラクション（例えば、メニューの展開やモーダルの表示など）は評価できません。
影響の具体例
ユーザビリティ:

Snapshot Modeでは、動的な要素の操作性やインタラクションの評価が難しいため、実際の操作感を反映しきれない場合があります。
例えば、メニューが展開されるかどうか、ボタンが正しく動作するかなどはVision Modeでしか確認できません。
デザイン:

Snapshot Modeでは、静的なレイアウトや配色の評価に限定されるため、動的なデザイン要素（例えば、ホバー時の色変更やアニメーション）の評価ができません。
パフォーマンス:

Snapshot Modeでは、ページの読み込み速度や操作レスポンスの評価ができないため、パフォーマンスの評価が限定的になります。
結論
Snapshot Modeは、静的な要素やアクセシビリティに関する評価には適していますが、動的な要素やインタラクションを含む評価には限界があります。そのため、Vision Modeに切り替えることで、より現実的で包括的な評価が可能になります。

もし特定の評価項目についてさらに詳しく知りたい場合はお知らせください。

110

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up