Playwright MCP で自社ウェブサイトのアクセシビリティを AI に検証させてみた

アノテーションのテクニカルサポート兼ウェブサイトを管理している Shimizu です。

MCP（Model Context Protocol） が巷で話題となっていますが、その中でもブラウザを操作できることで人気のMCP Playwright を利用して、自社ウェブサイトのアクセシビリティを検証してみました。今回はその内容をご紹介します！

前準備

まず Claude Desktop アプリケーションから Playwright を利用できるように設定します。下記の記事を参考にさせていただきました。

参考：Claude DesktopとPlaywright MCPを連携してみた | DevelopersIO

検証の内容と目的

今回実施した内容は AI に指示を与え、弊社（アノテーション株式会社）のウェブサイトから求人一覧の情報にたどり着けるかを検証する、というものになります。前提として、弊社のウェブサイト構成は以下のようになっています。

• コーポレートサイト（ https://annotation.co.jp/ ）
  このサイト上には会社概要のみで、求人情報はありません。ただしナビメニュー上に採用サイトへのリンクがあります。

• 採用サイト（ https://careers.annotation.co.jp/ ）
  このサイトの 募集職種 というページに目的の情報（求人一覧）があります。

AI に期待する動作は、最終的に採用サイトの「募集職種」ページにブラウザでたどり着き、情報を取得できることです。

やってみた

Claude Desktop アプリケーション上で以下のようなプロンプトを与えてみました。

アノテーション株式会社のウェブサイトにブラウザでアクセスして募集職種のページを表示してください。

※どのような導線をたどるか確認したいため、あえて「採用サイトにアクセスして」という直接的な指示は与えていません。

するとブラウザが起動して、まずコーポレートサイトが開きました。サイト画面のスクリーンショットを取得して、ナビメニューの「採用サイト」のリンクを見つけてくれたようです。

次に採用サイトが開き、ナビメニュー上から「募集職種」のページを見つけてくれたようです。

「募集職種」ページにたどり着き、スクリーンショットを取得して記載されている求人情報を読み取ってくれました。

以上のように、採用サイトを直接見つけてはくれなかったものの、ほぼ期待した通りにコーポーレートサイト → 採用サイト → 募集職種のページ、という順番でたどり着いてくれました。

ついでに改善点を確認するため、以下のようにプロンプトを入力してみました。

アクセシビリティやUIに改善するべき点があれば教えてください。

すると、どのサイトにも当てはまりそうな一般的な推奨事項もあるものの、有用なアドバイスも得られました！

今回得られた気づき

検証ではほぼ期待通りに目的の情報を見つけてくれましたが、これはサイト構成を把握している筆者が AI を誘導するようにプロンプトを入力したためとも思われます。

試しにプロンプトを省略して「アノテーション株式会社の求人情報を見つけてください」のような曖昧な指示にしたところ、AI が他の求人サイトを見に行ったりして迷子になってしまい、なかなか目的のページにたどり付けない場合もありました。

AI が目的のページを探すプロセスを見ていると、リンクテキストやURLのパス文字列を重視しているようなので、実際のユーザーが目視でページを探すときの動作に近いと感じました。そのためユーザー（ひいては AI）が情報を見つけやすくするためには、ウェブサイトの設計時に以下のような点に気をつける必要があると感じました。

• リンクテキストやナビメニューの文言は視覚的に分かりやすくする
• 重要な情報は極力ページの上部に表示し、階層を深くしない
• 不要なリンクをたどって迷子にならないよう、リンク切れ等は常にチェックしておく

まだすべての点を改善できていませんが、自社のウェブサイトが AI フレンドリーであるかを見直すきっかけになり、学びがありました。

この記事が参考になりましたら幸いです！

アノテーション株式会社について

アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。当社は様々な職種でメンバーを募集しています。「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。