Claudeでサイトのコードを直す指示文集｜HTML・CSS・フォーム・レスポンシブの修正
想像してみてください。
納品したホームページの確認用URLを、お客さんがスマホで開いてくれました。
返ってきたメッセージは、こうです。
「ボタンが画面からはみ出していて、押せません」
自分のパソコンでは、きれいに見えていた。
慌てて直そうとして、Claudeにこう打ち込みます。
「スマホで崩れてるので直して」
返ってきたコードを貼り替えると、今度は別の場所が崩れる。
もう一度頼む。また別の場所が崩れる。
気づけば1時間たって、どこをどう直したのか自分でも分からなくなっている。
私は事業を始めて半年から1年ほど、これまでに5〜19件の制作・受注を経験しました。
AIはClaudeを使っています。
そして最初の壁は、作ることではなく集客でした。
ただ、作った後の「直す」作業で時間を溶かした経験は、何度もあります。
原因はたいてい、Claudeの性能ではありません。
渡している情報が足りないのです。
「今どうなっているか」「どうなってほしいか」「何は触ってはいけないか」。
この3つを渡すだけで、修正の成功率は大きく変わると感じています。
この記事は、HTML・CSSの修正をClaudeに頼む時の、指示文と確認手順をまとめた手順書です。
この記事の要点（3行）
修正依頼は「現状・期待・制約」の3点セットで渡す
直す場面（崩れ、スマホ、フォーム、画像、リンク、速度）ごとに、そのまま使える指示文を用意した
Claudeが出したコードは、差分を見て、実機で確かめてから公開する
この記事で解説する項目
修正依頼の出し方：現状・期待・制約を渡す
レイアウト崩れの直し方
スマホ対応（レスポンシブ）の直し方
フォームの修正
画像まわりの修正
リンクの確認と修正
表示速度の改善
コードのレビューと、差分の確認
AIが出したコードを検証する手順
独自の最小コード例（HTML/CSS）
失敗例表、チェックリスト、FAQ、今日からやる3つのこと
書き手の立場
私はプログラマーとして長年働いてきた人間ではありません。
ホームページ制作を、Claudeの助けを借りながら小さく続けている個人です。
だからこの記事は、「専門家向けの技術書」ではなく、「初心者が詰まりやすい場面で、Claudeにどう頼めば前に進むか」の記録として読んでください。
向く人と、向かない人
向く人
ホームページを自分で作った、または納品した後の修正に困っている人
HTML・CSSは少し見たことがあるが、細かい部分は自信がない人
Claudeに頼むとき、毎回ゼロから説明していて疲れている人
向かない人
JavaScriptの大規模な開発や、サーバー側のプログラムを学びたい人
WordPressなど、特定の仕組みの専用設定を知りたい人（この記事は素のHTML/CSSが中心です）
「指示文を貼れば、何も確認せずに直る」ことを期待している人
保証しないこと
この記事の指示文を使えば、必ず崩れが直る、とは約束しません。サイトの作りによって結果は変わります
表示のされ方はブラウザや端末で違います。最終確認は、自分の目と実機で行ってください
画面名・料金・仕様は変わります。Claudeの最新の仕様や使えるプランは、公式の案内で確認してください
個人情報や機密は、AIに入力しません。お客さんの名前・連絡先・問い合わせの内容・パスワードなどが入ったコードは、貼る前に消すか、ダミーに置き換えてください
有料部分で受け取れるもの
修正依頼の型（現状・期待・制約）と、そのまま使える指示文
レイアウト崩れ、スマホ、フォーム、画像、リンク、速度の各場面の指示文
差分の確認と、AIが出したコードの検証手順
独自に作った、動作を確認できる最小コード例（HTML/CSS）
失敗例表、チェックリスト、FAQ
