GPT-6 AstraでHTML・CSS修正｜コードを読まずに依頼

GPT-6 Astraでコードを読まずに修正するには？

GPT-6 AstraでHTML・CSSを修正する私の方法は、完成画面を見る、問題を文章で伝える、コード全文を出し直してもらう、という流れです。自分でコードの一部を書き換える作業は行いません。

私が見ているのは、完成画面の見た目と動き

一旦完成形ができたら、まず全体を見ます。色やイラストに違和感がないか、文字やレイアウトが崩れていないか、フォントの大きさやバランスは合っているか。コピーボタンが使えるか、アニメーションが機能しているかも確認します。

問題を見つけたら、同じチャットで「ここが崩れているので修正してください」「このようになっている原因を調べて修正してください」と伝えます。返ってきた完成版をもう一度見て、直っていればOKにします。原因の特定やコードの書き換えは、AIへ依頼しています。

HTML・CSSのどちらでも、依頼の進め方は共通

HTMLとはページの構造を記述する言語、CSSとは見た目を指定する言語です。WordPressのHTML説明・MDNのCSS説明。私は、どちらのコードを直すべきかを自分で判断せず、画面上で気づいたことから依頼します。

この方法で前提にする操作は、コード全体をコピーする、元の完成版と区別して保存する、対象の場所へ貼り付ける、完成画面を開くことです。コードの構文を理解していなくても、修正依頼を始められます。

始める前の準備として、修正前のコード全文は別のファイルなどへ残しておくことを勧めます。WordPressなら、どの記事のどのカスタムHTMLブロックを貼り替えるかも確認してください。ここでいう「全文」は、修正対象として渡した記事・ブロックの一式です。

Astraはモデル名、Workは作業を依頼して成果物を確認する環境です。OpenAIは両者を別に案内し、モデルの利用可否は展開状況・サインイン方法・クライアントで変わると説明しています（2026年9月確認）。モデルの案内・Work入門。Astraを選べない場合は、Astraの利用先とモデル表示を先に確認してください。

表示崩れや動作不良を、どう文章で伝える？

GPT-6 Astraへの修正依頼では、画面上の場所、今の状態、希望する状態、変えない部分を伝えると、コードを読まずに修正範囲を指定できます。これは、私の進め方を読者向けに整理した伝え方です。

「ここ」だけで伝わりにくい場合は、「冒頭の説明文」「表の左端の列」「依頼文の下のコピーボタン」のように場所を特定します。スマホだけ、記事の編集画面だけなど、問題が出る条件も分かる範囲で添えてください。

「おかしい」の説明が難しいときは、残したい点から伝えても構いません。「今の配色は維持して、文字とイラストの間隔だけを整えてください」のように、変更の境界を示します。OpenAIの公式ガイドも、目的・参考情報・出力形式・維持すべき条件を伝える考え方を案内しています（2026年9月確認）。OpenAIの依頼の組み立て方

同じチャットでコード全文を出し直すには？

GPT-6 Astraへ修正を頼むとき、私は修正が不要な部分も含めたコード全文の再出力を求めます。変更する場所は絞り、受け取るコードは完成版の一式にすることで、自分で部分的に書き換える作業をなくしています。

変更するのは指定箇所、受け取るのは完成版全体

最初は、その完成版を作った同じチャットで修正を依頼します。どの版を直すのか迷わないよう、読者が依頼するときは「直前に出力した完成版を修正してください」と対象を明示してください。別の版を使うなら、その全文を貼り付けるかファイルで渡します。

「それ以外はそのままで」と「修正不要な箇所も含めて全文を出力してください」は、セットで伝えます。これにより、記事全体を作り直す出力形式と、内容まで全面的に変更する指示を区別できます。

コピーして使える修正依頼文

次の依頼文は、私の進め方を再利用できる形に整理したものです。修正対象の版を指定し、症状別の伝え方を参考に、場所・今の状態・希望する状態を続けて送ってください。

JavaScriptとは、ボタンなどの操作に応じた動きをページへ加えるためにも使う言語です。コピーボタンやアニメーションには、この処理が関係する場合があります。原因をHTML・CSSだけに限定せず依頼してください。MDNのJavaScriptの説明

修正対象は、私が指定する完成版のコード全文です。
私はコードを読んだり、一部を書き換えたりせず、完成画面を見て確認します。

この後に伝える「場所・今の状態・希望する状態」をもとに、確認できる資料から原因を調べ、必要な修正をしてください。
原因を確認できない場合は推測として説明し、修正に必要な情報が足りなければ質問してください。

指定した箇所以外の文章、リンク、配色、イラスト、レイアウト、動作は維持してください。
修正が不要な部分も含め、対象のコード全文を省略せず、1回で貼り替えられる完成版として出力してください。
差分だけや部分差し替えではなく、HTML・CSSと、使用している場合はJavaScriptも含めてください。

変更した点と、完成画面での確認方法を短く添えてください。
表示や操作を実際に確認できなかった場合は、その旨を書いてください。

