---
title: "QRコードで開くと404になる問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLを公開してQRコードで配布する際に404を防ぎたい制作者向けに、パス設定・ルーティング・相対URLに関するプロンプト指定と検証手順をまとめた記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/qr-404-ai-prompt"
markdown: "https://giga-site.com/articles/qr-404-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# QRコードで開くと404になる問題をAI生成HTMLで防ぐプロンプト
AIで生成したランディングページやHTMLをギガサイト便で公開してQRコードを配布したら404になった——このトラブルはAI生成HTML特有の設定漏れが引き金になるケースがあります。公開前に問題を防ぐプロンプトの書き方と、生成後に必ず確認すべきポイントを解説します。
> Source HTML: https://giga-site.com/articles/qr-404-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
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」に絞ると読み込み失敗リソースを一覧できます。
## 関連記事
- [QRコードで開くと404になるときの原因と直し方](https://giga-site.com/articles/qr-404-fix/index.md)
- [QRコードで開くと404になるときに共有前に確認するチェックリスト](https://giga-site.com/articles/qr-404-checklist/index.md)
- [QRコードで開くと404になるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/qr-404-request-message/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [ファビコンが更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/favicon-cache-ai-prompt/index.md)
- [iPhoneだけ横スクロールする問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/iphone-horizontal-scroll-ai-prompt/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "QRコードで開くと404になる問題をAI生成HTMLで防ぐプロンプト",
"description": "AI生成HTMLを公開してQRコードで配布する際に404を防ぎたい制作者向けに、パス設定・ルーティング・相対URLに関するプロンプト指定と検証手順をまとめた記事。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/qr-404-ai-prompt",
"url": "https://giga-site.com/articles/qr-404-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "AIにSPAを生成させたら公開後にリロードで404になります。防ぐプロンプトはありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「JavaScriptルーティングを使わず、すべてのページを単一HTMLに収めてください。または各ページを別の静的HTMLファイルとして生成してください」と指定してください。SPAのルーティングは静的ホスティングでは追加設定が必要なため、AIに最初から静的HTML構成を指示するのが最善です。"
}
},
{
"@type": "Question",
"name": "画像をBase64埋め込みにするとQRコードで開くのが遅くなりますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "画像のサイズによります。ロゴや小さなアイコン（数十KB以下）なら体感差はほぼありません。ヒーロー画像など大きな画像は200KB以下にリサイズしてからBase64化するか、Cloudinary等のCDNで配信する外部URLに差し替えてください。"
}
},
{
"@type": "Question",
"name": "生成されたHTMLのパスが正しいか自動的にチェックする方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "html-validate（npmパッケージ）やW3C Markup Validation Serviceで構文チェックができます。リソースの実際の読み込み確認にはブラウザのDevToolsが最も確実で、「ネットワーク」タブのフィルターを「4xx」に絞ると読み込み失敗リソースを一覧できます。"
}
}
]
}
```