AIが作ったHTMLが他人の環境で崩れる理由
AIに生成させたHTMLをそのまま誰かに渡すと、自分の画面では正しく見えていたのにレイアウトが崩れる、画像が表示されない、といったことが起こります。これは、HTMLが別ファイルのCSSやJavaScript、ローカルにある画像を参照しており、その参照先が相手の環境には存在しないことが原因です。
とくに相対パスで「images/logo.png」のように書かれている場合、HTMLファイル単体を送っても画像フォルダが付いてこないため表示されません。フォント読み込みや外部スクリプトの読み込みに失敗すると、見た目が大きく変わってしまいます。
共有を前提にしたプロンプトの基本
崩れにくいHTMLを作らせるには、生成を依頼するときに「単体で完結する形」を明示することが効果的です。CSSやJavaScriptをHTML内に埋め込み、画像もできるだけ少なくする方針を最初に伝えておきます。
曖昧に「きれいに作って」と頼むより、出力の形式を具体的に指定したほうが意図どおりのファイルになります。次のような指示を組み合わせると、後から手直しする手間が減ります。
- CSSとJavaScriptはHTML内に埋め込み、1つのHTMLファイルで完結させる
- 外部CDNやフォント読み込みに頼らず、必要なら標準的な書体を使う
- 画像は最小限にし、可能ならテキストやCSSで表現する
- 相対パスではなく、自己完結する書き方を優先する
AI生成HTMLを共有する前の安全チェック
AIに「共有しやすいHTML」を作らせるプロンプトのコツでは、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
1ファイル化が難しいときの考え方
写真を多く使うサイトなど、どうしても画像が必要な場合は無理に1ファイルにこだわらなくても構いません。その場合はHTMLと画像をまとめてZIPにし、相対パスの参照関係を崩さないまま渡す方法が現実的です。
大切なのは「相手が受け取ったときに参照が切れない状態」を保つことです。AIに依頼する際も、画像を使うなら同じフォルダ構成のまま動くように指示し、フォルダごと配布できる形を意識すると安全です。
外部依存を減らすと共有もスキャンも楽になる
外部依存を減らしておくと、共有がスムーズになるだけでなく、内容の確認もしやすくなります。読み込んでいる外部リソースが少ないほど、どこに何を送っているのかが把握しやすく、想定外の通信を見落とすリスクも下がります。
ギガサイト便では公開前に自動セキュリティスキャンが走り、外部フォームの送信先やAPIキーらしき文字列を検出します。AIが気を利かせて外部サービスへの送信コードを足していた、といったケースも公開前に気づけるため、依存を整理したうえで共有する流れと相性が良いです。
ギガサイト便で共有するまでの手順
プロンプトを工夫して作ったHTMLやZIPを、実際に共有URLとして発行するまでの流れを順番に見ていきます。登録なしでもすぐ公開できるため、まずは試しに出してみるのもよいでしょう。
下記の手順は数分で完了します。認証と期限を整えておけば、相手は届いたURLを開くだけで、自分の環境と同じ見た目を確認できます。
- 完成したHTML、または画像を含む場合はZIPを用意する
- ギガサイト便のトップにそのファイルをドラッグ&ドロップする
- 公開前の自動セキュリティスキャンの結果を確認する
- 認証方式を選ぶ（社外に見せるならパスワードやメール認証が安心）
- 公開期限を設定し、見せたい期間に合わせて自動失効させる
- 発行されたURLを相手に送り、開いて確認してもらう
よくある質問
なぜ1ファイルにまとめると崩れにくくなるのですか？
CSSやJavaScript、画像参照を1つのHTMLに収めると、外部ファイルへの参照が不要になり、相手の環境に依存する部分が減ります。その結果、ファイル単体を渡しても見た目が変わりにくくなります。画像が多い場合は無理にまとめず、ZIPでフォルダ構成ごと渡す方法が向いています。
画像が多くて1ファイルにできないときはどうすればよいですか？
HTMLと画像フォルダをまとめてZIPにし、相対パスの参照関係を保ったまま共有するのが現実的です。ギガサイト便はZIPもそのままドラッグ&ドロップで公開できるため、フォルダ構成を崩さずに相手へ渡せます。参照が切れないかは公開後に自分でも開いて確認すると安心です。
AIが外部サービスへ勝手に送信するコードを入れていないか心配です。
ギガサイト便は公開前に自動セキュリティスキャンを行い、外部フォームの送信先やAPIキーらしき文字列を検出します。意図しない外部送信が含まれていれば公開前に気づけるため、内容を見直すきっかけになります。気になる送信先があれば、共有前に該当箇所を削除しておきましょう。
公開したHTMLが検索結果に出てしまわないか心配です。
ギガサイト便は既定でnoindexが設定されており、検索エンジンにインデックスされにくくなっています。レビューや関係者向けの一時的な共有を前提とした作りなので、誰にでも広く見せたくない用途に向いています。さらに認証方式を設定すれば、URLを知っている人の中でも見られる相手を絞れます。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。