AI生成HTMLをファイルで送っていませんか？デプロイせずリンクで共有する方法
ChatGPTやClaudeが作ったローカルHTMLを添付せず、リポジトリやデプロイ環境なしでブラウザー用の確認リンクに変える方法です。
最も短い方法は、生成された結果を一つの .html ファイルとして保存し、
ローカルで一度開いてから、HTML2WEBへアップロードするかコードを
貼り付けることです。生成されたURLは別の人のブラウザーでも開けます。
この方法はレビューと引き継ぎに向きますが、恒久的なサービスの
デプロイを置き換えるものではありません。
完全なHTMLファイル一つから始める
AIツールには <!doctype html>、<html>、<head>、<body> がすべて
入った完全な文書を依頼します。結果が <section> 一つのような断片だけ
なら、共有前に完全な文書構造で囲む必要があります。
最初の確認版は、できるだけ一つのファイルで動くようにします。
- CSSは
<style>要素の中に入れる。 - 小さなスクリプトは
</body>の直前に入れる。 - 外部フォントや画像には公開されたHTTPS URLを使う。
- APIキー、実名、未公開の指標、顧客データは必ず削除する。
アップロード前に自分のコンピューターでファイルを開けば、閉じ忘れた タグや目立つレイアウト崩れを見つけられます。ただし、外部リソースが 受信者の環境でもすべて読み込まれる保証はありません。
確認リンクを公開する
HTML-to-URLツールでファイルを選ぶか、マークアップを 貼り付けます。検出されたファイル種別とサイズを確認して公開します。 プレビューが共有したい版と同じであることを確かめ、結果URLをコピーします。
このリンクは一時的なレビュー用です。画面に表示される失効時刻を確認し、 いつまで開けるかを受信者にも伝えてください。継続保管する成果物なら、 一時リンクを何度も作るのではなく、承認済みの版を保守されるホスティング へ移す方が適切です。
送信前に確認すること
シークレットウィンドウでリンクを開き、受信者と近い条件で確認します。 狭いモバイル幅でも表示し、重要なリンクをすべて押し、自分のコンピューター へアクセスしなくても画像とフォントが読み込まれるかを検査します。
推測しにくいURLをアクセス権限と考えてはいけません。リンクを受け取った 人はURLを転送でき、ページが開いている間に内容を保存できます。追加の アクセス境界が必要ならパスワード保護を使います。
一時レビューと恒久ホスティングを分ける
AIが作ったモックアップ、ビジュアルテスト、レポート草案、デザイン確認 などの中間成果物には一時リンクが向きます。破棄する作業のために リポジトリを作る必要がなく、引き継ぎも短くなります。
一方、実際のプロダクト、安定したドメインが必要なページ、利用者情報を 受け取るページ、継続的なセキュリティ更新が必要なページには恒久 ホスティングを使います。その段階では、バージョン管理、デプロイ履歴、 監視、プライバシーポリシーは余分な手続きではなく、プロダクトの一部です。