Lovableで作れるものと共有時の悩み
Lovableは、自然言語の指示からReactベースのWebアプリやランディングページを生成できるツールとして知られています。画面の構成やボタンの挙動を会話で調整しながら、見た目の整ったプロトタイプを短時間で組み立てられるのが特徴です。
一方で、できあがったものをクライアントやチームに見せる段になると悩みが生まれます。プレビュー用のURLをそのまま渡すと誰でもアクセスできてしまう場合があり、レビュー前の試作を不特定多数に見られたくないというニーズに応えにくいことがあります。
公開範囲を絞りたい、いつまで見せるかを決めたい、検索結果に出したくない。こうした要望を一度に満たそうとすると、別の仕組みを挟む必要が出てきます。
Lovableからコードを取り出す
Lovableで作ったアプリを手元で扱うには、まず生成物をエクスポートします。プロジェクトの設定からコードをダウンロードする、あるいは接続したリポジトリ経由でソースを取得する形が一般的です。UIの呼び名はバージョンによって変わる場合があるため、エクスポートや書き出しに当たる項目を探してみてください。
取り出したコードがビルド前のプロジェクト一式であれば、ローカルでビルドして静的なHTML/CSS/JSの形にしておくと共有がスムーズです。ビルド結果のフォルダをまとめてZIPにしておけば、画像やスタイルを含めて一括で扱えます。
- プロジェクト設定からコードをダウンロードする
- 接続済みリポジトリからソースを取得する
- ローカルでビルドして静的ファイルを生成する
AI生成HTMLを共有する前の安全チェック
Lovableで作ったアプリをURLで共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
静的ファイルにまとめる際の注意点
Lovableのアプリがバックエンドや外部APIに依存している場合、静的ファイルだけでは一部の機能が動かないことがあります。共有の目的が見た目や画面遷移の確認であれば問題になりにくいですが、データ取得を伴う機能まで見せたいときは、デモ用のデータを用意するなどの工夫が役立ちます。
ファイル構成はトップにindex.htmlを置き、CSSや画像は相対パスで参照する形にしておくと崩れにくくなります。フォルダ全体をZIPにまとめれば、構造を保ったまま共有できます。
ギガサイト便で共有URLを発行する手順
ギガサイト便は、AIで作ったHTMLやZIPを認証付きの共有URLで見せるためのサービスです。Cloudflare上で動作し、登録なしでも即時に公開できます。Lovableから取り出したファイルを、次の順序でアップロードします。
アップロードは登録なしでも進められるので、思い立ったときにすぐ共有用のURLを用意できます。HTMLが1枚でも、ビルド結果をまとめたフォルダのZIPでも、同じ流れで公開できます。
- ギガサイト便のトップにHTMLファイル、またはビルド結果をまとめたZIPをドラッグ&ドロップする
- 認証方式を選ぶ（URLのみ、パスワード、メール認証、会社ドメイン認証から選択）
- 公開期限を設定する（無料プランは7日まで）
- 発行された共有URLをクライアントやチームに送る
認証と期限の使いどころ
誰に見せるかによって認証方式を選ぶと安心です。社内の限られたメンバーなら会社ドメイン認証、社外の特定の相手にはメール認証やパスワードが向いています。とりあえず関係者だけにリンクを回したい段階ならURLのみでも始められます。
公開期限を設定しておくと、レビュー期間が終わった後にURLが自動で失効します。試作段階のアプリを長く放置せずに済むため、情報の出しっぱなしを避けられます。差し替えが必要になっても、同じURLのまま中身を更新できるので、相手に新しいリンクを送り直す手間がかかりません。
公開前のセキュリティと検索対策
ギガサイト便では、公開前に自動でセキュリティスキャンが行われます。アップロードしたファイルをそのまま見せる前に一通りチェックが入るため、初めて共有するときの不安を抑えやすくなっています。
また、既定でnoindexが設定されているため、共有したアプリが検索結果に表示されにくくなっています。レビュー前の試作を意図せず公開状態にしてしまうリスクを下げられます。
よくある質問
Lovableのプレビューリンクをそのまま渡すのと何が違いますか。
プレビューリンクはアクセス制御が限られる場合があります。ギガサイト便を挟むと、パスワードやメール認証で見せる相手を絞れます。公開期限による自動失効も設定できます。
アプリのバックエンド機能も共有できますか。
ギガサイト便は静的なHTMLやZIPを共有する仕組みです。サーバー側で動く機能はそのままでは動作しないことがあります。見た目や画面遷移の確認用途であれば問題になりにくいです。
登録しないと使えませんか。
登録なしでも即時に公開できます。継続的に使う場合やより多くの機能を使いたい場合に、プランを検討するとよいでしょう。
公開したアプリを後から修正したい場合はどうしますか。
同じURLのまま中身を差し替えられます。Lovableで修正してファイルを作り直し、再アップロードすれば、相手に新しいリンクを送り直す必要はありません。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。