OverlayQA について
OverlayQA は、コーディングエージェント向けの MCP サーバーです。公開 URL のアクセシビリティ、コントラスト、デザイントークンを検査し、プロジェクト内の QA 指摘を管理できます。スキャンに加え、課題、ラベル、コメント、レビューのワークフローを備えています。
主な機能
- 01WCAG アクセシビリティスキャン
- 02カラーコントラスト検査
- 03デザイントークン監査
- 04QA 課題の作成と管理
- 05AI レビューの実行と結果取得
活用シーン
- 01ステージングページのアクセシビリティ違反を検査
- 02テキストと背景のコントラスト不良を特定
- 03スキャン結果から課題を作成
- 04プロジェクトで QA 課題を追跡・議論
MCP 対応
Claude Code、Cursor、Windsurf などの MCP 対応クライアントに、監査、課題管理、レビューのツールを提供します。OverlayQA アカウントに接続し、そのプロジェクトと課題を扱います。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://api.overlayqa.com/mcpclaude mcp add --transport http com-overlayqa https://api.overlayqa.com/mcp{"mcpServers":{"com-overlayqa":{"type":"http","url":"https://api.overlayqa.com/mcp"}}}Cursor で開く{"servers":{"com-overlayqa":{"type":"http","url":"https://api.overlayqa.com/mcp"}}}VS Code で開く{"mcpServers":{"com-overlayqa":{"type":"http","url":"https://api.overlayqa.com/mcp"}}}{"mcpServers":{"com-overlayqa":{"serverUrl":"https://api.overlayqa.com/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
23| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| url | string | はい | アクセシビリティの問題をスキャンする URL |
| context | string | いいえ | OverlayQA のプロダクト分析のため、このツールを呼び出す理由を 1 文で記述してください。目的のみを記述します(例:「チェックアウトページのコントラストの問題を確認する」)。認証情報、個人データ、ユーザーのメッセージの原文は絶対に含めないでください。 |
| projectId | string | いいえ | 結果を関連付ける任意のプロジェクト ID |
詳細
OverlayQA MCP
OverlayQA MCP は、AI コーディングエージェントにアクセシビリティとデザイン QA の強力な機能を提供する、Model Context Protocol サーバーです。 Claude Code、Cursor、Windsurf に任意の URL を監査させ、WCAG と色のコントラストの問題を検出できます。また、エディターを離れることなく、OverlayQA プロジェクトの問題を確認、割り当て、議論、ラベル付け、解決できます。
You: Scan staging.acme.com for accessibility issues, then open issues for the criticals.
Agent: scan_accessibility → 7 violations (2 critical, 3 high), score 71/100.
scan_and_create_issues → created 2 issues in "Acme Web":
- Buttons missing accessible names (WCAG 4.1.2): critical
- Insufficient text contrast on .cta (WCAG 1.4.3): high
You: List the open criticals.
Agent: list_issues(status=open, severity=critical) → 2 issues.
インストール
ワンクリックでインストールできます。
または、エディターの MCP 設定に手動で追加してください。
Claude Code(プロジェクトルートの .mcp.json)/Cursor(~/.cursor/mcp.json)/Windsurf(~/.codeium/windsurf/mcp_config.json):
{
"mcpServers": {
"overlayqa": { "command": "npx", "args": ["@overlayqa/mcp@latest"] }
}
}
MCP 互換クライアントであれば、どれでも同じように動作します。初回起動時にブラウザーのタブが開き、OverlayQA アカウントに接続します(無料、カード不要)。ワークスペースを選択してアクセスを許可すると、接続は 30 日間有効です。認証情報は ~/.overlayqa/auth.json にキャッシュされます。アクセストークンの有効期間は短く、バックグラウンドで更新されます。ダッシュボードの「接続済み AI アプリ」(app.overlayqa.com/mcp/connect)から、いつでもエディターの接続を解除できます。
ツール
エージェントが呼び出せるツールです。自然言語からモデルが適切なツールを選べるよう、それぞれ設計されています。
監査
| ツール | 内容 |
|---|---|
scan_accessibility | 任意の URL で WCAG 監査(axe-core)を実行します。違反項目、重大度、WCAG 達成基準、総合スコアを返します。 |
scan_contrast | ページ全体の色のコントラスト比を確認します。コントラストが基準を満たさない前景色と背景色の要素ペアを返します。 |
audit_tokens | 公開中の URL のデザインシステムトークンを監査します。トークン健全性スコア(0~100)と、重大度付きの検出結果(フォントサイズ、テキスト色、間隔、フォントファミリー、角丸の不整合)を返します。公開中のページのみを監査します。 |
ファイルと課題の管理
| ツール | 内容 |
|---|---|
scan_and_create_issues | URL をスキャンし、重大度のしきい値を超えるすべての違反項目について、課題を自動作成します。 |
create_issue | タイトル、重大度、種類、説明、任意の担当者を指定して QA 課題を登録します。 |
list_issues | ステータス、重大度、種類、ラベル、担当者、作成者、ページ、作成日時、またはアクティブ/完了/無視の状態で絞り込み、課題をページごとに取得します。各課題には、登録者と返信がまだ必要かどうかが表示されます。 |
update_issue | 指定した課題のフィールド、担当者、無視状態、またはステータスを編集します。UUID、または OQ-12 のような表示 ID を指定します。 |
create_project | サイト URL を指定してプロジェクトを作成します。 |
list_projects | チーム内のすべてのプロジェクトを一覧表示します。 |
list_labels | ワークスペースのラベルライブラリ、割り当て済みラベル、自分の権限を確認します。 |
create_label | 再利用可能なワークスペースラベルを作成します。 |
set_issue_label | 課題のテキストや他のラベルを変更せずに、ラベルを 1 つ適用または削除します。 |
rename_label | ワークスペースラベルの名前を変更します(オーナー/管理者)。 |
delete_label | ワークスペースラベルとその割り当てを削除します。課題は残ります(オーナー/管理者)。 |
AI レビューワークフロー
| ツール | 内容 |
|---|---|
run_auto_review | プロジェクト設定、無視された検出結果、すでに登録済みの課題を使って Auto Review を開始します。 |
compare_visual | 任意で測定済みの間隔を指定し、Figma フレーム、保存済みデザイン、またはアップロード画像とのビジュアル比較を開始します。 |
get_review_result | 保存済みレビューの進行状況、検出結果、スクリーンショットの証拠を取得します。 |
どちらの開始ツールにも、projectId、公開 URL の url、新しい UUID の requestId が必要です。ツールはすぐに jobId を返します。完了または失敗するまで、get_review_result で確認してください。応答を受信できなかった場合は、同じリクエスト ID と入力を再利用してください。結果を確認するためだけに、別のレビューを開始しないでください。レビューはスキャン上限を使用しますが、課題は自動的に登録されません。ビジュアル比較では、デザインで指定された幅でキャプチャし、決定論的なピクセル差分 CI 判定ではなく、AI による検出結果を返します。
サーバーが記録する情報
すべてのツールでは、任意の context 引数も受け付けます。これは、エージェントがツールを呼び出す理由を示す 1 文です。OverlayQA は、この文、ツール名、アカウント、プロジェクト ID と課題 ID、件数とスコア、スキャン対象 URL、エディター名とバージョン(MCP ハンドシェイクから取得)をプロダクト分析用に記録します。この文は長さが制限され、保存前にメールアドレスと認証情報のような文字列が除去されます。それ以外の情報が送信されることはありません。会話も、コードも、ツールの応答も送信されません。詳細については、overlayqa.com/privacy をご覧ください。
プロンプトの例
- 「example.com のアクセシビリティの問題をスキャンしてください。」
- 「料金ページのコントラストを確認し、基準を満たしていない箇所を教えてください。」
- 「staging.acme.com をスキャンして、重大または高の項目について課題を作成してください。」
- 「重大度が高いアクセシビリティの課題を作成してください。ログインボタンにフォーカスリングがありません。」
- 「Acme Web プロジェクトの未解決の重大な課題を一覧表示してください。」
- 「shop.acme.com のプロジェクトを作成してから、スキャンしてください。」
料金
| スキャン | イシューとプロジェクトの作成 | |
|---|---|---|
| 無料 | 1日3回、無期限 | 不可 |
| 14日間のトライアル | 1日30回 | 可 |
| 有料 | プランに応じて1日10~30回、Proでは無制限 | 可。Linear/Jira/Asana/Notionへのエクスポートにも対応 |
overlayqa.com/pricingをご覧ください。
よくある質問
どのエディターで使えますか? Claude Code、Cursor、Windsurf、およびMCP互換クライアント(標準のstdio MCPに対応しています)。
無料で使えますか? はい、カード登録なしで、アクセシビリティ/コントラストのスキャンを1日3回まで利用できます。14日間のトライアルでは、1日30回までスキャンでき、イシューとプロジェクトの作成も利用可能になります。トライアル終了後、イシューとプロジェクトの作成には有料プランが必要です(Proではスキャンが無制限です)。
実際には何をスキャンしますか? 公開URLなら何でも対象です。アクセシビリティのチェックでは、axe-coreをWCAG達成基準に対応付けています。コントラストのチェックでは前景色と背景色の比率を確認し、基準を満たさない要素の組み合わせを返します。
アカウントは必要ですか? はい、無料のOverlayQAアカウントが必要です。初回起動時にブラウザーのタブが開き、接続できます。接続は30日間有効で、ダッシュボードからいつでも解除できます。
OverlayQA Chrome拡張機能と連携しますか? はい。MCP サーバーと拡張機能では同じプロジェクトとイシューを共有するため、エディターから登録した内容は拡張機能とダッシュボードにも表示され、その逆も同様です。
文字入力よりクリックがお好みですか? 拡張機能をご紹介します
MCP サーバーはOverlayQAを利用する方法の1つです。もう1つは**Chrome拡張機能**です。表示中のページで任意の要素をクリックすると、スクリーンショットに加え、CSS、DOM、メタデータを取得し、数秒で開発にすぐ使えるイシューを作成できます。また、ページ上でAIによるアクセシビリティとデザインシステムの監査も実行できます。このサーバーと同じプロジェクト、同じイシューを共有します。
リンク
- ウェブサイト:overlayqa.com
- Chrome拡張機能:Chrome ウェブストア
- 無料のアクセシビリティチェッカー(アカウント不要):overlayqa.com/accessibility-checker
- 無料のカラーコントラストチェッカー(アカウント不要):overlayqa.com/color-contrast-checker
- 料金:overlayqa.com/pricing
- Model Context Protocol:modelcontextprotocol.io
ライセンス
MIT
カスタムイシューレーベル
list_labelsにプロジェクトUUIDを指定すると、そのワークスペースのレーベルと自分の権限を確認できます。create_labelは再利用可能なレーベルを作成します。set_issue_labelは、ほかのレーベルやテキストを変更せずに、1つのイシューにレーベルを適用または削除します。ワークスペースのオーナーと管理者はrename_labelとdelete_labelを使用できます。レーベルを削除すると、そのレーベルの割り当てが削除されますが、イシューは削除されません。list_issuesはlabelIds(いずれかに一致)を受け付けます。unlabeledも指定できます。共有レポートでは、共有時点のレーベル名が保持されます。
ローカルでの検証では、OVERLAYQA_API_BASEと分離されたOVERLAYQA_AUTH_FILEを設定できます。どちらも本番環境のデフォルトエンドポイントや通常保存されているログイン情報には影響しません。
0.3.0 の課題管理
対応する課題パリティ API のデプロイが必要です。既存のスキャンとステータス更新は、引き続き 0.2.0 と互換性があります。
| ツール | 機能 |
|---|---|
get_issue | 説明、担当者、ラベル、無視状態、スクリーンショット、キャプチャした要素/CSS、ビューポートの証拠、課題のコメントを読み取ります。 |
list_issues | 1 つ以上のステータス、重要度または種類、ラベル、担当者(me、unassigned、またはユーザー ID)、作成者、アクティブ/完了/無視状態で絞り込みます。hasMore がある場合は、次の page を指定して続けます。 |
list_project_members | 閲覧可能なプロジェクトのワークスペースで、割り当てやメンションに使うチームメイトのユーザー ID を確認します。 |
create_issue | 担当者を選択します。未割り当てにするには null を指定し、自分に割り当てるには省略します。既定の種類は General です。 |
update_issue | 指定したタイトル、説明、重要度、種類、ステータス、担当者、または無視フラグを変更します。省略したフィールドは変更されません。無視しても課題は解決済みになりません。verified に設定するとステータスが記録されますが、スキャンは実行されません。 |
move_issue | 安定した課題 UUID を使って、同じワークスペース内の書き込み可能な別プロジェクトに移動します。コメントと証拠は保持されます。移動後は、返された表示 ID を使用してください。 |
list_comments | ディスカッション、公開範囲、メンション、添付ファイルのメタデータを読み取ります。 |
create_comment | 明示的に internal(チームのみ)または public(チームとクライアント)の公開範囲を指定し、メンションと任意の PNG/JPG/PDF ファイルを添付して投稿します。 |
update_comment / delete_comment | 自分が作成したネイティブコメントを編集または削除します。編集しても公開範囲とファイルは保持されます。 |
get_comment_attachment | 課題のアクセスルールに従い、ネイティブコメントのファイルをファイル名と base64 バイト列として読み取ります。 |
メンションには、テキスト内で @[userId] を使い、同じ ID を mentionedUserIds に含めてください。コメントの作成には UUID の requestId が必要です。応答が失われた後に同じ投稿を再試行する場合は、同じ ID を再利用して、二重投稿を防いでください。添付ファイルはファイル名と MIME タイプを指定した base64 バイト列です。コメントあたり、PNG/JPG/PDF ファイルを最大 10 個、合計 10 MiB まで添付できます。
互換性のため、list_issues は既定ですべての状態を返します。無視されていない未解決/進行中の課題を取得するには、state: "active" を指定します。finished には、無視されていない解決済み/検証済み/クローズ済みの課題が含まれます。ignored は独立した無視フラグで絞り込みます。指定したフィルターはすべて組み合わせて適用されます。ページ番号は 1 から始まり、1 ページあたり最大 100 件の課題が含まれます。hasMore が false でない限り、絞り込み後の空のページはプロジェクト全体の結果を意味しません。
新しいフィードバックを定期的に確認するには、すでに確認済みの最新の課題の createdAt(2026-10-05T22:00:00Z のような、タイムゾーン付き ISO-8601 時刻)を createdAfter に渡します。それより後に作成された課題のみが返されます。pageUrl を指定すると、一覧を 1 つのページに絞り込み、クエリ文字列は無視されます。一覧に含まれる各課題には source(client はレビュー担当者が共有リンクから報告したことを示します)、commentCount、lastCommentAt、lastCommentBy(reviewer または team)が含まれます。そのため、source が client で commentCount が 0 の場合、または lastCommentBy が reviewer の場合、その課題にはまだ返信が必要です。サーバーがフィルターに対応するよう更新されていない場合、ツールはフィルターなしの一覧ではなく FILTER_NOT_SUPPORTED を返します。
上記のラベルツールは 0.3.0 に含まれています。後続のレビューワークフロー、クライアントレビュー用ツール、スケジュールされたレビューについては以下で説明しており、それぞれ対応するサーバーの更新が必要です。保存済みデザインの検出は含まれていません。
リリース前の検証
npm test と npm run build を実行します。ライブジャーニーでは、指定されたフィクスチャアカウントを使用して、ビルド済みクライアントを実際の stdio プロトコル経由でローカル API または本番環境に接続し、操作します。プロジェクトの作成と削除は自動的に行われ、JSON と HTML の証拠が出力されます。
MCP_PARITY_API=http://127.0.0.1:3241 MCP_SERVER_ENV=/path/to/server/.env npm run test:issues-live
MCP_PARITY_API=https://api.overlayqa.com npm run test:issues-live
リリースの順序:サーバーエンドポイントをデプロイして検証し、その後 npm 0.3.0 を公開して MCP レジストリを更新します。ローカルビルドやバージョンの更新は公開ではありません。
デプロイした修正を検証する
verify_issue({ issueId, requestId }) は、課題に保存された公開 URL に対して、ダッシュボードと同じ修正検証エンジンを実行します。課題のステータスが解決済み、検証済み、またはクローズ済みであり、元のスクリーンショットの証拠があり、検証可能な種類である必要があります(General と Improvement は検証できません)。チェックごとに新しい UUID を使用してください。同じリクエストへの応答が失われて再試行する場合に限り、その UUID を再利用してください。検証ではワークスペースの既存の権限と検証枠を使用し、サーバーのロールアウト設定に従います。
結果には、保存されたチェック ID、判定、説明、信頼度、検証後のスクリーンショット URL、キャプチャのコンテキスト、タイムスタンプが含まれます。チェック結果は、合格、条件付き合格、不合格、判定不能、エラーのいずれかです。課題のステータスは更新されません。update_issue でステータスを変更するかどうかを判断する前に、証拠を確認してください。非公開ページや localhost のページでは、サインイン済みのブラウザー拡張機能によるキャプチャが必要です。
get_issue_verifications({ issueId }) は、保存済みの最新 50 件のチェックを新しい順に取得します。新たなチェックは実行しません。get_issue には latestVerification も含まれ、該当するチェックがない場合は null になります。古いサーバーでフィールドが存在しない場合は、この機能がデプロイされていないことを意味します。課題が一度もチェックされていないという意味ではありません。
list_issues は、課題に「No longer detected」のフラグが設定されている場合は notDetected: true、そのフラグが設定されていない場合(チェックされたことのない課題を含む)は false を受け付けます。この条件は、ページネーションの前にステータス、状態、ページ、その他のフィルターと組み合わせて適用されます。返される notDetectedAt と lastDetectedAt のタイムスタンプは、スキャンによる検出を示すものであり、修正が確認されたことを示すものではありません。このフィルターを無視するサーバーは FILTER_NOT_SUPPORTED として拒否されます。
これらの追加機能を利用するには、クライアントのリリース前に対応するサーバーのデプロイが必要です。ローカルとホスト型の MCP のどちらでも、検証と保存済み履歴を利用できます。ホスト型の検証には、スキャン権限と書き込み権限が必要です。この変更によって、本番環境で検証が有効になることはありません。
クライアントレビューのリンクと進捗(次回リリース)
これらのツールを公開するには、対応するサーバーをデプロイしておく必要があります。そのサーバーをデプロイする前に、ゲストオプションのデータベースマイグレーションを適用してください。ローカルおよびホスト型の MCP 接続で利用でき、アプリのプロジェクト権限に従います。
| ツール | 内容 |
|---|---|
list_client_reviews | プロジェクトのクライアントリンク、タイトル、共有 URL、キャプチャ状況、訪問数、コメント、レビューを完了したレビュアー、および各クライアントの招待・リマインダー状況を読み取ります。 |
create_client_review | ライブまたはスナップショットのレビューリンクを作成します。タイトル、クライアントのメールアドレス、ウェルカムメッセージ、ゲスト限定の非公開コメントを任意で指定できます。スナップショットのキャプチャは非同期で完了します。準備状況は一覧を読み取って確認してください。 |
update_client_review | リンクを無効化または復元したり、有効期限やレスポンシブプレビューを変更したりします。 |
set_client_review_recipients | クライアントのメールアドレス一覧全体を置き換えます。残したアドレスの履歴は保持され、削除したアドレスにはリマインダーが送られなくなります。空の一覧を指定すると、リンクを残したまま受信者をすべて削除します。 |
公開リンクを作成するには、ユーザーが共有する意思を示す必要があります。メールアドレスを追加するには、その相手を招待する意思を示す必要があります。新しいアドレスには招待メールと、3、7、10日目の自動リマインダーが送信される場合があります。invitationsEnabled と、返されるアドレスごとの invites を確認してください。配信が無効な場合、アドレスは sent: false, skipped: true の状態で保存され、有効化後に招待できます。招待に失敗しても、リンクや正常に送信された招待が取り消されることはありません。
一覧には doneReviewers と、email、invitedAt、inviteFailed、lastReminderAt、done、commented、unsubscribed を含む clients が返されます。レビュー完了は、クライアントがフィードバックの送信を終えたことを意味します。修正が完了したことを証明するものでも、全員が完了したことを意味するものでもありません。この操作を行えるのはクライアントだけです。リマインダーの送信時期と停止条件は既存のスケジューラーが管理します。MCP に即時送信ツールはありません。
受信者の更新結果が不確かな場合は、同じ一覧全体を再送して、再度開いてください。残したアドレスに招待が重複して送信されることはありません。レビューの作成には再試行用キーがありません。応答が失われた場合は、新たに作成する前に list_client_reviews を使い、保存済みのリンクがないか確認してください。プロジェクトの閲覧者と読み取り専用のホスト型接続では、進捗を読み取ることはできますが、リンクの変更や相手の招待はできません。
保持された調査結果、定期レビュー、トラッカーへのエクスポート
これらのツールを使用するには、対応するサーバーの更新が必要です。create_review_issues は、自動レビュー/ビジュアル比較のロールアウトゲートと連動しています。
| ツール | 機能 |
|---|---|
create_review_issues | 完了したレビューから、選択したゼロベースのインデックスを登録し、保存済みのスクリーンショット、ページのコンテキスト、修正ガイダンスを保持します。同じジョブとインデックスを再度指定すると、既存のイシューを取得します。 |
list_scheduled_reviews、create_scheduled_review、update_scheduled_review、delete_scheduled_review | ダッシュボードに既存のプロジェクト権限、プランの制限、実行頻度のルールに従って、公開ページの定期レビューを管理します。 |
run_scheduled_review、get_scheduled_review_result | リクエスト UUID で実行を開始し、同じ UUID を使って結果をポーリングします。「今すぐ実行」ではメールは送信されません。ID と結果は 24 時間保持されます。リクエスト ID がない場合は、最新の保存済みベースラインと利用可能な完全な証跡を読み取ります。 |
list_export_connections、list_export_destinations | 接続済みのトラッカーと明示的なエクスポート先を確認します。collection を省略すると、プロバイダーで利用可能なコレクションと必須入力が表示されます。 |
export_issues、get_issue_export_status | 証跡とともに既存のイシューをエクスポートし、保存済みの配信/同期状態を読み取ります。各結果を確認してください。一部の添付ファイルが未処理の場合や、処理が保留中の場合は成功ではありません。 |
エクスポートでは、製品に既存のアダプターを通じて Jira、Linear、Asana、Trello、Notion、ClickUp、GitHub、Basecamp をサポートしています。宛先フィールドは必須です。クライアントが最初のプロジェクトやリストを選択することはありません。Notion では、接続時に保持されたデータベースが表示され、任意のデータベースを検索することはできません。すでにエクスポート済みのイシューは、元の宛先を維持します。画像、ディスカッション、サポート対象のフィールド同期には、アプリと同じプロバイダーの制限が適用されます。保存済みの同期タイムスタンプは、最新のラウンドトリップが成功した証拠ではありません。
例:list_export_destinations を { "provider": "trello" } とともに呼び出し、選択したボードの boards と lists を一覧表示します。選択したボードの boardId と listId の両方を export_issues.destination に渡します。将来のスキャンのスケジュール設定やイシューの共有には、ユーザーからの依頼が必要です。結果が不確かな場合は、新しい処理を開始する前に保存済みの状態を読み取ってください。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。