「原因を究明して、確実に直してください」と頼んでも、その言葉だけで結果が保証されるわけではありません。AIの「修正しました」という返答で終えず、受け取った完成版を自分の目で確かめます。OpenAIの公式ガイドも、結果を確認したうえで具体的な変更を追加依頼する進め方を案内しています（2026年9月確認）。追加の指示で結果を調整する方法

WordPressで修正後の画面をどう確認する？

WordPressに修正版を貼り付けた後は、直したかった箇所と記事全体を見て、ボタンや動きは実際に操作して確認します。私の方法では、コードの差分を読む代わりに、完成画面を見て修正結果を判断します。

対象のブロックを、完成版全体で貼り替える

以下は、読者がWordPressで進めるときの手順です。修正前の全文を残したうえで、受け取ったコード全体を対象のカスタムHTMLブロックへ貼り替え、下書きを保存して投稿プレビューを開きます。古いコードの下に追記すると完成版が重複するため、対象の内容を置き換えます。

貼り替える場所が分からない場合は、使っているテーマ名や編集画面の名称を伝え、「どこを丸ごと置き換えるか」を先に質問してください。コードの一部を探して編集する指示が返ってきたら、もう一度、貼り替えられる完成版全体を求めます。

回答が途中で途切れたり、修正不要部分が省かれたりした場合は、そのまま使わず全文を再依頼します。ファイル出力を利用できる環境なら、全文入りのファイルを受け取る方法も選べます。

見た目は全体、機能は実際の操作で確かめる

まず修正したかった問題が解消したかを見て、その後に記事全体を確認してください。指定していない文章や表がなくなっていないか、ほかの場所の色・フォント・配置まで変わっていないかを見ます。スマホで起きた問題なら、同じスマホの画面でも確認します。

確認方法を具体化すると、コピーボタンは押した後に別の入力欄へ貼り付け、目的の文章が入るかを見ます。「コピーしました」の表示だけでは完了にしません。アニメーションは、通常の記事画面で該当箇所までスクロールするなど、依頼したタイミングに合わせて確かめます。

直っていれば、その完成版を採用します。まだ問題があれば「直った部分」と「残った問題」を分けて伝え、再び全文を出し直してもらいます。別の崩れが増えた場合は、保存しておいた前の完成版へ戻してから依頼し直す方法もあります。

直らないとき、新しいチャットへどう引き継ぐ？

GPT-6 Astraとの同じチャットで修正しても直らない場合、私は新しいチャットで同じ修正内容を再依頼します。新しいチャットの方が直りやすい印象はありますが、成功率を比較した結果ではありません。

新しいチャットには、直す対象も一緒に渡す

読者がこの方法を再現する際は、同じ依頼文に加え、修正対象のコード全文か、全文を入れたファイルを新しいチャットへ渡してください。前の会話の内容や最新版のコードが、依頼先で十分に参照できるとは決めつけないためです。

基準にするのは、直前に自分が画面で確認した版です。問題のある最新の版を直すのか、前の正常な版からやり直すのかを明示し、残っている問題と、維持する部分を同じ文章で伝えます。新しいチャットでも、修正不要な箇所を含む全文の再出力を求めます。

複雑な修正は、残った問題を絞って伝える

以前は何度依頼してもなかなか直らないことがありましたが、最近は修正しやすくなったと感じています。モデルの進化を感じる部分ですが、同じ課題・条件で性能差を測定した評価ではなく、制作を続ける中での印象です。

一方で、複雑なHTML・CSSはすぐに直らない場合もあり、伝え方に工夫が必要だと感じています。読者向けの工夫としては、複数の問題を一度にまとめず、まず残っている問題を1つ選び、場所・現状・希望を具体化する方法を勧めます。修正点を絞っても、出力は毎回、対象のコード全文を求めます。

色やイラストの「違和感」は、好みと動作不良が混ざりやすい部分です。色なら濃さと混ざり方、文字なら大きさと間隔のように、変えてほしい点を分けると説明しやすくなります。コード上の原因を想像して指定する必要はありません。

貼り付け先の問題が疑われるときは、環境を伝える

AI側で見た完成形とWordPressの記事画面で結果が違う場合は、その違いを伝えてください。WordPress公式は、権限によって保存時に許可されないタグが除去される条件を説明しています（2026年9月確認）。WordPressの保存条件。新しいチャットへ移っても、貼り付け先の条件まで自動で変わるわけではありません。

自分で保存後のタグを点検する必要はありません。「AI側の完成画面では動くが、WordPressへ貼ると動かない」など、確認できた違いを伝え、保存先や動作条件も含めて調べてもらいます。管理者側での確認が必要なら、無理に全文の再出力だけを繰り返さず、確認を依頼してください。

コードやファイルを渡す前に、共有する権利と利用環境のデータの扱いを確認し、認証情報や個人情報を含むものはそのまま送らないでください。OpenAIの利用規約では、入力に必要な権利の確保と、出力を使う前の確認が利用者に求められています（2026年9月確認）。OpenAIの入力・出力に関する条件