画面の不具合をAIに直してもらう依頼文:再現手順・スクリーンショット・対象コンポーネントの渡し方

そのまま使える依頼テンプレート

( ) の部分を書き換えて、チャットにそのまま貼り付けてください。

## 不具合の修正依頼
### 症状
- 期待する動作:(例:○○を押すと△△が表示される)
- 実際の動作:(例:何も起きない/表示が崩れる)
- 発生頻度:毎回 / たまに(分かる範囲の条件:)

### 再現手順
1. (開始する画面のURLまたはルート)
2. (操作)
3. (操作)

### 環境・条件
- ブラウザと画面幅:
- ログイン状態、データの条件:
- 最近変えたこと(分かれば):

### 証拠
- スクリーンショット1:現状 / 2:期待する見た目
- コンソールのエラー全文:

### 対象と範囲
- 疑っているファイル/コンポーネント:(確定 or 推測)
- 変更してよい範囲:
- 変更しないこと:

### 進め方と完了条件
- 修正前に、原因の仮説と直す箇所を短く報告してください
- 完了条件:(例:上記手順で期待どおりに動く/既存テストが通る)

重要な要件を先に書くと伝わりやすい、というのはGitHubのCopilot向けプロンプトの解説にもある考え方です。テンプレートが「症状」から始まるのはそのためです。同ページは、大きな作業を小さく分けること、具体的なファイル名や使用ライブラリを示すことも勧めています。不具合が複数あるなら、1依頼1件にしてください。

記入例(説明用の例)

次は架空の画面を想定した例です。実際のプロジェクトで動作確認したものではありません。

## 不具合の修正依頼
### 症状
- 期待する動作:カートで数量の「+」を押すと、数量と小計が増える
- 実際の動作:数量は増えるが、小計が更新されない。画面を再読み込みすると正しい値になる
- 発生頻度:毎回

### 再現手順
1. /cart を開く(商品A ×1 が入った状態)
2. 商品Aの「+」を1回押す
3. 数量は2になるが、小計が元の値のまま

### 環境・条件
- Chrome、幅1280px
- ログイン済み。他のユーザーでは未確認

### 証拠
- スクリーンショット1:手順3の状態(小計の欄に赤枠)
- コンソールのエラー:なし

### 対象と範囲
- 疑っているファイル:src/components/CartItem.tsx(推測)
- 変更してよい範囲:カート画面のコンポーネントのみ
- 変更しないこと:API、スタイル、依存パッケージ

### 進め方と完了条件
- 修正前に原因の仮説を報告してください
- 完了条件:上記手順で小計が即時に更新される

「推測」と書いてあるのがポイントです。ファイルが間違っていても、AIは別の箇所を探せます。確定と推測を区別して書くと、AIが間違った前提に引きずられにくくなります。

スクリーンショットの渡し方と限界

渡し方はツールごとに違います。Claude Codeの公式ワークフロー集には、ウィンドウへのドラッグ&ドロップ、Ctrl+V での貼り付け、画像パスの指定の3つが載っています。Cursorのエージェントについては、公式ドキュメントに、png・jpg・gif・webp・svgの画像ファイルを、画像を扱えるモデル向けに会話の文脈へ含められるとの記述があります。操作の詳細はお使いのツールの最新ドキュメントで確認してください。

画像を渡すときは、次の点を意識します。

• 現状と期待を分けて渡す。 「1枚目が現状、2枚目が期待」と依頼文に書きます。
• 注目箇所に枠を付ける。 画面全体を撮ると、AIはどこが問題か分かりません。
• 画像にない情報は文字にする。 ホバー時の状態、アニメーション、画面幅、エラー文は写りません。コンソールのエラーは全文をテキストで貼ります。
• 個人情報を隠す。 氏名やメールアドレス、顧客データが写り込んだ画像は、ダミーデータの画面で撮り直してください。

対象コンポーネントが分からないとき

ファイル名が分からなくても依頼はできます。状況に応じて、次の表から選んでください。

• ファイルが分かる、渡すもの：パスを指定する、依頼文の例：@src/components/CartItem.tsx を中心に調べてください
• 画面は分かるがファイルは不明、渡すもの：URLと画面上の文言、依頼文の例：「小計」という文言を表示している部品を探してください
• 原因がデータか表示か不明、渡すもの：画面とAPI応答の両方、依頼文の例：応答の値が正しいか、まず確認してください
• 最近壊れた、渡すもの：変更履歴の手がかり、依頼文の例：先週のカート関連の変更を確認してください

Claude Codeでは @ でファイルやディレクトリを指定できます。ディレクトリを指定した場合は、内容ではなくファイル一覧が渡されます。ほかのツールでも、開いているファイルや選択範囲を文脈にできることがあります。ただし、指定方法や挙動はツールとバージョンで異なります。

依頼後に人が確認すること

AIに任せるのは、原因の調査と修正案の作成までです。次の確認は人が行います。

1. 再現手順をもう一度たどる。 依頼文の手順で、期待どおりに動くかを自分の画面で確かめます。
2. 差分の範囲を見る。 「変更しないこと」に書いた領域が変わっていないかを確認します。
3. 周辺の画面を触る。 同じコンポーネントを使う別の画面で、表示が崩れていないかを見ます。
4. 幅とブラウザを変える。 修正した幅だけで直っている場合があります。
5. テストを走らせる。 Claude Codeのワークフロー集は、不具合の依頼で再現コマンドや手順、エラーが毎回出るか断続的かを伝えるよう勧めています。完了条件に実行コマンドを書いておくと、AIも自分で確認できます。

一度で直らなかった場合は、「直っていない」とだけ返さず、新しいスクリーンショットと、前回との違いを添えて再依頼します。