Cursorで作ったHTMLは「動く状態」で共有したい
Cursorのチャットやエージェント機能を使えば、ランディングページの試作やドキュメント、ちょっとしたツールのUIが短時間でHTMLとして出来上がります。問題はその次で、エディタのプレビューで見えても、それは自分の手元だけの話です。レビュー相手やクライアントは同じ画面を見られません。
共有の手段としてコードをそのまま送る方法もありますが、受け取った側がブラウザで開いて初めて崩れに気づく、画像が表示されない、といったことが起こりがちです。完成イメージを正確に伝えるには、誰のパソコンでも同じように描画される「公開された状態」のリンクを渡すのが確実です。
一方で、本格的なホスティングサービスにデプロイするのは、設定項目が多く目的に対して重たく感じられます。試作の段階では、もっと軽い手段が欲しくなります。
単一ファイルかZIPか、構成で送り方が変わる
Cursorで生成したものが1枚のHTMLで完結しているのか、CSSやJS、画像ファイルを含む複数ファイル構成なのかで、共有時の扱いが少し変わります。まずは自分の成果物がどちらかを確認しておくと、後の手順が迷いません。
複数ファイルの場合、HTMLだけを送ってもスタイルや画像へのリンクが切れてしまいます。フォルダ一式をZIPにまとめておけば、関連ファイルの相対パスを保ったまま扱えるため、表示崩れを避けやすくなります。
なお、Cursorで動的な処理を組んだつもりでも、PHPのようなサーバー側の言語は静的公開では動きません。公開できるのはあくまでHTML・CSS・JavaScriptで完結する静的なページである点は、最初に押さえておくと安心です。
- 1枚で完結するHTMLは、そのファイルをそのまま扱える
- CSS・JS・画像を含むなら、フォルダごとZIPにまとめる
- 相対パスを崩さないよう、フォルダ構成は変えずに圧縮する
- サーバー側処理（PHP等）は静的公開では動かない点に注意
AI生成HTMLを共有する前の安全チェック
Cursorで生成したHTMLを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
ギガサイト便で共有URLを発行する手順
サーバーを用意せずに共有URLを作る方法として、ギガサイト便のような認証付き共有サービスを使う流れを紹介します。登録なしでも試せるため、まずは一度発行してみると感覚がつかめます。
- CursorでHTMLを書き出し、複数ファイルなら一式をZIPにまとめる
- トップページの投入欄に、そのファイルまたはZIPをドロップする
- その場で発行された共有URLを開き、表示崩れがないか確認する
- 続けて使うなら無料アカウントを作り、サイト一覧から管理する
- 必要に応じて認証方式や公開期限を設定して、リンクを相手に渡す
誰に見せるかを公開前に決めておく
試作やクライアント向けの成果物は、検索結果に出したくない、特定の人にだけ見せたい、というケースがほとんどです。共有URLは便利な反面、リンクが拡散すれば誰でも見られてしまうため、閲覧範囲をあらかじめ決めておくことが大切です。
ギガサイト便では閲覧の条件を選べます。リンクを知る人なら誰でも見られる「URLのみ」から、合言葉で絞る「パスワード認証」、指定したアドレス宛のワンタイムで本人確認する「メール認証」、自社の人だけに限定する「会社ドメイン認証」まで、相手との関係に応じて使い分けられます。
一時公開のページには検索エンジン向けの noindex が付き、通常は検索結果に出てきません。ただし noindex はあくまで検索除けであって、URLを知る人のアクセスを止めるものではありません。本当に見せたくない相手がいるなら、パスワードやドメイン認証といったアクセス制御を併用してください。
差し替え・期限・スキャンで運用がラクになる
レビューは一度で終わらないことが多く、Cursorで修正しては再共有する、を繰り返します。このとき、同じURLのままファイルを差し替えられると、相手にリンクを送り直す手間がなくなり、最新版だけを見てもらえます。
公開期限も設定でき、期限を過ぎると自動的に閲覧できなくなります。試作を出しっぱなしにして後から困る、という事態を防げます。誰がいつ見たかはアクセスログで確認でき、URL末尾のスラッグも編集して分かりやすくできます。
AIが生成したコードは、意図せず外部スクリプトに依存したり、APIキーらしき文字列が紛れ込んだりすることがあります。アップロード時のセキュリティスキャンがそうした兆候を検出して警告するため、公開前に一度立ち止まって内容を確認できます。検出されても、理解したうえで公開を選べます。
Cursor出力を共有前に切り分けるチェック
Cursorで生成したプロジェクトは、完成したHTMLだけでなく、作業用の設定ファイルや未使用のコンポーネントが同じフォルダに残りがちです。共有前には「相手がブラウザで見るために必要なもの」と「開発中だけ必要なもの」を分けてからZIP化します。
単一HTMLならそのファイルを、ViteやReactの構成ならビルド後のdistフォルダの中身だけを共有対象にすると、node_modulesや.envを誤って含めるリスクを下げられます。見た目が崩れる場合は、共有サービスの問題ではなく、画像やCSSの相対パスがずれているケースが多いので先に確認します。
- index.htmlをブラウザで直接開いて主要画面が見えるか確認する
- src、node_modules、.env、作業メモを公開ZIPに入れない
- 画像・CSS・JSが相対パスで読み込まれているか見る
- 修正版は同じURLで差し替える前提で、レビュー依頼文にもその旨を書く
よくある質問
Cursorで作ったHTMLをサーバーなしで共有できますか
はい、できます。書き出したHTMLや一式をまとめたZIPを共有サービスに投入すれば、サーバー構築やデプロイ設定なしで共有URLが発行されます。受け取った相手はリンクを開くだけで、同じ表示を確認できます。
共有したHTMLが検索結果に出てしまわないか心配です
一時公開のページには noindex が付くため、通常は検索結果に表示されません。ただし noindex は検索除けであり、アクセスを制限するものではありません。見せたくない相手がいる場合は、パスワード認証や会社ドメイン認証を併用してください。
CursorでHTMLを修正したら、URLは作り直しですか
作り直す必要はありません。同じURLのままファイルを差し替えられるため、レビュー中に何度修正しても、相手に新しいリンクを送り直さずに済みます。相手は常に最新版を見られます。
CSSや画像が表示されないときはどうすればよいですか
多くは関連ファイルが一緒に共有されていないことが原因です。CSS・JS・画像を含む構成なら、HTMLだけでなくフォルダ一式をZIPにまとめ、相対パスを保ったままアップロードしてください。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。
Cursorのプロジェクトフォルダを丸ごとZIPにして共有してもよいですか？
おすすめしません。node_modules、.env、未使用ファイル、作業メモまで混ざる可能性があります。静的に表示するために必要なHTML・CSS・JS・画像だけを別フォルダにまとめるか、ビルド後のdistフォルダの中身だけをZIPにして共有してください。