---
title: "Builder.io Visual Copilotで生成したLP案をレビュー用URLにして共有する方法"
description: "FigmaからLP案を自動生成できても、その成果物をどう関係者に届けるかは別の課題になる。Builder.io Visual CopilotのHTML出力を環境崩れなく共有し、マーケターやディレクターが即座にブラウザで確認できるURL発行の手順を説明する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/builder-io-visual-copilot-lp-draft-review-url"
markdown: "https://giga-site.com/articles/builder-io-visual-copilot-lp-draft-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Builder.io Visual Copilotで生成したLP案をレビュー用URLにして共有する方法

Builder.io Visual CopilotでFigmaデザインからLP案を自動生成したものの、その成果物をどう関係者に届けるかは別問題だ。生成されたHTMLをそのまま送っても、開く環境によって崩れるし、Slackに貼ったファイルは誰でも転送できる。ギガサイト便を使えばドラッグ1回でパスワード保護のプレビューURLが作れ、クライアントや上長に「見てください」と送れる状態になる。

> Source HTML: https://giga-site.com/articles/builder-io-visual-copilot-lp-draft-review-url
> Article index: https://giga-site.com/articles/index.md

## 何が共有しづらいのか

Builder.io Visual CopilotはFigmaからReactやHTMLを書き出す際、プロジェクト固有のデザイントークンやCSSカスタムプロパティを参照する構造になっていることが多い。これをそのまま単一HTMLとして渡すと、トークンが未解決のまま表示されてスタイルが当たらないという問題が起きる。LP案を見せるだけなら、出力後にトークンをベタ値に展開するワンステップを挟む必要がある。

また、LP案の段階では「競合調査を反映したキャッチコピー」や「未公開のキャンペーン価格」が含まれていることがある。これを添付ファイルで送ると、受け取った側が誤って外部に転送するリスクが生まれる。URLに期限とパスワードを設定することで、情報の流通範囲を意図した範囲に絞り込める。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## URL化する前の確認点

HTMLファイルを開いて`<link rel="stylesheet">`の参照先を確認する。Figmaプロジェクト内のプライベートアセットやBuilder.io独自のCDNを参照している場合、公開URL上では読み込めない可能性がある。該当する外部CSSはインライン化するか、公開CDNのURLに差し替えてからアップロードする。

LP案には「価格交渉中の数値」や「ローンチ前の商品名」が入ることが多い。公開前に`Ctrl+F`でダミーテキストの検索ワード（例: `TODO`、`TBD`、`XX円`）を確認し、意図せず本番情報が入っていないかチェックする。機密度によってはURLのアクセスログを取得できる設定を選ぶとよい。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 認証と期限の決め方

クライアント向けLP案のレビューは、パスワード認証が最もスムーズだ。打ち合わせの冒頭でパスワードを口頭で伝え、その場でURLを開いてもらう形にすると、事前に「見た・見ていない」という行き違いがなくなる。パスワードはミーティング終了後に無効化することも考慮する。

「複数回の修正を経て最終承認」というフローなら、バージョンごとにURLを発行するより同じURLを差し替える方式が混乱しにくい。ただし、「前のバージョンも残しておいてほしい」という要望が出ることがあるため、差し替え前にはスクリーンショットをドキュメントに貼り付けて履歴を残しておく。

- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない

## 共有後のフィードバック回収

LP案のフィードバックは「ファーストビューの訴求力」「CTAボタンの視認性」「価格表示の説得力」の3点を明示して依頼するとコメントが具体的になる。「全体的にどう思いますか」という聞き方だと、デザインの好みに関する感想ばかりが集まり、修正優先度が判断しにくい。

フィードバックをもらったら修正版をアップロードし、変更点を箇条書きで添える。「ファーストビューのコピーを変更しました」「CTAボタンを赤から青に変更しました」という形で変更ログを残すと、次のレビューで同じ指摘が繰り返されることを防げる。

- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける

## よくある質問

### Builder.io Visual CopilotはReactコードを出力しますが、HTMLに変換しないとギガサイト便で共有できませんか？

Reactコンポーネントのままでは共有できません。`react-scripts build`などでビルドしてHTMLと静的アセットを生成するか、Visual Copilotの「Export as HTML」オプションを使ってHTMLを書き出してからアップロードしてください。

### LP案に動画背景（.mp4）が含まれています。zipでまとめてアップロードできますか？

はい、HTMLと動画ファイルをzipにまとめてアップロードできます。HTML内の動画パスが相対パスになっていることを確認してから圧縮してください。zipの展開後にディレクトリ構造が保たれていれば、そのまま表示されます。

### クライアントがパスワードを忘れた場合、再発行は簡単にできますか？

管理画面からパスワードをいつでも変更できます。変更後は新しいパスワードをクライアントに共有するだけで、URLは変わりません。変更と同時に旧パスワードは無効になるため、セキュリティ面でも安心です。

## 関連記事

- [Builder.io Visual Copilotで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/builder-io-visual-copilot-admin-mock-review-url/index.md)
- [Builder.io Visual Copilotで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/builder-io-visual-copilot-slide-html-review-url/index.md)
- [Builder.io Visual Copilotで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/builder-io-visual-copilot-form-page-review-url/index.md)
- [Builder.io Visual Copilotで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/builder-io-visual-copilot-internal-tool-prototype-review-url/index.md)
- [Firebase Studioで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/firebase-studio-lp-draft-review-url/index.md)
- [Google Stitchで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/google-stitch-lp-draft-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Builder.io Visual Copilotで生成したLP案をレビュー用URLにして共有する方法",
  "description": "FigmaからLP案を自動生成できても、その成果物をどう関係者に届けるかは別の課題になる。Builder.io Visual CopilotのHTML出力を環境崩れなく共有し、マーケターやディレクターが即座にブラウザで確認できるURL発行の手順を説明する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/builder-io-visual-copilot-lp-draft-review-url",
  "url": "https://giga-site.com/articles/builder-io-visual-copilot-lp-draft-review-url",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Builder.io Visual CopilotはReactコードを出力しますが、HTMLに変換しないとギガサイト便で共有できませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Reactコンポーネントのままでは共有できません。`react-scripts build`などでビルドしてHTMLと静的アセットを生成するか、Visual Copilotの「Export as HTML」オプションを使ってHTMLを書き出してからアップロードしてください。"
      }
    },
    {
      "@type": "Question",
      "name": "LP案に動画背景（.mp4）が含まれています。zipでまとめてアップロードできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい、HTMLと動画ファイルをzipにまとめてアップロードできます。HTML内の動画パスが相対パスになっていることを確認してから圧縮してください。zipの展開後にディレクトリ構造が保たれていれば、そのまま表示されます。"
      }
    },
    {
      "@type": "Question",
      "name": "クライアントがパスワードを忘れた場合、再発行は簡単にできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "管理画面からパスワードをいつでも変更できます。変更後は新しいパスワードをクライアントに共有するだけで、URLは変わりません。変更と同時に旧パスワードは無効になるため、セキュリティ面でも安心です。"
      }
    }
  ]
}
```