Safari MCPで変わるWeb制作デバッグ──AIエージェントがSafariを直接検証する

2026年9月17日、Safari 27.0がリリースされました。注目されがちなのはCustomizable SelectやGrid LanesといったCSSの新機能ですが、Web制作のワークフローへのインパクトが大きいのはSafari MCPサーバーの標準搭載です。Claude CodeやCodexなどのMCP対応エージェントが、Safariを直接操作してDOM、ネットワーク、スクリーンショット、コンソール、計算済みスタイルを確認できるようになりました。

これまでSafari固有の崩れを直すときは、人間がスクリーンショットを撮り、エージェントに状況を説明し、修正後にまた確認する必要がありました。Safari MCPは、その確認ループをエージェント自身に渡します。この記事では、何が変わるのか、5分で試すセットアップ、実務での使い方、そして「実機iPhoneの代替にはならない」という限界まで整理します。

30秒でわかる結論

Safari 27.0にMCPサーバーが入り、Claude CodeやCodexがSafariを直接操作できる。
DOM、ネットワーク、スクリーンショット、コンソール、計算済みスタイル、アクセシビリティ、パフォーマンスをエージェントが確認できる。
セットアップはSafariの設定と1コマンド。対象はmacOSのSafariで、実機iPhoneを操作するものではない。
Safari固有バグの調査が「人間のスクショ＋説明」から「エージェントの自己検証」に変わる。
今すぐ試す価値が高い。ただし最終確認は実機iPhoneで行う。

何が起きたのか：Safari 27とSafari MCP

Safari 27.0は、Appleが「これまでで最も長いリリースノート」と表現した大型アップデートです。58から80に増えた機能に加え、844件の修正が含まれます。ESモジュールローダーの刷新、トップレベルawaitの仕様準拠、スクロールアンカリング、Customizable Selectなど、Web制作に効く変更が多数入っています。

その中でも異色なのがSafari MCPです。MCPサーバーはmacOS上でローカルに動作し、Apple側へのネットワーク通信は行いません。エージェントはSafariのウィンドウを操作し、次のような情報を取得できます。

DOMとページ内容（Markdown、HTML、JSONなど）
ネットワークリクエストの一覧と詳細（ヘッダー、ボディ、タイミング）
コンソールログ、ダイアログ、スクリーンショット
計算済みスタイル、レイアウト、要素の状態
クリック、入力、スクロール、ホバー、キー操作などのページインタラクション
ナビゲーションタイミングやリソース読み込み時間

つまり、これまで人間がDevToolsを見ながら行っていた調査の多くを、エージェントが自分で実行できます。Appleは「エージェントがコーディングプロセスに不可欠になりつつある」ことを理由に、このサーバーを標準搭載しました。

何が変わるのか：デバッグのループが変わる

一番大きいのは、修正のサイクルが短くなることです。これまでは「人間が異常を見つける → スクリーンショットを撮る → エージェントに説明する → 修正する → また人間が確認する」という流れでした。Safari MCPでは、エージェントが自分でページを開き、状態を取得し、修正後に再読み込みして確認するところまで進めます。

工程	これまで	Safari MCP後
崩れの発見	人間がスクショを撮って説明	エージェントがSafariで開き、計算済みスタイルを比較
再現	手動でクリック・入力	ページインタラクションでクリック、入力、スクロールを再現
アクセシビリティ	別ツールで検査	ラベル欠落、ARIAの誤用、コントラストをエージェントが確認
パフォーマンス	DevToolsを手で確認	ナビゲーションタイミングとリソース時間を取得
修正確認	再度スクショを撮る	再読み込みして自己検証

人間の仕事は「どの画面の、何を確認するか」を決めることと、最終的な採否判断に移ります。全部を任せるというより、調査と再現の手間をエージェントに渡すイメージです。

セットアップ：5分で試す

前提はmacOSのSafari 27.0以降です。Safari Technology Previewでも試せます。

Safariの「設定 > 詳細」で「Webデベロッパ用の機能を表示」をオンにする。
「設定 > Developer」で「Allow remote automation and external agents」をオンにする。
使っているエージェントにMCPサーバーを登録する。
「このサイトをSafariで開いて、Chromeとレイアウトが違う箇所を探して」と投げる。

