「ボタンがおかしい」と言われても、対応するのは困難です。「送信後、幅の狭い画面では通知がフォームの外側、右側に表示される」という説明であれば、操作、状態、目に見えるずれがすでに含まれています。スクリーンショットは、このような説明を補完するときに価値を持ちます。
ChatGPTは画像をコンテキストとして扱うことができます。これにはスクリーンショットや図も含まれます。ドキュメントでは、関連する領域、望む結果、質問の範囲を明示することが推奨されています。私たち自身の例は、フォームを写した二つの人工的な画面で構成されています。この例について、実際の画像解析や修正は行っていません。
画像は比較可能な状態を示している必要があります
画像Aは空の登録フォームを、画像Bはデータを入力して送信した後の状態を示しています。ウィンドウの幅は同じままです。意図的に組み込んだ問題は、ボタンの下にある通知に関するものです。これにより、二つの画像の間にどのような変化があるのかが明確になります。
順序を明示的に説明してください。似たように見える二つの添付ファイルを説明なしで渡すと、違いを任意のデザイン上の好みとして扱いたくなってしまいます。技術的な質問に必要でない個人情報は削除してください。最初は架空の入力内容で十分です。
目に見える観察と技術的な仮説を分けます
画像からは、ある行が途中で切れていることは分かるかもしれません。しかし、固定幅、改行、異なるフォント、親要素のどれが原因なのかは、それだけではまだ分かりません。有用な回答では、これらのレベルを区別しておく必要があります。
Compare the two form views I created myself.
A: before input. B: after submitting, same window width.
Look at the notice below the button.
1. Describe only visible differences.
2. State the expected behaviour from my description.
3. Mark technical causes explicitly as guesses.
4. Suggest a small next checking step.私たち自身のこの依頼文では、まだ完全なコード修正を求めていません。推測した原因に対して自信満々に変更を加えるよりも、関連するHTMLや該当するCSSルールについて具体的に追加で質問するほうが役立つ場合があります。
バグ報告は、状態についての小さな約束事です
初期状態、操作、期待、実際の観察をひとまとめにしておきましょう。ウィンドウの幅と、必要に応じて入力内容も添えてください。そうすれば、別の人がまったく同じ状態を再現しようと試みることができます。これは、「壊れた」画面についての一文よりも強固な土台になります。
Starting point: empty sample form at a fixed narrow width.
Action: enter example data, then submit.
Expected: notice remains fully readable below the button.
Observed: notice extends sideways beyond the form area.
Open: which specific rule causes the overflow?これは計画したパターンを説明するための例示的な所見であり、実際に観察したアプリケーションの記録ではありません。まさにこの表示があるからこそ、もっともらしいバグの説明が、後になって実際に再現された製品のバグとして伝えられてしまうことを防げます。
一度に変える条件は一つだけにします
次の一歩としては、キーボードを使って同一の状態を再現したり、関連するルールを確認したりすることが考えられます。ブラウザ、幅、データ、内容を同時に変えてしまうと、どの違いが影響したのかが分からないままになります。そのため、比較する際は、条件をできる限り明らかに同じに保ってください。
そのうえで、新しい観察結果をさらなる根拠として返しましょう。「同じ幅で、この変更後は行が完全に表示される」は、「もう動く」よりも具体的です。本当の修正には、より長い通知文など、他の妥当な状態の確認も含まれます。
部分的な画面は部分的な画面のままです
スクリーンショットは、文書構造、サーバーの応答、キーボード操作の経路全体を自動的に示すものではありません。また、アクセシビリティ全体を証明するものでもありません。こうした問いには、実際の作業についての適切な追加の観察が必要です。
視覚的な引き継ぎの強みは、その正確さにあります。人とAIが同じ箇所、同じ状態、同じ期待について話すことができるのです。有用な次の一歩は、まだ残っている問いから導かれます。そのために製品を変更したり、何でも直す修復ボタンを用意したりする必要はありません。
出典およびドキュメントの確認時点：2026年十月25日。
