Web制作中にエラーが発生したとき、生成AIへ質問すると原因や修正方法を短時間で整理できることがあります。
しかし、「動きません」「エラーが出ました」とだけ伝えても、正確な回答は得られません。
AIは、こちらのパソコン、ファイル、ブラウザ、WordPressの管理画面を自動的に確認できるわけではないからです。
必要な情報が不足していると、AIは可能性の高そうな原因を推測するしかありません。その結果、実際の問題とは関係のない設定変更や再インストールを提案することもあります。
今回は、Web制作のエラーをAIへ相談するときに伝えたい7つの情報を解説します。
1.何を実現したいのか
最初に伝えるべきなのは、本来どのような状態にしたいのかです。
「お問い合わせフォームがおかしい」だけでは、表示が崩れているのか、送信できないのか、自動返信メールが届かないのか分かりません。
たとえば、次のように目的を具体的にします。
ボタンを押したらメニューを開きたい
WordPressの固定ページにサービス内容を表示したい
フォーム送信後に完了メッセージを表示したい
CSSの修正を本番サイトへ反映したい
目標が明確になれば、AIは必要な処理と現在の状態を比較しやすくなります。
2.実際に何が起きているのか
次に、現在起きている現象を具体的に説明します。
「動かない」という表現だけでは情報が足りません。
クリックしても何も起きないのか、画面が白くなるのか、別のページへ移動するのか、一部だけ表示されないのかを伝えます。
また、常に発生するのか、スマートフォンだけで発生するのか、ログイン中だけ発生するのかといった条件も重要です。
見た目の問題であれば、スクリーンショットを添えると位置関係や崩れ方を伝えやすくなります。
期待する結果と実際の結果を分けて説明することが、原因特定の第一歩です。
3.エラーメッセージの全文
エラーメッセージが表示されている場合は、途中で省略せずに全文を伝えます。
長いエラー文には、問題が発生したファイル名、行番号、処理の種類、原因の手掛かりなどが含まれていることがあります。
最初の一行だけを見て質問すると、本当に重要な情報を見落とす可能性があります。
ブラウザの開発者ツール、WordPressのデバッグ画面、ターミナルなど、どこに表示されたエラーなのかも合わせて伝えます。
ただし、エラー文にパスワード、秘密鍵、アクセストークン、メールアドレスなどが含まれていないか、送信前に必ず確認します。
4.使用している環境
同じコードでも、実行環境によって原因や対処方法は変わります。
AIへ相談するときは、必要に応じて次の情報を伝えます。
使用しているパソコンの種類
ブラウザの種類
WordPressを使っているか
使用中のテーマやプラグイン
ローカル環境か本番環境か
使用しているサーバー
関係する言語やツール
問題が起きる端末や画面幅
すべてを毎回書く必要はありません。
たとえばCSSの表示崩れなら画面幅やブラウザが重要で、WordPressの管理画面エラーならテーマやプラグインの情報が重要です。
問題に関係する環境を選んで伝えます。
5.問題が起きるまでの操作手順
エラーを再現する手順も重要な情報です。
どのページを開き、何を入力し、どのボタンを押すと問題が起きるのかを順番に整理します。
再現手順が分かれば、AIは処理のどの段階で失敗しているのかを考えやすくなります。
また、手順を書き出している途中で、自分自身が原因に気付くこともあります。
毎回必ず起きるのか、特定の操作をしたときだけ起きるのかも伝えると、さらに切り分けやすくなります。
6.直前に変更した内容
それまで正常に動いていたものが突然動かなくなった場合は、直前の変更が有力な手掛かりになります。
たとえば、次のような変更です。
CSSやJavaScriptを修正した
WordPressやプラグインを更新した
サーバーを移行した
ドメインやSSLを設定した
ファイル名や保存場所を変更した
新しい機能を追加した
キャッシュ設定を変更した
問題と関係なさそうに見える変更でも、実際には影響している場合があります。
「昨日までは動いていた」「このファイルを変更した直後から発生した」という情報があれば、確認する範囲を大きく絞れます。
7.すでに試したこと
解決のために試した操作も伝えます。
再読み込み、キャッシュ削除、プラグイン停止、ファイルの再アップロード、アプリの再起動など、実施済みの内容を整理します。
これを伝えないと、AIから同じ対処方法を繰り返し提案されることがあります。
結果も合わせて書くことが大切です。
「キャッシュを削除した」だけでなく、「ブラウザのキャッシュを削除したが変化しなかった」と伝えます。
何を試し、何が変わり、何が変わらなかったのかが分かれば、次に確認すべき場所を判断しやすくなります。
コードは必要な範囲だけ共有する
コードが関係する問題では、対象部分を共有すると回答の精度が上がります。
ただし、プロジェクト全体をそのまま貼り付けると、かえって重要な部分が分かりにくくなることがあります。
問題が起きている要素、その要素に関係するCSS、動作を担当するJavaScriptなど、必要な範囲を選びます。
どのファイルのコードなのかも明記します。
自分では関係ないと思った親要素や読み込み処理が原因になる場合もあるため、最初は最小限を共有し、不足を指摘されたら追加していく方法が安全です。
スクリーンショットだけに頼らない
スクリーンショットは、デザイン崩れや設定画面を共有するときに便利です。
しかし、画像だけではコピーできないエラー文や、画面外の設定、操作手順までは伝わりません。
スクリーンショットを添える場合も、発生している現象を文章で説明します。
エラーメッセージは、可能であれば画像だけでなく文字として共有した方が、ファイル名や行番号を正確に確認できます。
画像と文章を組み合わせることで、状況を誤解されにくくなります。
AIの回答は一つずつ試す
AIから複数の対処方法を提案されても、一度にすべて変更するのは避けましょう。
複数箇所を同時に変更すると、どの操作によって直ったのか、別の不具合がどの変更から発生したのか分からなくなります。
まず原因として可能性が高いものを確認し、結果をAIへ伝えます。
改善しなければ、次の可能性を調べます。
本番サイトを変更する場合は、事前にバックアップや変更履歴を残しておくことも必要です。
AIは候補を出す役割であり、最終的な確認と判断は制作者が行います。
質問前に機密情報を取り除く
AIへ情報を送る前に、機密情報が含まれていないか確認します。
特に注意したいのは、次のような情報です。
パスワード
APIキー
アクセストークン
秘密鍵
データベースの接続情報
顧客の個人情報
非公開サイトの認証情報
原因調査に必要であっても、実際の値をそのまま共有する必要はありません。
該当箇所を伏せ字や架空の文字列へ置き換えたうえで相談します。
まとめ
AIへエラーを相談するときは、「動きません」と伝えるだけでは十分ではありません。
本来実現したいこと、実際の現象、エラーメッセージ、使用環境、再現手順、直前の変更、試した対処を整理すると、回答の精度が上がります。
質問を詳しく書く作業は、AIのためだけではありません。
自分の中でも状況が整理され、問題が起きている場所を切り分けやすくなります。
AIを便利な修正ボタンとして使うのではなく、原因を一緒に調べる相手として使う。
この意識を持つことで、Web制作のトラブルをより安全かつ効率的に解決できるようになります。