Claude Codeの場合、ターミナルで次の1行を実行します。

Bash

claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

Codexの場合は次のとおりです。

Bash

codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

汎用のMCP設定ファイルなら、次のように書きます。

JSON

{
  "mcpServers": {
    "safari-mcp": {
      "command": "/usr/bin/safaridriver",
      "args": ["--mcp"]
    }
  }
}

MCPサーバーはローカルで動き、Appleへの送信はありません。ただし取得したDOM、スクリーンショット、コンソールログは、接続したエージェントとモデルに渡ります。信頼できるエージェントだけを接続し、不要なときはRemote automationをオフに戻してください。

実務での使い方：4つのユースケース

1. Safariだけ崩れるCSSの調査
Chromeでは問題ないのにSafariでだけ余白やグリッドが崩れる案件は少なくありません。エージェントに両ブラウザの計算済みスタイルを比較させ、差分が大きい要素を優先して直します。

2. フォームやチェックアウトの状態確認
カート追加、住所入力、確認画面、エラー表示までをエージェントに操作させ、各ステップのスクリーンショットとコンソールエラーを取得します。手動で何度も往復するより、状態の抜け漏れを見つけやすくなります。

3. アクセシビリティ検査
ラベルの欠落、ARIA属性の誤用、コントラスト不足をエージェントに検査させます。SafariのWeb Inspectorはカラーピッカーにコントラスト情報を表示するようになったので、視覚的な確認と組み合わせやすくなっています。

4. パフォーマンスの当たり付け
ナビゲーションタイミングとリソース読み込み時間を取得し、LCPを悪化させている上位リソースを出させます。詳細なプロファイリングはWeb InspectorのTimelineに譲り、まず「どのリソースが怪しいか」を絞る用途が向いています。

エージェントに投げるプロンプト例

最初は対象を狭く、確認してほしいことを具体的に伝えるのがコツです。

TEXT

このサイトをSafariで開いて、Chromeと計算済みスタイルを比較してください。
レイアウトが大きく違う要素を5つ、セレクタと差分の内容つきで出してください。

トップページの問い合わせフォームを、ラベル欠落・ARIAの誤用・
コントラスト不足の観点で検査してください。問題は重大度順に並べてください。

カートに商品を追加し、住所入力から確認画面まで進めてください。
各ステップのスクリーンショットと、コンソールに出たエラーを取得してください。

Chrome DevTools MCPとの違いは？→ 検証するエンジンが違います。Chrome DevTools MCPはBlink、Safari MCPはWebKitです。クロスブラウザ案件では両方を使い、同じ操作を両エンジンで再現して差分を取るのが理想です。

注意点：MacのSafariであり、実機iPhoneではない

最も誤解しやすいのがここです。Safari MCPが操作するのはmacOS上のSafariであり、iOS実機のSafariではありません。iOS固有のアドレスバーの縮小、セーフエリア、タッチ操作、モバイルGPUの挙動まで保証するものではありません。

最終確認はiOS Simulatorまたは実機iPhoneで行う。
MCPは調査と再現の高速化に使い、リリース判断は人間が行う。
エージェントの報告はスクリーンショットや計算済みスタイルなどの証拠付きで受け取る。
デプロイや公開まで自動化せず、書き込み権限は必要最小限にする。

最初から全部を任せず、既存のSafariバグ1件で「発見→再現→修正→再確認」を一周させると、効果と限界の両方が測れます。修正後の再確認までやらせるのがポイントです。

対応状況と使う判断

環境	対応	備考
Safari 27.0（macOS）	利用可	設定＋`safaridriver --mcp`
Safari Technology Preview	利用可	`safaridriver`のパスが異なる
iOS Safari	対象外	MacのSafariを操作。実機確認は別途必要
Chrome DevTools MCP	別系統	Chrome側の検証に併用

自分なら使うか：今すぐ使う。 Safari固有のCSSバグとアクセシビリティ確認は、これまで時間がかかっていた領域です。MacのSafariで再現できる不具合なら、エージェントに調査させる価値が十分あります。一方で、iOS実機でしか再現しない問題や、決済・認証のような critical な導線は、従来どおり人間の最終確認を残します。