Claude Code で既存サイトを修正しているものの、
「Claude Code に一部だけ直してもらうにはどうすればいいの？」
「頼んでいない場所まで書き換えられるのを防ぐ方法が分からない」
と、指示の出し方で迷っていませんか？
範囲を絞った指示は、既存サイトを Claude Code で壊さず直すための大切な工夫です。しかし、どう伝えれば意図した範囲だけに絞り込めるのか明確な基準がないため、Claude Code を使い始めたばかりの方には少し分かりにくいかもしれません。
この記事では、Claude Code に一部だけを確実に直してもらう方法を、範囲指定・diff 形式での事前確認・「他は触らない」の明示・git 保険の4つとあわせて分かりやすく解説します。
覚えることは4つだけなので、5分もあれば読み通せます。順番に見ていきましょう。
結論：4つの型を覚えるだけ
| # | 型 | 効果 |
|---|---|---|
| ① 範囲をファイル＋行で固定 | 「style.css の 120〜140 行目だけ」 | スコープ漏れ防止 |
| ② diff 形式で出させる | 「変更は patch 形式で示して」 | レビューしやすい |
| ③ 「他は触らない」を明示 | 「他のファイル・他の関数は変更しない」 | 余計な手直しを防ぐ |
| ④ git で保険 | 作業前に git add -A && git commit -m "before" | 何かあっても戻せる |
① 範囲は「ファイル＋行」で指定する
❌ NG：「ヘッダーの色をオレンジにして」
✅ OK：「assets/css/style.css の .site-header ブロック（120〜140行目）の background-color だけオレンジ #E8915A に変えて。他のセレクタは触らない」
ポイントは2つ。
– ファイル名を具体的に書く
– 行範囲かセレクタ（.site-header のような、CSS でどの要素を指すかを表す書き方）／関数名を具体的に書く
「ヘッダー」だけだと どこかの header.html も書き換えられる可能性があります。.site-header などの識別子を渡すと、Claude Code が範囲を取り違えにくくなります。
対象の行番号は、エディタの検索機能で調べられます。VSCode なら Cmd + F で .site-header のようなセレクタ名を検索すると、該当箇所とその行番号が表示されます。ブラウザの開発者ツール（該当箇所を右クリックして「検証」を選ぶか、F12 キーで開けます）で要素を選択し、「Elements」パネルからソースへジャンプする方法でも特定できます。分からなければ、エディタの検索だけでも十分です。
② 「diff 形式で出して」と頼む
実装の前に変更案を patch 形式（diff）で出してもらうと、レビューが一瞬で終わります。
- background-color: #ffffff;
+ background-color: #E8915A;
「変更は patch 形式で示して」だけだと、Claude Code が先に編集を済ませてから diff を見せてくることがあります。「まだファイルは編集せず、まず変更案を diff だけで見せてください」のように、実装そのものを止める指示まで入れておくと確実です。
差分が小さければ「お願いします」、広すぎれば「もっと絞って」と差し戻し。書き換える前に止められるのが利点です。
上の例のように変更が数行に収まっているかが判断の目安です。触っていないはずのファイル名が並んでいたり、行数が想定より多い場合は、その場で範囲を絞り直す合図になります。
③ 「他は触らない」を明示する
短い1行でも効果があります。
このセレクタだけ変更してください。他のセレクタ・他のファイルは変更しないでください。
明示するだけで、「ついでにここも整えておこうか」という余計な気遣いを止められます。
応用：
– 「HTML 構造（ページの骨組み）は変えない」（CSSだけ直したいとき）
– 「動作は変えない」（見た目や動きを変えずにコードを整理する、リファクタリングのとき）
– 「読み込み順は変えない」（CSS / JS の順序が大事なとき）
④ 作業前に必ず git で保険をかける
git は、ファイルの変更履歴を記録しておき、必要になったらいつでも元の状態に戻せるしくみです。これは Claude Code を使う/使わない以前の話ですが、改めて。
以下は、プロジェクトがすでに git 管理下にある（git init 済みで、これまでも git commit してきた）ことが前提です。まだ git を使っていない場合は、git init してから始めるか、それも面倒なら作業前にプロジェクトフォルダごとコピーを取っておくだけでも同じように保険になります。
STEP 01. 直前にコミット
git add -A
git commit -m "before: ヘッダー色変更前"
STEP 02. 変更を依頼
①〜③を組み合わせて、Claude Code に依頼。
STEP 03. 動作確認
ブラウザで開いて意図通りか確認。
STEP 04. 想定外なら戻す
git restore . # 直前のコミットに戻す
または git diff で差分を確認してから、Claude Code に「ここの変更は不要だから戻して」と頼む選択肢も。ターミナルでは次のように表示されます。
$ git diff
diff --git a/assets/css/style.css b/assets/css/style.css
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -118,7 +118,7 @@
.site-header {
- background-color: #ffffff;
+ background-color: #E8915A;
}
変更したファイル名と行だけが表示されるので、意図した範囲に収まっているかをここでも確認できます。
読み終えたら、次の依頼文をそのまま Claude Code に貼り付けて試してみてください。①〜④の型がすべて入っています。ファイル名・セレクタ・行番号・変更内容は、自分の案件のものに置き換えてください。
すでに git で管理しているなら、作業前に「git add -A && git commit -m "before: ヘッダー色変更前"」としてコミットしておいてください。
まだファイルは編集せず、まず変更案を diff だけで見せてください。
修正対象は assets/css/style.css の .site-header ブロック（120〜140行目）だけです。background-color をオレンジ #E8915A に変更してください。他のセレクタ・他のファイルは変更しないでください。
まとめ：「一部だけ」をやってもらう型
| 型 | キーワード |
|---|---|
| ① 範囲指定 | ファイル＋行／セレクタ／関数名 |
| ② 差分先出し | 「diff で示して」 |
| ③ 他を触らせない | 「他は変更しない」 |
| ④ git 保険 | 直前コミット → 必要なら復元 |
慣れると 「ここだけ直してね」が本当にここだけになります。AI と組むときも、結局は指示を具体的に・狭くするのが一番効きました。
