Claude Code × F12開発者ツール｜"ここを変えて"をピンポイントで伝える方法【Claude Code活用ガイド④】

前回の記事で、VS Codeの「Live Preview」を使って見た目を確認しながらClaude Codeに指示を出す方法を紹介しました。

実際にやってみると、こんな場面に出くわすはずです。

「この部分を変えたいんだけど、なんて伝えればいいか分からない……」

たとえば、請求書の合計金額のフォントサイズを大きくしたい。でも「下の方にある数字を大きくして」では、Claude Codeはどの数字のことか分かりません。

そこで使えるのが、ブラウザの 開発者ツール（F12キー） です。

これを使うと、Webページ上の「この部分」を指で差すように特定できます。特定した情報をそのままClaude Codeに伝えれば、修正の精度とスピードが一気に上がります。

開発者ツールって何？

開発者ツールは、すべてのブラウザに最初から入っている機能です。追加のインストールは不要で、F12キーを押すだけで開きます。

もともとはWebサイトを作る人向けの機能ですが、Claude Codeと組み合わせると「変えたい場所を正確に伝える道具」として使えます。

難しそうに見えるかもしれませんが、この記事で使うのはたった1つの機能だけです。

使うのは「要素の選択」機能だけ

開発者ツールにはたくさんの機能がありますが、覚えるのは1つだけです。

「要素の選択」――画面上の好きな場所をクリックすると、それが何なのかを教えてくれる機能です。

虫眼鏡で拡大して調べるようなイメージです。「この文字はどういう名前の部品なのか」「今のフォントサイズはいくつか」「今の色は何色か」が一目で分かります。

STEP 1：ブラウザでページを開く

まず、Claude Codeが作ったHTMLファイルをブラウザで開きます。

やり方

VS Codeで対象のHTMLファイルを開いた状態で：

• ファイルを右クリック →「Open with Live Server」を選択
• または、Live Previewのプレビュー画面上部に表示されているURL（http://127.0.0.1:3000/... のような文字列）をコピーして、ブラウザのアドレスバーに貼り付ける

どちらの方法でも、ブラウザにWebページが表示されます。

💡 Live PreviewのVS Code内プレビューでも開発者ツールは使えますが、ブラウザで開いた方が画面が広く操作しやすいのでおすすめです。

STEP 2：F12で開発者ツールを開く

ブラウザでページが表示されている状態で、キーボードのF12キーを押します。

• Macの場合：Cmd + Option + I でも開けます
• Windows / Linuxの場合：F12 または Ctrl + Shift + I

画面の右側か下側に、パネルがズラッと表示されます。最初は情報量が多くて驚くかもしれませんが、気にしなくて大丈夫です。使うのは1つだけです。

STEP 3：「要素の選択」モードに入る

開発者ツールの左上にある、四角の中にカーソルがあるアイコンをクリックします。

これが「要素の選択」ボタンです。

または、キーボードショートカットでも切り替えられます：

• Mac：Cmd + Shift + C
• Windows / Linux：Ctrl + Shift + C

このモードに入ると、マウスをWebページの上で動かすだけで、カーソルの下にある要素が色付きの枠で強調表示されます。

STEP 4：変えたい場所をクリックする

「要素の選択」モードの状態で、変えたい場所にマウスを合わせてクリックします。

たとえば、請求書の合計金額の数字をクリックしたとします。

すると、開発者ツールのパネルに、その要素の情報が表示されます。

ここで見るべきポイントは3つです。

見るポイント①：要素の名前（タグとクラス名）

パネルに表示されている強調された行を見ると、こんな表示があります：

<p class="total-amount">¥150,000</p>

この class="total-amount" や <p> という部分が、その要素の「名前」です。

見るポイント②：今のスタイル（右側のパネル）

開発者ツールの右側（または下側）に「Styles」というタブがあります。ここには、今その要素に適用されている見た目の情報が並んでいます。

font-size: 16px;
color: #333333;
font-weight: normal;

「今のフォントサイズは16px」「今の色は#333333」といったことが分かります。

見るポイント③：余白やサイズ（ボックスモデル）

「Styles」のさらに下にある「Computed」タブを開くと、その要素の幅・高さ・余白が数字で表示されます。「もう少し上の余白を広げたい」といったときに便利です。

STEP 5：特定した情報をClaude Codeに伝える

ここが一番大事なステップです。開発者ツールで見つけた情報を使って、Claude Codeに伝えます。

悪い伝え方（あいまい）

下の方の数字を大きくして

→ Claude Codeにはどの数字か分かりません。

良い伝え方（ピンポイント）

class="total-amount" の要素のフォントサイズを24pxに変えて

→ Claude Codeは迷わず正確な場所を修正できます。

さらに伝え方の例

色を変えたいとき：

class="header-title" の文字色を #1a56db に変えて

余白を調整したいとき：

class="invoice-table" の上の余白を 40px に広げて

特定のセクション全体を変えたいとき：

class="company-info" のセクション全体のフォントを太字にして

要素の名前（クラス名）を添えるだけで、修正の精度が格段に上がります。

もっと簡単な方法：右クリックでコピーする

開発者ツールで要素を選択した後、その要素の行を右クリックすると、メニューが表示されます。

「Copy」→「Copy selector」を選ぶと、その要素を特定する文字列がコピーされます。

たとえば：

#invoice > div.summary > p.total-amount

これをそのままClaude Codeに貼り付けて：

#invoice > div.summary > p.total-amount のフォントサイズを24pxに変えて

と伝えればOKです。自分で名前を読み取る必要すらありません。

実践の流れ（まとめ）

ここまでの内容を1つの流れにすると、こうなります。

① Live Previewで見た目を確認しながらClaude Codeに指示
② 「ここ変えたいけど、うまく伝えられない」と思ったら……
③ ブラウザでF12を押して開発者ツールを開く
④ 「要素の選択」モードで変えたい場所をクリック
⑤ クラス名やスタイル情報をClaude Codeに伝える
⑥ Claude Codeが正確に修正 → Live Previewで即確認

Live Preview（③の記事）とF12開発者ツール（この記事）は、セットで使うことで真価を発揮します。

• Live Preview → 全体の見た目を確認する「鳥の目」
• F12開発者ツール → 変えたい場所を特定する「虫の目」

この2つがあれば、Claude Codeへの指示で困ることはほぼなくなります。

まとめ

Claude Codeに「ここを変えて」を正確に伝える方法は、意外とシンプルです。

• ブラウザでF12キーを押して開発者ツールを開く
• 「要素の選択」モードで変えたい場所をクリックする
• 表示されたクラス名やスタイル情報をClaude Codeに伝える
• 右クリックの**「Copy selector」**を使えば、さらに簡単

「なんて伝えればいいか分からない」がなくなるだけで、Claude Codeとの共同作業は驚くほどスムーズになります。

前回のLive Previewと合わせて、ぜひ試してみてください。