GeminiのHTMLは「コードのまま」だと相手に伝わりにくい
GeminiにUIやランディングページの試作を頼むと、HTMLやCSS、JavaScriptがコードブロックとして返ってきます。自分の画面では完成形をイメージできても、相手にコードをそのまま渡すと、内容を確認するまでに余計な作業が発生します。
受け取った側はコードをコピーし、テキストエディタに貼り付けて拡張子を付けて保存し、ブラウザで開く、という流れをたどることになります。非エンジニアの相手なら、この時点で確認をあきらめてしまうこともあります。
結局のところ必要なのは「URLを送れば、相手がクリックするだけで完成形を見られる」状態です。そこにたどり着くまでの道のりが、共有のハードルになっています。
HTMLを相手に見せる主な選択肢
生成したHTMLを共有する手段はいくつかありますが、それぞれ手間と向き不向きが違います。手元の状況に合わせて選ぶのがよいでしょう。
ファイルを直接渡す方法は手軽に見えて、相手の環境次第で表示が崩れたり、画像が読み込めなかったりすることがあります。サーバーにデプロイする方法は確実ですが、設定の知識が必要で、ちょっとした確認のためには大げさです。
- HTMLファイルをメールやチャットで送る: 相手が保存して開く手間がかかる
- クラウドストレージで共有する: そのまま表示されず、ダウンロードになりがち
- GitHub PagesやVercelなどにデプロイする: 確実だが設定の知識が必要
- 共有URL発行サービスを使う: アップロードするだけでURLになる
AI生成HTMLを共有する前の安全チェック
Geminiで作ったHTMLを共有URLにでは、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
共有URLにする手順
ここでは、HTMLをドラッグ&ドロップするだけで共有URLを発行できる「ギガサイト便」を例に、最短の流れを紹介します。サーバーの用意やデプロイ設定は必要ありません。
- Geminiが生成したHTMLをテキストエディタに貼り付け、「index.html」として保存する
- CSSや画像など複数ファイルがある場合は、まとめてZIPにする
- ギガサイト便のトップページを開き、保存したファイルをドロップする
- 発行された共有URLをコピーし、見せたい相手に送る
- 相手はURLを開くだけで、ブラウザ上で完成形を確認できる
誰に見せるかを選ぶ
試作段階のページや、まだ社外に出したくない内容なら、リンクを知っている人なら誰でも見られる状態は不安が残ります。見せる相手をどこまで絞るかは、内容の機密度に応じて決めるとよいでしょう。
認証方式は用途に合わせて選べます。社内レビューなら会社のメールドメインを持つ人だけに限定でき、特定の取引先に見せたいならパスワードや、相手のメール宛に届くワンタイムでの本人確認も使えます。
- URLのみ: リンクを知っていれば誰でも閲覧できる
- パスワード認証: 合言葉を知っている人だけが見られる
- メール認証: 指定したメール宛のワンタイムで本人確認する
- 会社ドメイン認証: 特定のメールドメインを持つ人だけに限定する
公開後に役立つ機能と注意点
共有して終わりではなく、後から手を入れたくなる場面もあります。同じURLのままファイルを差し替えられるので、Geminiに修正を頼んで作り直したときも、リンクを送り直す必要がありません。相手はブックマークしたURLを再度開けば最新版を見られます。
公開期限を設定しておけば、期限切れで自動的に閲覧できなくなります。一時的な確認用ページを出しっぱなしにしてしまう心配が減ります。アップロード時にはセキュリティスキャンが走り、APIキーらしき文字列や外部スクリプトへの依存などの兆候があれば警告が出ます。Geminiが書いたコードに想定外の記述が混ざっていないか、公開前に気づくきっかけになります。
なお、共有されるのは静的なHTMLです。PHPのようなサーバー側の処理は動きません。一時公開ページには「noindex」が付き通常は検索結果に出ませんが、これは検索除けであってアクセス制御ではない点に注意してください。本当に見せたくない相手を防ぐなら、認証方式で絞り込むのが確実です。
共有前にGeminiへもう一度確認させるプロンプト
GeminiでHTMLを作った直後は、見た目の完成度だけを見て共有しがちです。共有URLにする前に、同じAIへ「公開前チェック」を頼むと、抜けやすい外部送信や画像パスのミスに気づきやすくなります。
ただし、AIの指摘だけで安全確認を完了にしないことが大切です。AIには観点出しを任せ、最後はブラウザで実際に開いて、相手に見せてよい内容だけが残っているかを確認します。
- APIキー、メールアドレス、顧客名などがHTML内に残っていないか確認してもらう
- form action、fetch、外部scriptなど外部送信になりそうな箇所を列挙してもらう
- 画像・CSS・JSの参照が相対パスでまとまっているか確認してもらう
- スマホ幅で崩れそうな要素や長すぎるテキストを指摘してもらう
よくある質問
Geminiで生成したHTMLをそのままURLにできますか
はい。HTMLファイルをアップロードできるサービスを使えば、コードを貼り付けてファイルとして保存し、それをドロップするだけで共有URLを発行できます。サーバーの構築やデプロイ設定は不要です。相手はURLを開くだけで完成形を確認できます。
CSSや画像も含めて共有したい場合はどうすればいいですか
HTMLとCSS、画像などをまとめてZIPにしてアップロードすれば、一式をそのまま共有できます。ファイルを個別に渡すと画像が表示されないことがあるため、関連ファイルはまとめておくのがおすすめです。
社外に見せたくないページを安全に共有する方法はありますか
パスワード認証やメール認証、会社ドメイン認証などで閲覧できる相手を絞れます。公開期限を設定して一定期間で自動的に閲覧できなくすることもできます。検索除けのnoindexはアクセス制御ではないため、機密性が高い内容は認証で絞るのが確実です。
後からHTMLを修正したらリンクを送り直す必要がありますか
同じURLのままファイルを差し替えられるサービスなら、送り直す必要はありません。Geminiに修正を頼んで作り直したファイルをアップロードし直せば、相手は同じURLから最新版を確認できます。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。
Geminiに共有前チェックを頼むときは何を伝えるべきですか？
「このHTMLを社外レビュー用URLで共有する前提で、秘密情報・外部送信・画像パス・スマホ表示のリスクを箇条書きで確認して」と伝えると、見た目以外の確認観点を洗い出しやすくなります。AIの回答をそのまま信じ切らず、最後は実際の共有URLを別ブラウザで開いて確認してください。