ChatGPT や Gemini でHTMLサイトを作ると、見た目は表示されても、
- ボタンが動かない
- 保存されない
- 画面が途中で止まる
- 何も反応しない
ということがあります。
この時は、コードを最初から作り直してもらう前に、ブラウザのエラーをAIに渡すのがおすすめです。
F12 → Console → 赤いエラーを全コピー
HTMLをブラウザで開いた状態で、F12 を押します。
開発者ツールが開いたら、Console タブを見ます。
そこに赤いエラーが出ていたら、難しく考えずに赤い枠の内容を全部コピーして、ChatGPTに貼り付けます。
このHTMLが動きません。
F12のConsoleに出ている赤いエラーを全部貼ります。
関係あるエラーを判断して、原因を直してください。
【ここに赤いエラーを貼る】
初心者が「どのエラーが重要か」を判断するのは難しいので、最初は全部貼ってAIに任せる方が楽です。
AIで作り始めた人ほど知らないかもしれない
HTMLやJavaScriptをAIなしで触ったことがある人にとっては、Consoleを見るのはよくある確認方法だと思います。
ただ、AIでHTML作成を始めた人の場合、
「ブラウザにエラー内容が出ている」
「そのエラーをAIに貼ると直しやすい」
という流れを知らないことも多そうです。
「動きません」だけより、Consoleの赤いエラーを貼った方が、修正の精度はかなり上がりやすいです。
まとめ
AIで作ったHTMLが動かない時は、
- HTMLをブラウザで開く
-
F12を押す -
Consoleタブを見る - 赤いエラーを全部コピーする
- ChatGPTに貼る
で大丈夫です。
細かい判断はAIに任せて、まずはエラー情報を渡すのが大事です。
AIでWebサイト作成用のプロンプトを作る補助ツールも公開しています。