AIが作ったHTMLが動かない主な原因
AIが生成したHTMLが動かない場合、まず疑いたいのは外部ファイルへの依存です。CSSやJavaScript、画像が別ファイルとして参照されているのに、そのファイルが手元に揃っていないと、見た目が崩れたり機能が動かなかったりします。
もう一つよくあるのが相対パスのずれです。HTMLが「images/photo.png」のように相対パスで参照していると、フォルダ構成が変わったり、HTML単体だけを移動したりしたときに参照が切れます。さらに、外部サービスの読み込みに失敗して動かないこともあります。
原因を切り分ける一般的な手順
動かない原因を探すときは、まず何が表示されていて何が欠けているのかを観察します。レイアウトだけ崩れているのか、画像が出ないのか、ボタンが反応しないのかで、疑うべき箇所が変わります。
ブラウザの開発者ツールを開くと、読み込みに失敗したファイルやエラーの内容を確認できます。次の順番で切り分けると、原因にたどり着きやすくなります。
- 何が表示され、何が欠けているかを観察する
- 開発者ツールで読み込み失敗やエラーを確認する
- 外部ファイルへの参照が切れていないか確認する
- 相対パスがフォルダ構成と一致しているか確認する
AI生成HTMLを共有する前の安全チェック
AIが作ったHTMLが動かないときの確認と共有のコツでは、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
外部依存と相対パスを直すコツ
外部ファイルへの依存が原因なら、CSSやJavaScriptをHTML内に埋め込んで1ファイルにまとめると、参照切れが起きにくくなります。画像が必要な場合は、HTMLと画像をまとめてZIPにし、相対パスの参照関係を保ったまま渡すと安全です。
AIに修正を頼むときは、「外部依存をなくして1ファイルで完結させて」「相対パスではなく自己完結する形にして」と具体的に伝えると、直したい方向に近づきます。直したらすぐに別の環境で開いて確認する習慣をつけると、共有後のトラブルを減らせます。
差し替え運用で修正を止めない
HTMLの修正は何度か繰り返すことが多いため、共有の入口となるURLを固定しておくと便利です。修正のたびに新しいURLを送り直していると、相手が古い版を開いて「まだ直っていない」と勘違いすることがあります。
ギガサイト便は同じURLのまま中身を差し替えられます。修正版を書き出したら、既存の公開ページにアップロードし直すだけで、相手が開くリンクは変わりません。確認してもらいながら直す作業と相性が良い運用です。
相手に再現してもらうときに集める情報
AI生成HTMLの不具合は、作った側の環境では再現しないことがあります。相手から「動かない」とだけ戻ってきた場合は、画面の状態と操作手順をそろえてもらうと原因を切り分けやすくなります。
共有URLを固定しておけば、相手が見ているページと自分が直しているページを同じ入口にできます。修正後も同じURLを差し替え、同じ手順で再確認してもらいましょう。
- 使っている端末、ブラウザ、画面幅を聞く
- 開いたURLと、何をクリックしたかを聞く
- 崩れている画面のスクリーンショットをもらう
- 画像だけ消えるのか、ボタンが動かないのか、真っ白なのかを分ける
- 修正後は同じURLで再確認してもらう
ギガサイト便で確認しながら共有する手順
実際にHTMLを公開し、相手の環境で動くかを確認しながら直していく流れを順番に見ていきます。公開前のスキャンと差し替え運用を組み合わせると、安心して修正を重ねられます。
下記の手順で、相手に確認してもらいながら同じURLで直し続けられます。動かない原因が外部送信などに絡んでいる場合も、公開前のスキャンで気づけることがあります。
- AIで作ったHTML、または画像を含む場合はZIPを用意する
- ギガサイト便のトップにそのファイルをドラッグ&ドロップする
- 公開前の自動セキュリティスキャンの結果を確認する
- 認証方式と公開期限を設定し、発行されたURLを相手に送る
- 相手の環境で動くかを確認してもらい、不具合の内容を共有してもらう
- 修正版を作ったら同じURLのまま中身を差し替えて再確認してもらう
よくある質問
自分の環境では動くのに相手の環境では動かないのはなぜですか？
多くの場合、外部ファイルへの依存や相対パスのずれが原因です。自分の環境には参照先のファイルが揃っていても、相手の環境にはない場合、画像が表示されなかったり機能が動かなかったりします。CSSやJavaScriptをHTML内に埋め込み、1ファイルで完結させると起きにくくなります。
動かない原因はどうやって調べればよいですか？
まず何が表示され何が欠けているかを観察し、ブラウザの開発者ツールで読み込みに失敗したファイルやエラーを確認します。外部ファイルへの参照が切れていないか、相対パスがフォルダ構成と一致しているかを順に見ていくと、原因にたどり着きやすくなります。
修正のたびにURLを送り直さないといけませんか？
ギガサイト便は同じURLのまま中身を差し替えられるため、修正してもURLを送り直す必要はありません。相手は同じリンクを開くだけで最新版を確認できます。古い版を開いて「まだ直っていない」と勘違いされる行き違いを防げます。
外部への通信が原因で動かない場合も気づけますか？
ギガサイト便は公開前に自動セキュリティスキャンを行い、外部フォームの送信先やAPIキーらしき文字列を検出します。AIが外部サービスへ送信するコードを入れていた場合、その存在に公開前に気づけることがあります。意図しない外部依存があれば、該当箇所を見直しましょう。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。
相手から「HTMLが動かない」と言われたら何を聞けばよいですか？
端末・ブラウザ・開いたURL・操作手順・スクリーンショットを確認します。真っ白、画像だけ表示されない、ボタンだけ動かないなど症状を分けると、相対パス、外部スクリプト、ブラウザ幅のどれが原因かを切り分けやすくなります。