chrome-devtools-mcp mobile testing EN thumbnail

chrome-devtools-mcpを使ってモバイル実機に近い形でAIブラウザテスト

June 2, 2026

AIにブラウザを操作させてShopifyストアをモバイル確認するとき、Chrome拡張でウィンドウ幅を390pxにリサイズしていました。chrome-devtools-mcpに切り替えてから、User Agent・タッチイベント・メディアクエリも含めて実機に近い状態で確認できるようになりました。

見た目は似ていますが、ウィンドウリサイズとデバイスエミュレーションは動作が全然違います。

ウィンドウリサイズからデバイスエミュレーションへ切り替えるイメージ

ウィンドウリサイズとデバイスエミュレーションの違い

Chrome拡張でウィンドウを390pxに縮めると見た目はモバイルっぽくなりますが、変わるのは表示幅だけです。chrome-devtools-mcpのエミュレーションはもう少し深いところまで切り替わります。

項目	ウィンドウリサイズ	デバイスエミュレーション
表示幅	✅ 変わる	✅ 変わる
User Agent	❌ PCのまま	✅ iPhoneに変わる
タッチイベント	❌ マウスイベントのまま	✅ タッチイベントに切替
Device Pixel Ratio	❌ 1xのまま	✅ 2x（Retinaに近い）
CSSメディアクエリ	△ 幅のみ反応	✅ UAベースも正確に反応

User Agentが変わらないと、JavaScriptで navigator.userAgent を見て処理を分岐しているコードは「PCで閲覧している」と判断したまま動きます。タッチイベントが変わらないと、タップ時の挙動やホバー状態の扱いもPCのままです。

chrome-devtools-mcpを使うと何が変わるか

メディアクエリ、タップターゲット、実測値を確認するイメージ

@media (pointer: coarse) が正しく効く

@media (hover: none) や @media (pointer: coarse) はタッチデバイスかどうかを見て分岐するメディアクエリです。ウィンドウリサイズだけだとこれが反応しないので、モバイルだけスタイルを変えている要素の確認がうまくできません。

小さいボタンをちゃんと検出できる

44×44px以上のタップターゲットが推奨ですが、マウス操作だと小さいボタンも普通にクリックできてしまいます。タッチイベントが有効な状態でテストすると、実際にタップしにくいかどうかが分かります。

数値でレポートできる

chrome-devtools-mcpはCDPに直結しているので、evaluate_script で getBoundingClientRect() を呼べばピクセル単位の実寸が取れます。「なんか小さい気がする」ではなく「ボタン高さ36px（推奨44px未満）」として残せます。

Chrome拡張との使い分け

chrome-devtools-mcpとChrome拡張の使い分け

chrome-devtools-mcpはログイン不要のページで使います。ストアフロントの確認なら認証なしで動きます。

パスワード保護中のストアや管理画面など、ログイン済みのセッションが必要な場合はChrome拡張を使います。

ストアフロントのモバイル表示確認
  → chrome-devtools-mcp（デバイスエミュレーション）

パスワード保護付きストア・ログイン後のページ
  → Chrome拡張（ユーザーのセッションをそのまま使用）

より精度の高い確認
  → Chrome拡張（操作・視覚確認）+ chrome-devtools-mcp（実測・詳細検査）の併用

実際のプロンプト

モバイル表示テストのプロンプト手順イメージ

chrome-devtools-mcpを使ったモバイルテストのプロンプト例です。

chrome-devtools-mcpを使って、以下の手順でShopifyストアの
モバイル表示テストを実施してください。

## テスト対象
URL: https://your-store.myshopify.com
デバイス: iPhone 14エミュレーション（375×812）

## Step 1: トップページ
1. iPhone 14のデバイスエミュレーションを有効にする
2. ストアを開いてスクリーンショットを撮る
3. ヘッダー高さ・ハンバーガーボタンのタップターゲットサイズを取得する

## Step 2: コレクションページ
1. /collections/all を開いてスクリーンショットを撮る
2. 商品カードの幅を実測する

## Step 3: 商品詳細ページ
1. 商品ページを開いてスクリーンショットを撮る
2. 「カートに追加する」ボタンの高さを実測する（44px以上が推奨）
3. z-indexを確認して他の要素と重なっていないか確認する

## Step 4: カート操作
1. カートに追加してドロワーを開く
2. ドロワーの幅・チェックアウトボタンの高さを実測する

## Step 5: レポート作成
確認結果・実測値・発見した問題をまとめてください。

「ボタンが小さい気がする」ではなく「ボタン高さ36px（推奨44px未満）」という形で問題を残せます。

エミュレーションと実機確認を併用するイメージ

コラム：それでも実機テストは必要

chrome-devtools-mcpのエミュレーションは精度が高いですが、実機の完全な代替ではありません。フォントレンダリング・スクロールの慣性・SafariとChrome固有の挙動差・実際の指の太さによる操作感など、実機でしか確認できないことは残っています。「大きな改修の前後に実機で一度通しで確認する」という習慣は引き続き必要です。chrome-devtools-mcpは実機確認の頻度を減らすツールであって、なくすツールではありません。

まとめ

モバイルテストの精度が上がる要点のまとめ

chrome-devtools-mcpに切り替えてから、モバイルのテスト結果が変わりました。User AgentとタッチイベントがCDPレベルで切り替わるので、CSS・JavaScriptの挙動が実機に近い状態で確認できます。

ストアフロントならchrome-devtools-mcp単独で動きます。ログインが必要な場面はChrome拡張と組み合わせてください。

Back to blog

Item added to your cart