ClaudとGoogle Chromeを連携して「原因がわからない」「修正できない」を無くそう
「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。
14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。
（先着限定、5月10日まで）
» 「司令塔」側に回る14日間プランを見る
Claude Codeにしろ、Codexにしろ、AIのコーディングアシスタントは便利です。
問題を挙げるとしたら、上手くいかなかった・イメージと違った部分の修正に手間取ることが挙げられるのではないでしょうか。
AIが問題を特定した・修正した、と言ってきても問題が解消されておらず、伝え方（プロンプト）が悪いのかと悩んだ人もいらっしゃるのではないでしょうか？何回か試行錯誤しても上手くいかず嫌になってきた…そんなWebデザイナー/コーダーさんに朗報です。
ブラウザとAIを連動させることで、「問題の原因がわからない」 「何回やっても修正できない」状態の解消がぐっと近づきます。
ClaudeとChromeを連携させるメリット
Web制作の学習が難しい、嫌になる原因
コーディングなどWeb制作の学習を進めていると、上手くいかないことが出てきます。
CSSを書いたのに、なぜかデザインが反映されない…
JSは動いているっぽいのに、考えていた動作にならない
ページを更新したら真っ白になってしまった…
エラーらしき文字が出ているけど、何を言っているのかわからない…
何が原因なのか、どこを直せばいいのか、手がかりすらつかめない。
そんな「詰まった」状態、経験したことはありませんか？
AIにコーディングをサポートしてもらった場合も、この状態は起こりえます。
「AIが書いてくれたコードが上手く動かなかった」時に、次のプロンプトをどう書けば良いかわからない。状況を説明したらAIがコードの修正をしてくれたけれど、結局改善しなかった…。
実際にAIコーディングを試してみて、そんな経験をした方もいらっしゃるはずです。
この状況を改善するためにおすすめなのが、AIとブブラウザの連携です。
ClaudeなどのAIに直接ブラウザを見せることが出来れば、「ヘッダーがずれている」や「ボタンをタップしても開かない」など、直感的な言葉でも問題が解決しやすくなります。
ブラウザで見て上手くいっていないと思った部分を、そのまま診てもらう感覚で使えることが、Chromeと連携する最大のメリットです。
ClaudeとChrome連携の準備
作業を始める前に、3つのツールが揃っているか確認しましょう。
すでにインストール済みのものはスキップしてOKです。
1. Claudeの有料プランアカウント
Google Chromeで Cloude を使用するには、Pro以上のAnthropic プラン（Claudeの有料プラン）契約が必要です。
2. Chrome拡張機能の「Claude」
今回の主役、Chromeの拡張機能であるClaude（Claude in Chrome）をインストールしましょう。
Google ChromeでChromeウェブストアを開ます。
Claudeで検索してAnthropic製のもの開き、Chromeに追加ボタンからインストールしてください。
画像元：https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn
インストール出来ているかは、拡張機能メニューから確認できます。
Chromeのアドレスバー横あたりにあるパズルのピースアイコンです。
Claudeの横のピンアイコンを押しすと、ピン留め（常時表示）もできます。
3. Live Server（VSCode拡張機能）
HTMLファイルをブラウザで確認するとき、ファイルをそのまま開くとfile://というURLになります。
この状態ではChrome連携がうまく動かないことがあるため、ローカルサーバーを立ち上げてから確認する方法を使います。
それを簡単にしてくれるのが「Live Server」という拡張機能です。
VSCodeの拡張機能パネルで「Live Server」と検索し、Ritwick Deyさんが作ったものをインストールしてください。
実践編：Cloude Codeとデバッグする
デモで使用している素材について
実践編の操作デモでは [はじめてのWebデザイン] シリーズで作り方をご紹介した、架空の企業サイトの改善をテーマに進めていきます。
行っている作業の想定
WordPressサイト（自作テーマ）で、2ヶ所の更新しようとしているところです。
- スマホ向けのグローバルナビゲーションを実装する
- 会社概要のページをリニューアルする
そして、素材フォルダは以下の更新作業を行っている途中です。
会社概要ページをリニューアルするためにcompany.html, style.cssを修正
company.html, style.cssを使ってグローバルナビゲーションの修正も試している
company.htmlで更新後の姿を完成させ、WordPressサイトに実装する。
実務の更新作業でもよくある、この流れをClaude Codeを活用しながらやってみましょう！
【注意】
素材では確認しやすいようstyle.cssに更新箇所のスタイル指定を書いています。
実際にWordPressサイトを更新する際は、他ページにも影響するcssファイルの直編集は避けてください。
なお、今回のデモ操作ではHTML段階での修正のみを行います。
次回のClaude Code（VSCode版）を使用した記事では、ローカル環境のWordPressも使用します。
一緒に試してみたいけれどローカル環境のWordpressがよくわからない…という方は、WordPress制作入門①開発環境の準備 をご確認ください。
Skillhubブログ
Skillhubブログ
プロジェクトの用意と問題個所の確認
プロジェクトの用意（任意）
解凍したフォルダ（wpedbase_2）をVSCodeで開いてください。
次回の記事では、Wordpressテーマに反映させるところまで行います。
一緒に作業を試してみる場合は、あらかじめローカル環境にあるWordPressのthemesディレクトリ内に入れておくとスムーズです。
HTMLページで起きている問題を確認する
素材の中にある、更新作業中の、会社概要ページ（company.html）はこのようになっています。
[はじめてのWebデザイン] シリーズから、少しグレードアップさせました。
更新する部分はほぼ完成していますが、問題が一つあります。
スマホ表示でハンバーガーメニューをタップしても、メニューが開かないのです。
実は、この原因はそこまで難しいことではありません。
でも、こうしたトラブルでも原因探しに、案外時間がかかったりすることもありますよね。
余裕のある方は、まず自分で原因探しをしてみる。
それからClaudeに探させてみる。
と両方試して、かかる時間やトークン消費を検討してみても良いかもしれません。
HTMLページの「動かないハンバーガーメニュー」を修正する
1. Live Serverでページを表示する
まず、Live Serverでcompany.htmlを表示させましょう。
VSCodeの右下にあるGo Live、もしくはファイルを右クリックして Open width Live Server を選択してください。
右クリックメニューからはショートカットキーも確認できます。
Chromeでページが開きます。
アドレスバーの表示が localhost:5500 や 127.0.0.1:5500 などのようになっていたら成功です。
問題が再現出来るか、スマホ幅にしてハンバーガーが動かないことを確認してください。
2. Claude Codeを起動する
Google Chrome で Claude のパネルを開きます。
拡張機能（パズルピースのアイコン）から選ぶか、ピン止めした場合はClaudeアイコンをクリック。
接続の承認が出る場合は、承認しましょう。
下部に表示されているアカウントが、Claude有料プラン契約をしたものと同じかだけ注意してください。
注意事項や使い方ガイドが表示される場合は、内容を確認して進めていきます。
チャット画面が開いたら、準備完了です。
3. Claude Codeに相談する
Chrome側のチャット画面で、問題点についての調査を依頼してみます。
スマホ幅の時に表示されるハンバーガーメニューのボタン（button.hamburger）をタップしても開きません。
何が原因か調べてもらえますか？
「ブラウザで開いているサイトで、こういった調査をしても良いか」という確認が出ます。
承認するとClaudeが調査が始まります。
上アニメーションのように、テストを実行して検証が行われます。
デモサイトのくらいの、至ってシンプルなJSやCSSでも結構時間がかかりました。
完了まで待ちましょう・・・。
調査完了、原因が判明すると報告してくれます。
ステップ数の表示をクリックすると問題解決までの過程も確認できます。
どういった調査を行ったのか、どこを見たのか、こうしたことは自分がデバックするときの参考にもなります。
今回のようにちょっとしたミスなら、正直なところ自分で探して直したほうが早いケースもあります。
まず、どの辺を確認したら良いのか…というヒントがたくさんあるので、Web制作学習中の方は、ぜひ確認してみてください。
4.コードを修正し、確認する
今回の場合は、header 要素に対して position: relative; の指定が抜けていることが原因でした。
style.cssを開いて、Claudeが教えてくれた通りに修正してみます。
一行追加して、上書き保存。
ばっちり直りました！
まとめ
自分一人で学習しながらコーディングしていたり、お仕事を受けていたり。
そんな時に一番困るのが「問題があるのは分かるけど、原因がわからない」という状態です。
スキルハブでお受けしている質問も、ほぼこれです。
そんな時に、AIがブラウザを通してアドバイスや修正をしてくれるのは心強いですよね。 チャット画面で「ここかこうで、こうしたときに〇〇は動くけれど、△△が反応しなくて～」のように説明するテキストを考えて、入力する手間も減少。更に、情報不足によるAIの迷走も防げるので、デバック作業のスピードは格段に上がります。
ただ、Chrome側のチャットボックスと、VScode側のチャットボックスは連動していません。
これが連動してくれたら、もっと便利ですよね。
本記事作成時点（2026/05）では、Chrome拡張機能のClaudeはベータ版。
VS Code版Claude Codeとの連携については、
/chrome コマンドで使える
@browserで使える
などの説もあるものの、試した限りどちらもまだ使用できませんでした。
正式対応されると、より簡単にブラウザの表示を見ながらリアルタイムでデバッグできるようになると考えられます。楽しみに待ちましょう！
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月10日まで