[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"content-/ui-review-mcp-vs-playwright":3,"all-pages-for-dir":281,"og-image-/ui-review-mcp-vs-playwright":282},{"id":4,"title":5,"body":6,"category":262,"description":263,"extension":264,"meta":265,"navigation":266,"ogImage":267,"path":268,"project_name":269,"published":270,"publishedAt":271,"seo":272,"stem":273,"tags":274,"todo":267,"unpublished":270,"updatedAt":267,"__hash__":280},"pages/2026-05/2026-05-28/ui-review-mcp-vs-playwright.md","Claude Code の UI レビュー、Playwright じゃなくて Chrome DevTools MCP でも同じことはできる",{"type":7,"value":8,"toc":253},"minimark",[9,20,23,28,31,112,115,118,121,137,144,147,151,154,182,185,189,192,206,213,216,239],[10,11,12,19],"p",{},[13,14,18],"a",{"href":15,"rel":16},"https://zenn.dev/sktt_panda/articles/claude-code-playwright-ui-review",[17],"nofollow","Claude Code × Playwright で UI レビューを自動化する記事","を読んだ。やっていることは、改修した画面のスクショを Playwright で 3 種類撮って、Claude にチェックリストで見させて、改修→レビュー→改修のループを人手なしで回す、というもの。75 分の手動スクショ作業を 0 分にした、と書いてある。",[10,21,22],{},"これを見て真っ先に思ったのは、「Chrome DevTools MCP でも同じことができる」だった。普段ブラウザでデバッグするときに我々が叩いているのと同じ DevTools が、MCP 経由で Claude Code からも叩ける。スクショも、コンソールエラーも、ネットワーク 404 も、JS 実行で要素サイズを測るのも、全部できる。Playwright じゃないと無理な部分は本当にあるのか、を整理しておきたかった。",[24,25,27],"h2",{"id":26},"playwright-じゃないとできないことはほとんど無い","「Playwright じゃないとできないこと」はほとんど無い",[10,29,30],{},"記事のステップを Chrome DevTools MCP に置き換えると、こうなる。",[32,33,34,47],"table",{},[35,36,37],"thead",{},[38,39,40,44],"tr",{},[41,42,43],"th",{},"記事のステップ",[41,45,46],{},"Chrome DevTools MCP の対応",[48,49,50,69,79,89,104],"tbody",{},[38,51,52,56],{},[53,54,55],"td",{},"3種類のスクショ（PC ファーストビュー / PC 全体 / モバイル）",[53,57,58,62,63,62,66],{},[59,60,61],"code",{},"resize_page"," + ",[59,64,65],{},"emulate",[59,67,68],{},"take_screenshot",[38,70,71,74],{},[53,72,73],{},"コンソールエラー検出",[53,75,76],{},[59,77,78],{},"list_console_messages",[38,80,81,84],{},[53,82,83],{},"404 検出",[53,85,86],{},[59,87,88],{},"list_network_requests",[38,90,91,94],{},[53,92,93],{},"タップターゲット 44px 未満チェック",[53,95,96,99,100,103],{},[59,97,98],{},"evaluate_script"," で ",[59,101,102],{},"getBoundingClientRect"," を走査",[38,105,106,109],{},[53,107,108],{},"Claude が画像を読んで 7 観点で評価",[53,110,111],{},"同じ（評価部分はツール非依存）",[10,113,114],{},"技術的には、たぶん完全に代替できる。ここに差は無い。",[24,116,117],{"id":117},"記事の本当の価値はツール選択じゃない",[10,119,120],{},"では記事は何を提供しているのか。読み直してみると、優れているのは Playwright を選んだ部分ではなくて、その上に乗せている設計のほうだった。",[10,122,123,124,132,133,136],{},"ひとつは",[125,126,127,128,131],"strong",{},"評価軸を言語化して ",[59,129,130],{},"SKILL.md"," に固定したこと","。7 観点（ファーストビュー / レイアウト / タイポグラフィ / インタラクション / 画像 / モバイル / AI 感）を文章で書き出して、Claude にそれを使わせる。なかでも「AI 感チェック」という項目は独自で、H1 直上の uppercase + letter-spacing の eyebrow text、「◯◯が選ばれる理由」テンプレ、アイコン＋タイトル＋説明の 3 枚グリッド、といった",[125,134,135],{},"テンプレート臭の出やすいパターン","を検出させる。これはツールに依存しない知見で、Chrome DevTools MCP でそのまま使える。",[10,138,139,140,143],{},"もうひとつは",[125,141,142],{},"改修→レビュー→改修のループを自走させる配線","。コードレビュー側のスキルから layout-check を自動で呼び、dev サーバまで自動で起動する。これも MCP 側で同じワイヤリングを書けば成立する。",[10,145,146],{},"判定基準のチューニングも記事の手柄で、「タップ 44px」を装飾用セカンダリボタンには 24px に緩和する、という運用知が紹介されている。最初に決めた閾値を画面のノイズに合わせて下げる、という作業は、ツールを変えても発生する。",[24,148,150],{"id":149},"playwright-を選ぶ実利は-4-点だけある","Playwright を選ぶ実利は 4 点だけある",[10,152,153],{},"「ほとんど同じ」と言いつつ、自走ループに乗せる前提なら効いてくる差はある。",[155,156,157,164,170,176],"ul",{},[158,159,160,163],"li",{},[125,161,162],{},"決定論性",": Playwright は固定ビューポート・クリーンプロファイル・拡張機能なしで起動できる。Chrome DevTools MCP は自分の Chrome に繋いでいることが多いので、ログイン状態・拡張・他タブの影響で「同じ URL でも違うスクショ」が出る。改修ループを毎日回すなら、ここが効く。",[158,165,166,169],{},[125,167,168],{},"CI 実行可能性",": Playwright は GitHub Actions に乗る。Chrome DevTools MCP はローカル Chrome 依存なので CI 不向き。PR ごとに自動 UI 回帰チェックを走らせたいなら、Playwright 一択になる。",[158,171,172,175],{},[125,173,174],{},"コンテキスト効率",": MCP は呼び出すたびに結果が Claude のコンテキストに積まれる。Playwright は外部スクリプトで完結して、Claude に渡るのは画像パスと判定結果だけ。連続ループで回すと、トークン消費の差がそのままコストの差になる。",[158,177,178,181],{},[125,179,180],{},"接続の安定性",": Chrome 136+ のデフォルトプロファイル制約、9222 ポートの残骸居座り問題、Windows で既存 Chrome に勝手にアタッチして即終了する罠、と DevTools MCP は地味に詰まる。Playwright は自前で Chromium を立ち上げるので、このクラスの事故が起きない。",[10,183,184],{},"逆に言うと、上の 4 つが要らない場面では Chrome DevTools MCP のほうが手軽で十分だ。自分のログイン済みセッションでそのまま画面を見たい、たまに 1 ページ確認するだけ、という単発用途なら MCP の勝ちになる。",[24,186,188],{"id":187},"我々が-devtools-でデバッグしているのと何が違うか","我々が DevTools でデバッグしているのと何が違うか",[10,190,191],{},"ここが個人的にいちばん腑に落ちた点だった。普段 Chrome DevTools を開いてデバッグしているのに、なぜ記事のような「UI レビューの自動化」という話が独立して存在するのか。同じツールを使っているのに、運用モードが違うからだ。",[155,193,194,200],{},[158,195,196,199],{},[125,197,198],{},"手動デバッグ",": 仮説検証型・ホットスポット調査。「ここのレイアウトが崩れてる」と当たりがついている対象を、DevTools で掘る。",[158,201,202,205],{},[125,203,204],{},"記事の自動レビュー",": 網羅スキャン型・回帰検査。当たりがついていない未知の問題を、固定チェックリストで毎回スキャンする。",[10,207,208,209,212],{},"人間が DevTools で網羅スキャンをやらないのは、飽きるからだ。同じ画面を 7 観点で 75 分かけて見続けることはできない。Claude にやらせる前提に変わった瞬間、",[125,210,211],{},"チェックリストの固定","が本質になって、ツールは後ろに退く。記事が「7 観点 + AI 感チェック」を書き出している部分が本体で、その手足としての Playwright は交換可能、というのはそういう意味だ。",[24,214,215],{"id":215},"まとめ",[155,217,218,221,232],{},[158,219,220],{},"「Chrome DevTools MCP でも同じことができる」は正しい。代替できない部分はほぼ無い。",[158,222,223,224,227,228,231],{},"記事の優れた点は、",[125,225,226],{},"7 観点 + AI 感チェックという評価軸の言語化","と、",[125,229,230],{},"改修との自走ループ化","にある。ツール選択ではない。",[158,233,234,235,238],{},"Playwright を選ぶ実利は ",[125,236,237],{},"決定論性・CI 実行・コンテキスト効率・接続安定性"," の 4 点。ローカル単発なら DevTools MCP で十分、自走/CI に乗せたくなったら Playwright 優位、という棲み分けで足りる。",[10,240,241,242,245,246,252],{},"自分の運用に持ち込むなら、まず ",[59,243,244],{},".claude/skills/"," 配下に",[125,247,248,249,251],{},"7 観点 + AI 感チェックを ",[59,250,130],{}," として固定","して、実行系は Chrome DevTools MCP のまま回す。それで困ったら Playwright に切り替える。順序を逆にして「まず Playwright を入れる」をやると、肝心のチェックリストが固まる前にツール周りで時間を溶かす。",{"title":254,"searchDepth":255,"depth":255,"links":256},"",2,[257,258,259,260,261],{"id":26,"depth":255,"text":27},{"id":117,"depth":255,"text":117},{"id":149,"depth":255,"text":150},{"id":187,"depth":255,"text":188},{"id":215,"depth":255,"text":215},"dev","Claude Code に Playwright を組み合わせて UI レビューを自動化する記事を読んで、Chrome DevTools MCP で代替可能かを整理した。技術的にはほぼ完全に代替できる。Playwright が効くのは決定論性・CI実行・コンテキスト効率の3点で、記事の本当の価値はツール選択ではなく評価軸の言語化と自走ループ設計にある、という話。","md",{},true,null,"/ui-review-mcp-vs-playwright","claude-code-tools",false,"2026-05-28T00:00:00.000Z",{"title":5,"description":263},"2026-05/2026-05-28/ui-review-mcp-vs-playwright",[275,276,277,278,279],"Claude Code","Chrome DevTools MCP","Playwright","UIレビュー","MCP","Dr_u_D7B93FwceaOp755m9Cz2uszwD3DT2SP-Pho-Xs",[],"https://log.eurekapu.com/og/blog/ui-review-mcp-vs-playwright.png?v=2026-05-28T00%3A00%3A00.000Z&title=Claude%20Code%20%E3%81%AE%20UI%20%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%80%81Playwright%20%E3%81%98%E3%82%83%E3%81%AA%E3%81%8F%E3%81%A6%20Chrome%20DevTools%20MCP%20%E3%81%A7%E3%82%82%E5%90%8C%E3%81%98%E3%81%93%E3%81%A8%E3%81%AF%E3%81%A7%E3%81%8D%E3%82%8B&author=Kei%20Komatsu&sig=7bcbb68aeae1f812",1782528844099]