よくある原因
AIが生成するHTMLは「ローカルで開く」ことを前提にしたパス設定になることがあります。`./images/hero.jpg` や `../css/style.css` のような相対パスが、共有サービスのサーバー構造と一致しないと、リソースが読み込まれず画面が崩れたり、リダイレクト設定が噛み合って404が返されたりします。単一HTMLファイルとして完結しているページでも、外部リソースの参照先が404になれば意図した表示になりません。
AIがJavaScriptでルーティングを実装するコードを生成した場合、静的ファイルホスティング（ギガサイト便・Cloudflare Pages等）では `/about` や `/contact` のようなパスが存在しないため404になります。AIはSPAのルーティング設定とサーバー側のフォールバック設定を同時に考慮しないことが多く、「開発環境では動くのに公開すると404」という事態が起きます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AI生成HTMLを受け取ったら、外部リソースへの参照（`src`、`href`、`action`属性）をすべてリストアップし、絶対URLか相対URLかを確認します。相対URLがある場合は、公開後のディレクトリ構造と一致しているかを確かめてください。ギガサイト便の場合、アップロードしたZIPの中身がそのままルートになるため、ZIPの構造とHTMLのパス記述が一致していれば問題ありません。
QRコードに埋め込む前に、公開URLをPCのブラウザのシークレットウィンドウで開き、すべてのリソースが読み込まれていることをDevToolsの「ネットワーク」タブで確認します。「ステータス」列でエラー（4xx/5xx）が出ているリソースがあれば、QRコード配布前に修正してください。特にフォントやOGP画像のパスは見落としやすいため、注意してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
QRコードを配布した後に「404になった」という報告を受けたとき、まず相手のスマホのブラウザとOSのバージョンを確認します。古いAndroidのWebViewやiOS 14以前のSafariでは、モダンなJavaScript構文（Optional Chaining等）が動作せず、エラーで画面が空白になることがあります。この場合、404とは異なるエラーですが見た目が似ているため混同されます。
相手が企業ネットワーク内でQRコードを読み取っている場合、ファイアウォールや社内プロキシが共有サービスのURLをブロックしていることがあります。「自分の自宅Wi-Fiで試してもらう」または「スマホのモバイルデータ通信で試してもらう」よう依頼することで、ネットワーク制限が原因かを切り分けられます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AIへの指示に「単一HTMLファイルとして完結させ、外部ファイル参照を持たせないでください。CSS・JavaScriptはすべてインラインで記述し、画像はBase64埋め込みにしてください」と指定すると、パス問題を根本的になくせます。ただしファイルサイズが大きくなるため、QRコードで共有するページは軽量に保つようAIにも指示してください（「HTMLファイルサイズを500KB以内に収めてください」等）。
定期的に使う共有テンプレートは、一度手動でパスを修正した正しいバージョンをストックしておき、次回からそれをベースにAIに加工させる方法が効率的です。テンプレートに「このHTMLをベースに修正してください。パス構造は変えないでください」とプロンプトに明示すれば、AIがパスを勝手に変更するリスクを下げられます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
AIにSPAを生成させたら公開後にリロードで404になります。防ぐプロンプトはありますか？
「JavaScriptルーティングを使わず、すべてのページを単一HTMLに収めてください。または各ページを別の静的HTMLファイルとして生成してください」と指定してください。SPAのルーティングは静的ホスティングでは追加設定が必要なため、AIに最初から静的HTML構成を指示するのが最善です。
画像をBase64埋め込みにするとQRコードで開くのが遅くなりますか？
画像のサイズによります。ロゴや小さなアイコン（数十KB以下）なら体感差はほぼありません。ヒーロー画像など大きな画像は200KB以下にリサイズしてからBase64化するか、Cloudinary等のCDNで配信する外部URLに差し替えてください。
生成されたHTMLのパスが正しいか自動的にチェックする方法はありますか？
html-validate（npmパッケージ）やW3C Markup Validation Serviceで構文チェックができます。リソースの実際の読み込み確認にはブラウザのDevToolsが最も確実で、「ネットワーク」タブのフィルターを「4xx」に絞ると読み込み失敗リソースを一覧できます。