ひとことで言うと
Webのパスには3種類あります。絶対パス（`https://example.com/style.css`）、ルート相対パス（`/style.css`）、そして文書相対パス（`./style.css`や`style.css`）です。ルート相対パスは「このサーバーのルートから数えたパス」を意味し、`/style.css`は`https://同じホスト/style.css`に展開されます。HTMLファイルを別のホスト（`r2.dev`や`pages.dev`など）で配信した場合、ルートが変わるのでリソースの場所も変わります。
AIツール（Claude・GPT・v0など）がHTMLを生成する際、プロジェクトの一般的なWebサーバー環境を想定してルート相対パスを使うことがあります。`<link href="/assets/style.css">`や`<script src="/js/app.js">`がその典型です。このHTMLをオブジェクトストレージやギガサイト便で公開すると、CSSやJSが読み込まれずスタイルが崩れ、機能も動かないという状況が生じます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
AIが生成したHTMLをそのままZIPに固めて共有サービスにアップロードしたとき、ブラウザの開発者ツールのコンソールに`Failed to load resource: the server responded with a status of 404`が大量に表示される場合は、ほぼルート相対パスが原因です。`src`や`href`属性を確認し、`/`で始まるパスを`./`に変更するか、`<base>`タグで基底URLを設定することで解決します。
ギガサイト便のようなサービスでは、アップロードされたHTMLのベースURLがサービスのドメイン（例：`gigasite.app`）のルートになります。AIが生成したHTMLに`/favicon.ico`と書かれていれば`gigasite.app/favicon.ico`を探しに行き、ZIPに含まれる`favicon.ico`には到達しません。この問題を回避するには、サービス側がアップロード時にルート相対パスを自動変換するか、HTMLの`<head>`に`<base href="./">`を挿入する処理が必要です。
よくある誤解
「`./`で始まるパスと`/`で始まるパスは同じ」という誤解があります。`./style.css`はHTMLファイルがある場所と同じディレクトリの`style.css`を指しますが、`/style.css`はドメインルートの`style.css`を指します。ローカルファイルシステムでHTMLを開いた場合、`/style.css`はファイルシステムのルート（`C:\style.css`や`/style.css`）を指してしまうため、どちらの環境でも確実に動かすには文書相対パスか絶対パスを使うことが基本です。
「`<base>`タグを設定すればすべてのパス問題が解決する」と思われることもありますが、`<base>`タグの影響範囲はドキュメント内のすべての相対URLに及びます。アンカーリンク（`<a href="#section">`）にも影響するため、`<base>`タグを設定したあとはページ内リンクの挙動も必ず確認してください。
安全に使うための注意点
AIにHTMLを生成させるプロンプトに「外部リソースへの参照はCDN経由の絶対URLを使い、同梱ファイルへの参照は文書相対パス（`./`）で記述してください」と明示的に指示することで、ルート相対パス問題の発生を事前に防げます。生成後は`grep -n '"/' index.html`でルート相対パスの行番号を確認するのが効率的です。
同一ファイルで複数の環境（ローカルプレビュー・ステージング・本番）で動かす必要がある場合は、ビルドツール（Vite・Webpack・Parcelなど）の`base`設定を使ってパスを環境ごとに自動変換することを検討してください。AIが出力した純粋なHTMLファイルにはビルド環境がないため、この場合は相対パスに統一するか、サービス側の自動変換に頼るのが現実的な選択肢です。
よくある質問
AIが生成したHTMLをローカルで問題なく開けるのに、アップロード後に崩れる原因はパスの問題ですか？
多くの場合はそうです。ローカルでは`/`がファイルシステムのルートを指してたまたまリソースが見つかることがありますが、別のドメインで公開するとルートが変わります。ブラウザのコンソールで404エラーが出ていれば、そのURLを見てパスの種類を確認してください。
AIに生成させたHTMLのルート相対パスを一括変換するツールはありますか？
`sed -i 's/src="\//src=".\//g' index.html`のような置換コマンドで対応できます。また`html-minifier`や`posthtml`にはパス変換プラグインがあります。ただし変換後は必ずブラウザで動作確認してください。
CSS内の`url('/images/bg.jpg')`もルート相対パスの問題が起きますか？
はい、同様に問題が起きます。CSSの`url()`もルート相対パスを解釈しますが、基準はCSSファイルがある場所ではなくドメインルートです。そのため画像パスも相対パス（`url('../images/bg.jpg')`など）に変換するか、絶対URLを使うことが推奨されます。