AIにHTML/CSSの修正を頼む時のスクショ説明方法
HTML/CSSの表示崩れは、文章だけで説明すると伝わりにくいことがあります。「ボタンが変」「余白がおかしい」だけでは、AIはどの場所を直すべきか判断しにくいです。
スクリーンショットに問題の場所、理想の状態、PCかスマホか、発生しているブラウザ幅を添えると、CodexやChatGPTに修正内容を正確に伝えやすくなります。
スクショ説明で伝える順番
場所、問題、理想、環境、触ってよい範囲を分けて伝えると、HTML/CSS修正の精度が上がります。
先に結論
HTML/CSS修正のスクショ説明では、次の5つをセットで伝えます。
- どのページのどの場所か
- 今どう崩れているか
- 理想はどう見せたいか
- PC表示かスマホ表示か
- HTMLとCSSのどこまで触ってよいか
スクショだけでは足りない
スクショは見た目を伝えるのに便利ですが、スクショだけでは原因までは分かりません。AIには「この赤丸のところを直して」だけでなく、どのURL、どの画面幅、どんな状態にしたいかを一緒に渡します。
特にスマホ表示の崩れは、画面幅によって出たり出なかったりします。可能なら、PCとスマホを分けて説明します。
スクショに書き込むもの
スクショには、問題の場所を囲むだけでなく、短いメモを書きます。長い文章はチャット本文に書き、画像内は短くします。
| 書き込む内容 | 例 |
|---|---|
| 問題の場所 | 赤枠、番号、矢印で示す |
| 問題の種類 | 文字がはみ出る、余白が広い、横並びが崩れる |
| 理想 | 中央揃えにしたい、2列ではなく1列にしたい |
| 優先度 | ここだけ先に直したい、全体の余白も見てほしい |
PCとスマホを分けて説明する
CSSは画面幅によって効き方が変わります。PCでは問題なくても、スマホでだけ崩れることがあります。スクショを送る時は、PCの画像とスマホの画像を分け、どちらで問題が出るかを書きます。
- PCだけで起きる問題か確認する
- スマホだけで起きる問題か確認する
- 両方で起きるなら、それぞれの見え方を説明する
- スマホの画面幅が分かれば書く
- 修正後もPC/SP両方を確認してもらう
よくある説明不足
AIにHTML/CSS修正を頼む時、次のような説明だと手戻りが増えやすくなります。
- 「いい感じに直して」だけで理想がない
- スクショのどこを見ればよいか分からない
- PCなのかスマホなのか書いていない
- 全ページで直したいのか、そのページだけか分からない
- どのファイルを触ってよいか分からない
- 修正後の確認方法を頼んでいない
図解の矢印は読み順まで指定する
図解やカードUIでは、矢印の向きも大事です。スマホ幅では横方向の余白が少ないため、PCと同じ → を入れると、矢印だけが変な位置に見えることがあります。
スクショで伝える時は、「この矢印が変」だけでなく、「スマホでは下向き矢印にして、上から下へ読む流れにしたい」と書くと、AIがレイアウト意図を理解しやすくなります。
スクショ説明テンプレート
次のテンプレートを使うと、スクショと文章の役割を分けて説明できます。
HTML/CSSの表示修正をお願いします。
対象ページ：
添付スクショ：
問題の場所：
今の状態：
理想の状態：
表示環境：
- PC / スマホ：
- ブラウザ：
- 分かれば画面幅：
修正してよい範囲：
触ってほしくない範囲：
お願いしたいこと：
- 関係するHTML/PHPとCSSを確認する
- 最小限の修正で直す
- PC/SP両方の表示崩れに注意する
- 修正後に変更ファイルと確認結果を教えるCodexに頼む時の書き方
Codexに頼む場合は、スクショ説明に加えて、既存ファイルを読んでから修正してほしいことを明記します。CSSだけを直すのか、HTML構造も直してよいのかも大切です。
添付スクショの赤枠部分のHTML/CSSを修正してください。
対象ページ：
問題：
理想：
進め方：
1. まず対象ページとCSSを読んで、原因を説明する
2. 必要な範囲だけ修正する
3. 既存デザインから浮かないようにする
4. PCとスマホで崩れないように確認する
5. PHPページの場合は構文チェックもする
HTML構造の変更：
- 必要なら変更してよい / CSSだけで直してほしい
最後に、変更したファイルと確認結果を教えてください。ChatGPTに相談する時の書き方
ChatGPTに相談する場合は、ファイルを直接読めないことが多いため、スクショに加えて関係しそうなHTMLとCSSを貼ると判断しやすくなります。
添付スクショの表示崩れについて相談です。
問題：
理想：
PC/SP：
関係しそうなHTML：
（ここに貼る）
関係しそうなCSS：
（ここに貼る）
お願い：
- 原因の候補を教えてください
- 修正CSS案を出してください
- 既存CSSを大きく壊さない方法を優先してください
- スマホ表示で注意する点も教えてください修正範囲を指定する
HTML/CSSの修正は、1か所の調整が別のページに影響することがあります。共通CSSを触る場合は、全体に影響する可能性があります。
| 範囲 | 伝え方 |
|---|---|
| そのページだけ | 対象ページだけで効くCSSにしてほしい |
| 同じ部品全部 | 同じボタンやカード全体に反映してほしい |
| スマホだけ | PCは変えず、スマホ幅だけ直してほしい |
| 全体デザイン | サイト全体の余白ルールとして調整してほしい |
スクショを撮る前のチェック
スクショを撮る前に、キャッシュや拡大率の影響がないか軽く確認します。原因がキャッシュの場合、CSSを直しても変化が見えないことがあります。
- ページを再読み込みした
- ブラウザの拡大率が100%になっている
- 問題の場所が画面に入っている
- 赤枠や番号で場所を示した
- 理想の見た目を言葉で書いた
- PC/SPのどちらかを書いた
修正後の確認ポイント
AIに直してもらった後は、スクショの場所だけでなく、その周辺も確認します。余白や横幅の修正は、近くの部品へ影響することがあります。
- 問題の場所が直っているか
- 近くのテキストやボタンが崩れていないか
- PCとスマホの両方で見たか
- 別ページの同じ部品に影響していないか
- CSSが反映されているか