AIが生成したHTMLページを共有する方法

2026-10-24 更新 · 約5分で読めます

AIアシスタントが作ったページが、チャットのプレビューや自分のパソコンでは動いた。 次は、取引先・チーム・友人に見てもらいたい。しかし .html を添付する だけでは、ソースコードが表示されたり、素材が壊れたり、相手にダウンロードを 促したりすることがよくあります。

結論から

HTML・CSS・ブラウザ側のJavaScriptだけでできているなら、ファイルをURL上に置いて そのURLを送ればよいのです。リポジトリ、ビルドコマンド、ホスティングの設定なしで、 下のエリアからアップロードできます。サーバーやデータベースが必要な場合は、先に 下のバックエンド確認を行ってください。

1. 公開前の1分間チェック

index.html を入口にする

CSSとJavaScriptがHTML内にあるか、公開URLから読み込むなら、単一ファイルで十分です。 ローカルの画像・スタイル・スクリプトを使う場合は、フォルダ全体をアップロードし、 index.html を最上位に置いてください。相対パスを保つことが、公開後も 同じ見た目を再現するポイントです。

秘密情報を取り除く

HTML・CSS・ブラウザのJavaScriptに入れた内容は、ほかの人から読み取れます。 非公開のAPIキー、管理者トークン、パスワード、個人情報は削除してください。 AIアシスタントがコード内に書いたキーが、コードの一部だからといって保護される わけではありません。

バックエンドが必要か確認する

• 静的ページでも、コンテンツ表示、操作への反応、ブラウザ内の計算はできます。
• 共有データの保存、ユーザー認証、権限が必要な処理の保護にはサーバーが必要です。
• 公開ページ内の localhost は、自分ではなく訪問者のコンピューターを指します。
• 外部APIは、CORSでページのオリジンを許可し、HTTPSで利用できる必要があります。

Plopinoが配信するのは静的ページです。ブラウザのコードをバックエンドに変える ものではありません。APIは適切なサービスに置き、ここでは静的なフロントエンドを 公開してください。

2. 自分のファイルの前に、動く例を試す

公式のGradient Studioは、1つのHTMLファイルで動くインタラクティブなページです。 色と角度を変え、HTMLを確認し、コピーを編集できます。プレビューとダウンロード だけでは公開されません。自分の作品を使う前に、編集 → プレビュー → 公開の流れを 安全に確かめられます。

3. ページを公開してリンクを送る

1. 上のアップロードエリアで、HTML・zip・プロジェクトのフォルダ全体のいずれかを選びます。
2. アップロードの完了後、表示されたリンクを開き、スマートフォンでも動作を確認します。
3. そのリンクをメール・チャット・資料に貼ります。相手はブラウザでページを開けます。

画像やスタイルが消えた場合は、同じHTMLを何度も送るのではなく、フォルダ構成を 見直してください。操作がローカルサーバーに依存している場合は、共有前に バックエンドを整える必要があります。

ページを更新しても同じリンクを保つ

匿名アップロードは公開され、30日間保管されます。公開後にアカウントへ保存すれば、 ページを保持して管理できます。アカウントのページになったら、「マイボード」から 新しい版をアップロードしてください。内容が変わってもURLは同じです。調整中の AIページ、ポートフォリオ、修正が必要な提案資料などに便利です。

匿名の公開アップロードに機密情報を載せないでください。共有してよい内容だけを 使い、どの方法で送る場合も秘密情報は先に削除しましょう。

よくある問題

相手にページではなくコードが表示される

ファイルが text/html ではなくテキストとして配信されています。 添付ファイルを転送するのではなく、ウェブページとして公開し、生成されたURLを 送ってください。

ローカルでは動くのに、公開後に画像が消える

HTMLが参照するファイルをアップロードしていない可能性があります。フォルダ全体を 含めてディレクトリ構造を保ち、自分のパソコンにだけ存在する絶対パスを避けて ください。

ページは開くが、データを保存・取得できない

ブラウザのコンソールで、localhost、失敗したAPIリクエスト、CORS、 HTTPとHTTPSの混在を確認してください。フロントエンドを公開しても、ローカルのAPIは 公開されません。