---
title: "Builder.io Visual Copilotで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法"
description: "完成度が低い段階でも早めに方向性を確認したいのがプロトタイプレビューの本音だ。Builder.io Visual Copilotの社内ツール風出力をSlackに貼っても崩れる問題を回避し、関係者がフィードバックを返しやすい環境をURLで整える手順を解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/builder-io-visual-copilot-internal-tool-prototype-review-url"
markdown: "https://giga-site.com/articles/builder-io-visual-copilot-internal-tool-prototype-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Builder.io Visual Copilotで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法

Builder.io Visual Copilotで社内ツール風のプロトタイプを生成した場合、完成度の低い段階から関係者に見せて方向性を確認したい場面が多い。しかしHTMLファイルをそのままSlackに貼ってもレイアウトが崩れ、フィードバックの質が下がる。ギガサイト便を使えば即座にURLを発行でき、チーム全員がブラウザで同じ状態を確認できる環境を数分で整えられる。

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

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

社内ツールのプロトタイプはデータ操作を模したJavaScriptを含むことが多く、`localStorage`や`sessionStorage`にダミーデータを書き込む処理が動いている場合がある。URLで共有するとレビュアーが操作したデータが自分のブラウザに残り続けるため、「ストレージをクリアしてから試してください」という案内が必要になる。

Builder.io Visual CopilotはFigmaコンポーネントと紐づいた出力を行うため、Figmaのアクセス権がないメンバーにはソースを共有できない問題がある。プロトタイプのHTMLをスタンドアロンで切り出してURL化することで、Figmaアカウントを持たない営業担当や経営層にも画面イメージを届けられる。

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

## URL化する前の確認点

社内ツールプロトタイプに含まれるJavaScriptの`fetch()`呼び出しを検索し、本番APIのエンドポイントURLが埋まっていないか確認する。ステージングのURLであっても、認証なしでアクセスできる状態なら外部URLからリクエストが飛んでしまう。モックデータはJSオブジェクトとしてHTML内に直接定義し、API呼び出しを完全に削除した状態でアップロードする。

権限ロールによって表示内容が変わる画面（管理者ビュー・一般ユーザービュー）が混在する場合は、ロールごとに別のHTMLを用意する方が分かりやすい。1つのHTMLにロール切り替えボタンを実装する方法もあるが、プロトタイプレビューでは「どのロールを見ているか」が分からなくなりやすいため注意が必要だ。

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

## 認証と期限の決め方

社内ツールプロトタイプのレビューは、社員全員が会社ドメインのメールを持っているなら会社ドメイン認証が最もシンプルだ。招待リストを管理する手間がなく、入社時点からアクセス可能になる。業務委託メンバーが別ドメインのメールを使っている場合は、個別にメール認証を追加する。

スプリント単位で開発しているなら、スプリント終了日の23:59を期限に設定するリズムが分かりやすい。次スプリントで更新版をアップロードしたら、前スプリントのURLを無効化することで「古いプロトタイプへのコメント」と「新しいプロトタイプへのコメント」が混在するのを防げる。

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

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

社内ツールのプロトタイプレビューでは「実際の業務フローに当てはめて操作してみてください」という依頼の仕方が有効だ。例えば「受注から請求書発行までの操作を5分でやってみてください」という課題を設定すると、UI上のつまずきポイントが自然と浮かび上がる。抽象的な「使いやすいですか」という質問よりずっと具体的な回答が得られる。

フィードバックを受けた後は「対応する・しない・次フェーズに持ち越す」の3択で仕分けして返答する。全指摘に対応しようとするとプロトタイプのスコープが広がり続けるため、レビュー段階で確認すべき範囲（画面遷移・ラベル・カラム構成など）を事前に定義しておくとよい。

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

## よくある質問

### プロトタイプに複数画面の遷移が含まれています。1つのHTMLにまとまっていないとURLで共有できませんか？

複数HTMLをzipにまとめてアップロードすることで対応できます。index.htmlをエントリーポイントにして、画面間のリンクを相対パスで記述しておけば、ZIP展開後に遷移が機能します。ただし全ページを1つのSPA的なHTMLにまとめる方が管理は楽です。

### Builder.io Visual CopilotはTailwind CSSを前提にした出力をします。PostCSSなしで動きますか？

Tailwind CSSのCDN版（play.tailwindcss.com経由のCDNリンク）を使えばPostCSSなしでも動作します。ただしCDN版はパフォーマンス最適化がされていないため、プロトタイプ確認用途に限定し、本番では適切にビルドする必要があります。

### 社内ツールプロトタイプを役員会議で見せたいのですが、会議室のWi-Fiが不安定です。オフラインで表示できますか？

ギガサイト便のURLはオンライン接続が必要です。オフライン対応が必要な場合は、HTMLとアセットをローカルに保存しておき、ブラウザでファイルを直接開く形で発表することをお勧めします。会議前日にPDFスクリーンショットをバックアップとして用意するとより安心です。

## 関連記事

- [Builder.io Visual Copilotで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/builder-io-visual-copilot-lp-draft-review-url/index.md)
- [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)
- [Firebase Studioで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/firebase-studio-internal-tool-prototype-review-url/index.md)
- [Google Stitchで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/google-stitch-internal-tool-prototype-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Builder.io Visual Copilotで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法",
  "description": "完成度が低い段階でも早めに方向性を確認したいのがプロトタイプレビューの本音だ。Builder.io Visual Copilotの社内ツール風出力をSlackに貼っても崩れる問題を回避し、関係者がフィードバックを返しやすい環境をURLで整える手順を解説する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/builder-io-visual-copilot-internal-tool-prototype-review-url",
  "url": "https://giga-site.com/articles/builder-io-visual-copilot-internal-tool-prototype-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": "プロトタイプに複数画面の遷移が含まれています。1つのHTMLにまとまっていないとURLで共有できませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "複数HTMLをzipにまとめてアップロードすることで対応できます。index.htmlをエントリーポイントにして、画面間のリンクを相対パスで記述しておけば、ZIP展開後に遷移が機能します。ただし全ページを1つのSPA的なHTMLにまとめる方が管理は楽です。"
      }
    },
    {
      "@type": "Question",
      "name": "Builder.io Visual CopilotはTailwind CSSを前提にした出力をします。PostCSSなしで動きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Tailwind CSSのCDN版（play.tailwindcss.com経由のCDNリンク）を使えばPostCSSなしでも動作します。ただしCDN版はパフォーマンス最適化がされていないため、プロトタイプ確認用途に限定し、本番では適切にビルドする必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "社内ツールプロトタイプを役員会議で見せたいのですが、会議室のWi-Fiが不安定です。オフラインで表示できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便のURLはオンライン接続が必要です。オフライン対応が必要な場合は、HTMLとアセットをローカルに保存しておき、ブラウザでファイルを直接開く形で発表することをお勧めします。会議前日にPDFスクリーンショットをバックアップとして用意するとより安心です。"
      }
    }
  ]
}
```