AIツールは、画面に見えるページをすばやく作れます。けれど、その次に必要な「これをどこに置けば、他の人が開けるのか」までは自動で解決してくれません。
日本語でも「AI生成サイト 公開」「AI 生成 HTML 公開」「ChatGPTで作ったサイトを公開」といった検索が増えています。すでに見た目はサイトらしい。次に必要なのは、実際に開けるURL、確認用のプレビュー、残す価値が出たときの独自ドメインです。
まず、AIツールが何を出力したかを見る
AI生成サイトは、主に次の形で出てきます。
| 出力 | 意味 | 公開するときの動き |
|---|---|---|
| 1つのHTMLファイル | CSSやJSがインライン、またはCDN読み込み | index.html としてアップロードする |
| HTML/CSS/JSフォルダ | 通常の静的サイト | フォルダまたはZIPをアップロードする |
| React/Viteプロジェクト | ビルドが必要なソースコード | buildを実行して dist をアップロードする |
| Next.jsなどのアプリ | 静的出力かサーバー実行か確認が必要 | static export可能か確認する |
コードが入っているからといって、ソースフォルダをそのまま公開しないでください。多くのフロントエンドプロジェクトでは、公開対象はビルド後のフォルダです。
ReactやViteでは、一般的に次を実行します。
npm install
npm run build
その後、生成された dist フォルダをアップロードします。素のHTMLなら、アップロードするフォルダの一番上に index.html があるか確認します。
AI生成サイトの公開フロー
手順は短くてよいですが、雑に進めると後で直す箇所が増えます。
- AIツールに静的出力またはビルド可能なプロジェクトを作らせる。
- ビルド手順がある場合はローカルで実行する。
- 完成したフォルダまたはZIPをプレビューURLへアップロードする。
- レイアウト、リンク、フォーム、meta情報、スマートフォン表示を確認する。
- プレビューリンクを共有する。
- 残す価値があればプロジェクトを保存し、独自ドメインを追加する。
- 以前のバージョンに戻せる状態を残す。
目的は、勢いを止めずに、生成コードをそのまま本番扱いしないことです。
DeployPagesは、この中間ステップに向いています。最初の公開はブラウザからでき、HTTPSの公開リンクを作った後で、長期管理するかどうかを決められます。ツール別の例は ChatGPTサイト公開ガイド と Geminiサイト公開ガイド を参照してください。
共有前に見るべきポイント
AI生成ページは、似た場所で失敗しがちです。リンクを送る前に次を確認します。
| 確認項目 | 見るところ |
|---|---|
| ナビゲーション | すべてのメニューが実在するページやセクションへ進むか |
| 画像 | ローカルファイル、同梱アセット、意図した外部URLになっているか |
| モバイル | ボタン、カード、見出しがスマートフォンで重ならないか |
| フォーム | 送信先が本物か、未接続なら明確に無効化されているか |
| SEOメタ情報 | title、description、favicon、OG画像が入っているか |
| 文言 | 架空の導入実績、偽のロゴ、lorem ipsum、過剰な実績表現が残っていないか |
| アセット | 画像が大きすぎず、公開ページとして重くなりすぎないか |
架空の推薦文や「10,000社が信頼」のような根拠のない実績は、見た目以上に信頼を落とします。公開前に消してください。
静的ホスティングに向いているAI出力
AI生成サイトが静的サイトとして公開しやすいのは、次の条件を満たす場合です。
- リクエスト時にデータベースを必要としない。
- HTML、CSS、JavaScriptとして表示できる。
- ログイン状態やセッションをサーバー側で管理しない。
- フォームは外部サービスや実在するエンドポイントへ送信できる。
dist、build、out、publicのようなフォルダへビルドできる。
逆に、サーバー側認証、ライブのデータベースクエリ、ファイルアップロード、バックグラウンドジョブ、同じホスト上で動く秘密APIが必要な場合は、静的サイト公開だけでは足りません。フロントエンドを静的に公開し、必要な部分は別のバックエンドで動かします。
AIツールとアップロード優先の相性
AIで作るサイトは、最初の1回で終わらないことが多いです。ヒーローを変え、料金表を直し、セクションを削り、1ページのモックからReactアプリへ移ることもあります。
本格開発ではGitが役に立ちます。ただ、最初のレビュー段階でリポジトリを作ることが目的になると、判断が遅くなります。
アップロード優先なら、次の流れにできます。
- 生成または書き出し。
- プレビューリンクを公開。
- フィードバックを受ける。
- 修正版を再アップロード。
- 動いたバージョンを残す。
Netlify DropやCloudflare Pages Direct Uploadでも、ローカルのビルド済みアセットを直接アップロードする使い方が示されています。AIが作るフロントエンド成果物の数は、従来のリポジトリ前提フローより速く増えています。
独自ドメインへ進む前の確認
最初の生成物にすぐ独自ドメインを向けるのは避けた方が安全です。接続前に次を確認してください。
My WebsiteやLanding Pageのような仮タイトルを直す。- faviconを入れる。
- 共有時に未完成に見えないOG画像を用意する。必要なら OG画像ツール を使う。
- DNSチェックツール でDNSの考え方を確認する。
- ドメインが有効になった後、SSL証明書チェック でHTTPSを確認する。
- DNSが落ち着くまでプレビューURLを残す。
DeployPagesは 独自ドメイン と HTTPS自動対応 に対応していますが、DNSには反映時間があります。プレビューURLはレビュー用、独自ドメインは公開用と分けて考えると安全です。
公開しやすい出力をAIに頼むプロンプト
AIツールが公開しづらいコードを返す場合は、静的公開を前提に依頼します。
プレーンなHTML、CSS、JavaScriptとして公開できる静的サイトを作成してください。
index.htmlをプロジェクトのルートに置いてください。
ローカル画像、CSS、JavaScriptは相対パスで参照してください。
架空の推薦文、架空の顧客ロゴ、根拠のない数値実績は入れないでください。
どのフォルダをアップロードすべきかREADMEに書いてください。
Reactアプリなら次のように指定します。
Vite Reactアプリとして作成し、npm run buildで静的なdistフォルダを生成できるようにしてください。
サーバー専用APIは使わないでください。
公開してよい環境変数以外をクライアントバンドルに含めないでください。
npm install、npm run build、distを公開する手順を明記してください。
小さな指定だけで、公開時の手戻りはかなり減ります。
まとめ
AI生成サイトの公開で大事なのは、「AIが書いたから信頼する」ことではありません。
- サイトを生成する。
- 静的ファイルとしてビルドまたは書き出す。
- プレビューリンクを公開する。
- 人が確認する。
- 残す価値があれば独自ドメインを追加する。
DeployPagesはこの受け渡しに合わせています。最初の公開リンクはブラウザアップロードで作り、実験用のページを残すと決めたら 以前のバージョンに戻す、統計、独自ドメイン、CLI公開へ進めます。