バイブコーディングの成果物は「共有」でつまずきやすい
バイブコーディングとは、AIと自然言語で会話しながら、細かい仕様を固める前に勢いよくコードを生成していくスタイルを指します。チャットに「こういうランディングページが欲しい」と伝えるだけで、HTMLやCSS、ちょっとしたJavaScriptまで一式が手元に揃うのは爽快です。
ところが、できあがったファイルを誰かに見てもらう段になると、急にハードルが上がります。HTMLファイルをそのままメールに添付しても、相手の環境によってはレイアウトが崩れたり、画像が表示されなかったりするからです。
かといって本格的に公開しようとすると、サーバーの契約やデプロイの設定が立ちはだかります。コードを書くのはAIに任せられても、公開作業の知識まで肩代わりしてくれるわけではない、というのがよくあるつまずきです。
ローカルのHTMLをそのまま送るのが難しい理由
手元で開けば正しく見えるHTMLでも、相手の手元では同じように見えるとは限りません。画像やCSSが別ファイルになっている場合、HTMLだけを送ると参照が切れて、文字だけの寂しい画面になってしまいます。
ZIPにまとめて渡す方法もありますが、相手に解凍とブラウザでの開き方を説明する手間が発生します。スマートフォンで確認したい相手にとっては、さらに面倒です。
つまり、バイブコーディングのスピード感を活かすには、ファイルを渡す方式ではなく「URLを送るだけ」で相手がそのまま閲覧できる仕組みが向いています。
- HTML単体を送ると画像やCSSの参照が切れることがある
- ZIPは相手に解凍と開く操作の手間をかける
- スマホで確認してもらいにくい
AI生成HTMLを共有する前の安全チェック
バイブコーディングで作ったHTMLを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
共有URLとして公開すれば、見せ方の悩みが減る
AIで作ったHTMLや、画像・CSS・JSをまとめたZIPを、認証付きの共有URLとして公開できるサービスを使えば、サーバーの構築やデプロイ設定なしで人に見せられます。リンクを送るだけで済むので、相手の環境に左右されにくいのが利点です。
たとえば「ギガサイト便」では、トップページにファイルをドロップすれば、登録なしでもその場で共有URLを発行できます。お試しで誰かに見せたいときに便利ですが、この匿名公開は検索エンジンに載らないようnoindexが付き、公開期限は7日間、アクセス回数にも一定の制限がかかります。
じっくり使うなら無料アカウントの作成がおすすめです。作ったサイトを一覧から管理でき、認証方式や公開期限を細かく設定できます。プロトタイプを何度も見せ合うバイブコーディングとは相性がよい使い方です。
AIで作ったHTMLを共有URLにする手順
難しい設定は不要です。バイブコーディングで手に入れたファイルを、次の流れで共有URLに変えられます。
ここではギガサイト便を例に、もっとも基本的な公開の流れを示します。画像やCSSが複数ファイルに分かれている場合は、まとめてZIPにしておくとリンク切れを防げます。
- AIに作らせたHTML一式を手元に用意する
- 画像やCSSが別ファイルなら一つのZIPにまとめる
- トップページにファイルをドロップしてアップロードする
- 発行された共有URLをコピーする
- リンクを見せたい相手に送る
「誰に見せるか」を選べると安心して共有できる
バイブコーディングの試作には、社外に出したくないアイデアや、関係者だけに確認してほしい内容が含まれることがあります。そんなときは、閲覧できる相手を絞る認証方式を選べると安心です。
用途に応じて選べる方式がいくつかあります。社内レビューなら会社のメールドメインを持つ人だけに限定し、特定の人に確認してほしいなら相手のメール宛にワンタイムで本人確認をする、といった使い分けができます。気軽に見せたいだけならリンクを知っている人が閲覧できる方式や、合言葉を伝えるパスワード認証も選べます。
公開期限を設定しておけば、期限切れで自動的に閲覧できなくなります。また、同じURLのままファイルを差し替えられるので、AIと一緒に何度も作り直しても、相手にリンクを送り直す必要がありません。アップロード時にはセキュリティスキャンが走り、APIキーらしき文字列や外部スクリプトへの依存といった兆候を検出して警告してくれるため、AI生成コードにありがちな見落としにも気づきやすくなります。
- URLのみ: リンクを知っていれば誰でも閲覧
- パスワード認証: 合言葉を伝えた人だけ閲覧
- メール認証: 指定したメール宛のワンタイムで本人確認
- 会社ドメイン認証: 指定ドメインのメールを持つ人だけ閲覧
スピード感を保ったまま、安全に見せる
バイブコーディングの良さは、思いついたらすぐ形にできるスピードです。その勢いを止めないためには、共有もまた数分で終わる手軽さであることが大事です。
ファイルをドロップしてURLを得て、相手に応じて見せ方を選ぶ。検索結果に出したくない試作にはnoindexが付き、関係者だけに絞りたいときは認証で守る。こうした選択肢があれば、作る速さと見せる安心を両立できます。
なお、公開されるのは静的なHTMLである点には注意してください。PHPのようなサーバー側の処理は動かないため、フォームの受信保存などを伴う機能はそのままでは動作しません。プロトタイプの見た目や動きを確認してもらう用途であれば、十分に力を発揮します。
よくある質問
バイブコーディングで作ったHTMLを無料で共有できますか
無料プランがあり、アカウントを作らずにファイルをドロップするだけでもその場で共有URLを発行できます。ただし登録なしの匿名公開はnoindexが付き、公開期限が7日間でアクセス回数にも制限があります。継続して使うなら無料アカウントの作成がおすすめです。
画像が複数あるHTMLはどう共有すればいいですか
画像やCSS、JavaScriptが別ファイルに分かれている場合は、HTML一式をまとめてZIPにしてからアップロードしてください。こうすることで参照が切れず、相手の画面でも正しく表示されます。リンクを送るだけで相手はそのまま閲覧できます。
社内の関係者だけに見せることはできますか
はい。会社ドメイン認証を使えば、指定したメールドメインを持つ人だけが閲覧できます。特定の個人に限定したい場合は、相手のメール宛にワンタイムで本人確認をするメール認証も選べます。用途に応じて見せる相手を絞れます。
後からHTMLを修正したらURLは変わりますか
同じURLのままファイルを差し替えられるため、リンクを送り直す必要はありません。AIと一緒に何度も作り直すバイブコーディングでも、相手には最初に伝えたURLをそのまま使ってもらえます。公開期限の設定や期限切れによる自動非公開も利用できます。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。