ChatGPTやClaudeで作ったHTMLを公開する方法
ChatGPT、Claude、Gemini にウェブページを頼んだら、プレビューでは見栄えのいいHTMLがどっさり返ってきた。次の疑問はいつも同じです。これをどうやって公開して、他の人に見せればいいの? 最短ルートを紹介します。
ステップ1: AIに「自己完結した1ファイル」を頼む
コピーする前に、すべてを1ファイルにまとめるようAIに頼みましょう。「CSSとJavaScriptをすべてインラインにした、単一のHTMLファイルにしてください」と。自己完結した index.html が1つあれば、複数ファイルのフォルダよりも、ホスティングも共有も更新も圧倒的に簡単です。
ステップ2: コードをコピー — ファイル保存すら不要
hdply で無料アカウントを作り、エディタを開いて、AIのHTMLをそのまま貼り付けます。デプロイをクリックすれば、my-site.hdply.com のような自分のアドレスでページが公開され、HTTPSも付いてきます。すでにファイルとして保存してあるなら、ドラッグ&ドロップでもOKです。
「AIが書き終わった」から「友達がリンクを開ける」までの所要時間: 約1分。
ステップ3: AIと改良を重ね、数秒で再デプロイ
AIが書くページの本当の強みは反復です。変更を頼み、新しいコードをもらい、貼り付けて、保存する。デプロイは毎回自動でバージョン管理されるので、バージョン5で何かが壊れても、ワンクリックでバージョン4に戻せます。Gitもビルドパイプラインも不要——ループはただチャット → 貼り付け → 保存だけです。
公開前にチェックすべき3つのこと
- コードに秘密情報を入れない。 AIがAPIキー(天気ウィジェット、地図、LLM呼び出し用など)を入れていたら要注意。ページは公開されており、誰でもソースを読めます。公開しても問題ないキーだけを使うか、その機能を削除しましょう。
- 画像には実在するURLを。 AIは存在しない画像を参照することがあります。実際にホストされている画像へのリンクを使うか、外部ファイルが一切不要なインラインSVGをAIに頼みましょう。
- スマホで確認。 貼り付けてデプロイしたら、URLをスマートフォンで開いてみましょう。崩れている箇所はAIに直してもらえばOK。再デプロイは数秒です。
チャットのリンクやスクショの共有じゃダメ?
チャットの共有リンクは期限切れになり、アカウントが必要で、あなたのプロンプトまで見えてしまいます。スクリーンショットは操作できません。本物のURLは永続的で、どのデバイスでも開け、完成品らしく見えます——実際、完成品なのですから。