Claudeに「目」を与えてフロントエンド品質を上げる
Claude Codeはコードの読み書きに長けていますが、 デフォルトの状態では画面の見た目を確認する手段がありません。 HTMLやCSSを生成しても、それが実際にどう表示されるかを知らないまま作業しています。 いわば「目隠しをした大工」のような状態です。
Claude Codeチームリードの Boris Cherny は 「Claudeに出力を検証する手段を与えることが重要だ」と繰り返し述べています。 ブラウザ連携を設定することで、Claudeはコード修正 → ブラウザで確認 → 問題を検出 → 再修正というループを自律的に回せるようになります。
この違いは劇的です。ブラウザ連携なしだと「たぶん正しいコード」を出力するだけですが、 連携ありだと「実際に画面で確認して、正しく表示されるまで修正を繰り返す」動きに変わります。 フロントエンド開発でClaude Codeを本格活用するなら、ブラウザ連携は必須の設定です。
Claude in Chromeは、Anthropic公式のChrome拡張機能です。 Claude Codeから実際のChromeブラウザを直接操作できるようになります。 セッション中に/chromeコマンドを実行するだけで有効化されます。
Claude Codeがあなたの実際のChromeブラウザに接続し、ログイン状態やCookieをそのまま利用して操作を行います。 16種類のツール（ページ遷移、クリック、テキスト入力、スクリーンショット取得、 コンソール読み取りなど）が使えます。
/chromeを実行たとえば「このログインフォームのバリデーションを修正して、動作確認して」と依頼すると、 Claudeは以下のように動きます。
このループを人間が介入しなくても自動的に回せる点が、 Claude in Chromeの最大の価値です。 ログインが必要な管理画面やダッシュボードのテストにも、 既存のセッションをそのまま使えるため手間がかかりません。
Chrome DevTools MCPは、Google公式のMCPサーバーです。 Claude in Chromeが「操作」に特化しているのに対し、 こちらは診断・分析に特化しています。
26種類のツールを通じて、ChromeのDevToolsが提供する機能にアクセスできます。 パフォーマンスプロファイリング、ネットワークリクエストの分析、 DOM構造の検査、アクセシビリティ監査など、 開発者ツールで手動で行っていた作業をClaudeに任せられます。
// .mcp.json に追加
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "@anthropic-ai/chrome-devtools-mcp"]
}
}
}Claude in Chromeは「ページを開いてクリックしてスクリーンショットを撮る」といったアクション実行型のツールです。 一方、Chrome DevTools MCPは「このページのネットワークリクエストを分析して」 「JavaScriptのパフォーマンスボトルネックを特定して」といった技術的な診断に向いています。
日常のフロントエンド開発ではClaude in Chromeを使い、 パフォーマンス問題やネットワーク関連のデバッグが必要なときに DevTools MCPを併用するのが効果的です。
Playwright MCPは、Microsoftが開発するPlaywrightを MCPサーバーとして利用する方法です。 Chrome、Firefox、Safariのクロスブラウザ対応が最大の特徴です。
スクリーンショットの代わりにアクセシビリティツリーを使って ページ構造を解析します。画像認識に頼らないため、 構造化されたインタラクション（フォーム操作、リスト要素の選択など）が安定して動作します。
// .mcp.json に追加
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp"]
}
}
}ブラウザ連携の3つの選択肢は、それぞれ得意な場面が異なります。 以下の基準で使い分けると迷いません。
迷ったらまずClaude in Chromeから始めるのがおすすめです。 セットアップが最もシンプルで、フロントエンド開発の大半のケースをカバーできます。 パフォーマンス診断やクロスブラウザ対応が必要になった段階で、 DevTools MCPやPlaywright MCPを追加すれば十分です。
ブラウザ連携を活用する代表的なパターンを3つ紹介します。
最も基本的なパターンです。Claude in Chromeを有効にした状態で、 コードの修正と画面確認を自動的に繰り返します。
# プロンプト例
「ヘッダーのナビゲーションがモバイルで崩れているので修正して。
Chromeで実際に確認しながら、正しく表示されるまで直してください。」
# Claudeの動き
1. ソースコードを確認・修正
2. Chromeでページを開く
3. スクリーンショットを取得して表示を確認
4. 問題があればコードを修正 → 再度確認
5. 正しく表示されるまでループを繰り返すこのパターンの利点は、人間が目視確認する手間を省きつつ、 Claudeが「見た目の正しさ」を判断基準に含めて作業できることです。
複数の画面サイズでスクリーンショットを取得し、 レスポンシブデザインの崩れを一括チェックします。
# プロンプト例
「このページをモバイル（375px）、タブレット（768px）、
デスクトップ（1280px）の3サイズで確認して、
崩れている箇所があれば修正してください。」
# Claudeの動き
1. ビューポートを375pxに設定 → スクリーンショット取得
2. ビューポートを768pxに設定 → スクリーンショット取得
3. ビューポートを1280pxに設定 → スクリーンショット取得
4. 各サイズの表示を比較し、崩れを検出
5. CSSを修正して再確認フォームの入力値バリデーションを自動的にテストします。 正常系と異常系の両方を網羅的に確認できます。
# プロンプト例
「お問い合わせフォームのバリデーションをテストして。
空欄送信、不正なメールアドレス、電話番号の形式チェックなど、
主要なパターンを確認してください。」
# Claudeの動き
1. フォームページを開く
2. 空欄のまま送信ボタンをクリック → エラー表示を確認
3. 不正なメールアドレスを入力 → バリデーション動作を確認
4. 正しい値を入力 → 送信成功を確認
5. 問題があればコードを修正して再テストBoris Cherny（Claude Codeチームリード）は 「Chrome拡張はフロントエンド開発にとって決定的に重要だ。 Claudeは結果が素晴らしいものになるまで反復し続ける」と述べています。 ブラウザ連携は単なる便利機能ではなく、Claude Codeのフロントエンド開発能力を根本的に変える機能です。
ブラウザ連携を設定することで、Claude Codeは「コードを書くだけ」から 「書いたコードの結果を目で見て確認し、修正する」存在に進化します。 Claude in Chromeで日常の開発ループを回し、 必要に応じてDevTools MCPやPlaywright MCPを追加することで、 フロントエンド開発の品質と速度を大幅に向上させることができます。