Cursorで既存のWebページを修正するときは、「対象ファイル・変更する要素・変えてはいけない範囲」を1か所に絞って依頼し、生成された差分（Diff）とブラウザ動作を確かめてから採用します。まずは手元のプロジェクトをフォルダ単位で開き、お問い合わせフォーム1欄（#message）への入力チェック追加と3パターンの動作テストまでを一通り完了させましょう。
- 最初に試す手順と到達点：①作業フォルダをCursorで開き修正前の表示を確認する → ②
@before.htmlと変更禁止範囲を指定して1か所だけ依頼する → ③差分（Diff）で指定外の書き換えがないか点検する → ④正常・空白のみ・201文字以上の3ケースで動作を確認する
※本記事はCursor公式ドキュメント（Cursor Documentation、Reviewing and Testing Code）にもとづく手順と、編集側で作成した練習用フォーム教材（before.html / after.html / check-cases.csv）を組み合わせたガイドです。執筆時点（2026年10月29日）でCursor実機での生成・画面操作は未検証であり、配布教材はCursorの生成物ではありません。
Cursorで作業する準備
AIへ修正を指示する前に、修正前のページが手元でどう動き、どのファイルを変更対象にするかを確認できる状態を作ります。
インストールとサンプルプロジェクトの準備
Cursorは公式サイトからOS別のインストーラーで導入できます。左側にファイル一覧、中央にエディタ、右側に対話パネル（Agent / Chat）が並ぶ構成です。練習用のコードがない場合は、以下の教材3点を同じフォルダ（例：cursor-form-practice）に保存してください。
初心者が既存のプロジェクトをCursorで開いて作業を始める手順は以下の4ステップです。
- 作業用フォルダを用意する
任意のフォルダ（例：cursor-form-practice）を作成し、before.htmlを保存します。 - フォルダ単位でCursorに読み込む
「File」→「Open Folder...」（または初期画面のフォルダを開くボタン）から作成したフォルダを選択します。単一ファイルではなくルートフォルダ単位で開くと、関連ファイルの参照やGitの差分確認をまとめて行えます。 - 修正前の表示と挙動を確認する
before.htmlは外部ライブラリ不要の単一HTMLファイルです。ブラウザで直接開くかローカルサーバー（例：python3 -m http.server 8000 --bind 127.0.0.1）で表示し、説明文がなくスペースだけでも送信できてしまう修正前の挙動を確認します。 - 変更前のGit状態を確認する
Git管理下のプロジェクトでは、依頼前にgit status --shortを実行して未コミットの変更がないことを確かめます。
利用枠とモデル選択の現行表示を確認する
Cursorの利用枠や選択できるAIモデル、Agent機能の上限は契約プランや時期によって変わります。作業前にCursorの設定画面（Settings）や公式アカウントダッシュボードで現在の表示を確認してください。1回の依頼を1つの小さな変更に絞ると、意図しないコード破壊とやり直しによる枠の消費を同時に抑えられます。
コードと依頼の範囲を渡す
CursorのAgentやチャットで特定のファイルだけ修正を依頼するときは、「対象ファイル」と「変更禁止の範囲」をセットで指定します。
対象ファイルとエラー・現象の指定
チャット欄で @before.html のように @ を使うと、特定のファイルやコード範囲をコンテキストとして渡せます。ただし、@ で特定ファイルを指定しても、システム上で他ファイルの変更が自動的にロックされるわけではありません。AgentモードではAIが周辺ファイルや指定外の箇所まで書き換えることがあるため、プロンプトで変更禁止範囲を明記し、生成後に変更ファイル一覧と差分を人間が点検します。
| 依頼の書き方 | 入力例 | 起きやすい問題・特徴 |
|---|---|---|
| 曖昧な依頼（非推奨） | @before.html のフォームを使いやすく直して、入力チェックも追加して |
ページ全体の配色や余白、見出し文言、変更対象外の入力欄まで一度に書き換えられ、どこが正しい変更か判別しにくくなる |
| 範囲を絞った依頼（推奨） | @before.html の #message 欄にのみ10〜200文字の説明文とエラー表示を追加し、ヘッダーや #company 欄は変更しない |
変更箇所が該当フィールドとスクリプト周辺に限定され、差分確認とテストが短時間で終わる |
全体改修を避ける依頼例
既存ページのデザインや他機能を保ったまま修正させるには、次の4項目をプロンプトに含めます。
- 対象ファイルと要素のID・クラス名（例：
before.html内の#messageと#contact-form） - 追加・修正する仕様（文字数条件、エラー文言、表示位置）
- 変更禁止の範囲（既存のCSS変数、ヘッダー・フッター、
#company欄、外部ライブラリの追加禁止） - 完了後のテスト条件（正常入力、空白のみ、文字数超過の3ケース）
小さなUI変更を依頼する
練習用教材の before.html に対し、「ご相談内容（#message）欄へ10〜200文字の説明文、リアルタイム文字数表示、3パターンの入力チェックを追加する」変更を依頼します。
入力欄の説明文とエラー表示を追加するコピー用プロンプト
以下のプロンプトをコピーし、ファイル名を自分の環境に合わせて入力してください。
@before.html の「ご相談内容（#message）」欄に、入力条件の説明文とエラー表示を追加してください。
【変更する内容】
1. 説明文と文字数表示の追加
- `#message` のラベル直下に説明文（`#message-help`）を追加し、「対象ページのURLや困っている現象を、10文字以上200文字以内でご記入ください（現在: 0 / 200文字）。」と表示すること
- 入力中（inputイベント）に、前後の空白を除いた文字数（`trim()` 後）をリアルタイムで更新すること
2. 送信時の入力チェックとエラー表示
- `#message` の直下にエラー表示用の要素（`#message-error`、`role="alert"`、初期状態は `hidden`）を追加すること
- 送信時（submitイベント）に `trim()` 後の文字数を判定し、以下の条件で送信を中断してエラーを表示し、`#message` に `aria-invalid="true"` を設定してフォーカスを当てること
- 0文字（空欄または空白・改行のみ）：「ご相談内容を入力してください（空白のみの入力はできません）。」
- 1〜9文字：「ご相談内容は10文字以上で入力してください（現在: 〇文字）。」
- 201文字以上：「ご相談内容は200文字以内で入力してください（現在: 〇文字）。」
- 10文字以上200文字以内の場合は、エラー表示を隠して `aria-invalid="false"` に戻し、`#form-status` に「送信内容を受け付けました（デモ表示・外部送信なし）。」と表示すること
【変更してはいけない範囲】
- `:root` のCSS変数の値、ページ全体のレイアウト幅、ヘッダー（`h1`・`.notice`）、フッター、「ご担当者名（`#company`）」の入力欄は書き換えないこと
- 外部ライブラリや外部通信は一切追加しないこと
生成後に指示から外れた箇所を確認する
変更案が提示されたら、承認（Accept）する前に差分表示で指定外の箇所が書き換わっていないかを確認します。以下は編集側教材の before.html と after.html における該当箇所の差分例です。
<div class="field">
- <label for="message">ご相談内容</label>
- <textarea id="message" name="message" placeholder="ご相談内容を入力してください"></textarea>
+ <label for="message">ご相談内容（必須）</label>
+ <p id="message-help" class="field-help">
+ 対象ページのURLや困っている現象を、10文字以上200文字以内でご記入ください（現在: <span id="char-count">0</span> / 200文字）。
+ </p>
+ <textarea
+ id="message"
+ name="message"
+ placeholder="例：お問い合わせページの送信ボタンがスマートフォン表示で画面外にはみ出しています。"
+ aria-describedby="message-help message-error"
+ aria-invalid="false"
+ ></textarea>
+ <p id="message-error" class="field-error" role="alert" hidden></p>
</div>
#company 欄の削除や全体の配色・フォント変更が混ざっていた場合は一括採用せず、不要な変更ブロックを却下（Reject）するか再指示を出します。
差分と動作を確かめる
公式ガイド Reviewing and Testing Code に沿って、変更差分の点検とブラウザでの動作テストを順番に行います。
変更ファイル・追加依存・削除の点検と取り消し方
AIの変更を採用・取り消す際は、エディタ上の差分とGitの状態を両方確認します。
- Cursor上の変更確認と取り消し
差分表示では追加行（緑色）と削除行（赤色）をファイル・ブロック単位で確認し、採用または却下を選べます。Checkpointや復元操作が表示される環境では、戻される範囲を画面で確かめてから使います（本稿では各版の復元ボタン表示は実機未確認です）。なお、Checkpointはチャット内の一時的なスナップショットであり、Git履歴の代わりにはなりません。区切りごとにGitでコミットを残してください。 - Gitで差分を確認・復元するときの注意点
AIの変更を取り消す際、いきなりgit restore .を実行すると、依頼前に自分で手直ししていた未コミット変更まで消えてしまいます。復元前に必ず以下のコマンドで変更ファイル一覧と差分を確認し、自分の作業分とAIの変更を分けてください。
git status --short
git diff
ブラウザで正常系と失敗系の3ケースを試す
差分に問題がなければ、修正後のHTML（完成イメージは after.html）をブラウザで開き、3ケース動作確認表（check-cases.csv） の3入力で挙動を確かめます。
| ケースID | 区分 | 試す入力内容（#message） |
修正前（before.html）の挙動 |
修正後（after.html）の期待される結果 |
|---|---|---|---|---|
| Case-1 | 正常系（10〜200文字） | お問い合わせページの送信ボタンがスマホ表示で画面外にはみ出しています。（35文字） |
説明文がないまま送信完了メッセージが表示される | エラーは表示されず、文字数が 35 / 200文字 となり、送信完了メッセージが表示される |
| Case-2 | 失敗系1（空欄・空白のみ） | 半角・全角スペースや改行のみを入力して送信 | 空白文字だけでも通過し、送信完了メッセージが表示されてしまう | 送信が中断され、「ご相談内容を入力してください（空白のみの入力はできません）。」と赤字で表示される |
| Case-3 | 失敗系2（201文字以上） | 「あ」を210文字連続で入力して送信 | 文字数上限の判定がなく、そのまま通過してしまう | 送信が中断され、「ご相談内容は200文字以内で入力してください（現在: 210文字）。」と赤字で表示される |
次の修正へつなぐ
テストケースの一部が期待どおりに動かない場合は、失敗した条件に絞って追加修正を依頼します。
具体的な現象で再依頼するプロンプト
「試した操作」「期待する結果」「実際の結果」「修正範囲」の4点を揃えて伝えると、修正対象を絞って伝えられます。
@before.html の修正内容を確認したところ、Case-2（空白のみの入力）で問題がありました。以下の点だけ修正してください。
【試した操作】
`#message` に半角スペースを5文字だけ入力して「内容を確認して送信」ボタンを押した。
【期待する結果】
前後の空白を除いた文字数が0文字として判定され、「ご相談内容を入力してください（空白のみの入力はできません）。」というエラーが表示される。
【実際の結果】
エラーが表示されず、そのまま通過してしまった（または5文字としてカウントされてしまった）。
【修正範囲の条件】
文字数カウントと送信時判定のJavaScript部分のみを修正し、HTML構造やCSSは変更しないでください。
繰り返す指示をRulesへ整理する
「外部ライブラリを追加しない」「既存のCSS変数を維持する」など毎回同じ前提条件を入力する場合は、CursorのRules機能（.cursor/rules など、Rules公式ドキュメント 参照）に書き出しておくと毎回の入力を省けます。他ツールでのルール整理や小さな修正の進め方は以下も参照してください。
今回の到達点
次の3点が揃っていれば、既存ページの小さな修正と確認は完了です。
git status --shortとgit diff（またはエディタの差分表示）で、#company欄や既存のCSS変数など指定外の箇所が書き換わっていないことを確認した- ブラウザで Case-1（35文字）・Case-2（空白のみ）・Case-3（210文字）を入力し、エラー表示と送信完了メッセージが期待どおりに切り替わることを確認した
- 問題が起きたときに戻せるよう、確認済みの状態をGitでコミットした
よくある質問（FAQ）
日本語で指示できる？
チャットやAgentには日本語でそのまま指示できます。「エラー文言や変更理由を日本語で出力してください」と添えるとコード内テキストや返答も日本語で揃えやすくなります。エディタのメニュー表示を日本語化したい場合は、拡張機能から日本語言語パック（Japanese Language Pack）を導入します。
変更したファイルを確認するには？
チャット欄やエディタ上の差分（Diff）ビューで、追加行（緑）と削除行（赤）をファイルごとに確認できます。あわせてターミナルで git status --short（変更ファイル一覧）と git diff（行単位の差分）を実行すると、指定外のファイル変更を確認しやすくなります。
Agentの使いすぎをどう把握する？
Cursorの設定画面（Settings）や公式Webサイトのアカウントページで現在の利用状況を確認できます。上限や対象モデルの扱いは改定されることがあるため最新表示を確認しつつ、「1回の依頼で1つの変更に絞る」「対象ファイルを @ で明示する」ことで無駄な消費を抑えられます。
出典・参考資料
本文執筆：agy ／ 確認・編集：制作担当