---
title: "Builder.io Visual Copilotで生成した管理画面モックをレビュー用URLにして共有する方法"
description: "データテーブルやモーダルが絡む管理画面のHTMLをメール添付すると、開く環境によってレイアウトが崩れる問題が起きやすい。Builder.io Visual Copilotの生成物を迅速に共有するため、ギガサイト便で認証付きURLを発行する方法と落とし穴を解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/builder-io-visual-copilot-admin-mock-review-url"
markdown: "https://giga-site.com/articles/builder-io-visual-copilot-admin-mock-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をそのままメール添付すると、開く環境によってレイアウトが崩れる。ギガサイト便ならHTMLかzipをアップロードするだけで、社内メンバー限定のプレビューURLを即座に発行できる。

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

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

管理画面モックはサイドバー・ヘッダー・テーブル・モーダルなど複数コンポーネントが組み合わさるため、HTMLが単体で完結しないケースが多い。Builder.io Visual Copilotが出力したコードに`import`文が残っていたり、Tailwindの設定ファイルを参照したりしている場合、ビルドなしで開いても白紙になる。単一ファイルとして配布するには、インラインCSS化またはスタンドアロンビルドが必要だ。

「仮の権限マトリクス」や「ダミーのユーザー名リスト」が埋め込まれた管理画面モックは、組織外に漏れると誤解を招く可能性がある。特に採用候補者や外部パートナーに誤って共有されるリスクを考えると、ドメイン認証（会社のメールアドレスのみアクセス可）を設定する価値がある。

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

## URL化する前の確認点

管理画面モックにはHTTPリクエストをシミュレートするJavaScriptが含まれることがある。`fetch(`や`axios.get(`の呼び出し先が実在するエンドポイントでないか確認し、誤って本番APIを叩いてしまわないようにする。モック専用のJSONファイルにすり替えるか、API呼び出し部分をコメントアウトしてからアップロードするのが安全だ。

テーブルに表示するダミーデータとして、実在する人名・メールアドレス・電話番号を使っていないかもチェックする。「山田太郎」「yamada@example.com」程度なら問題ないが、実際の社員名や顧客名が混入しているとプライバシー上の問題になる。テストデータは必ずフィクションのものを使う。

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

## 認証と期限の決め方

管理画面モックのレビューは、アクセスできる人を開発チーム・PdM・デザインチームに限定するのが一般的だ。会社ドメイン認証を使うと、招待リストを管理しなくてもドメインさえ合っていれば誰でも入れるため、スタートアップや少人数チームに向いている。ただし、業務委託の外部メンバーが別ドメインのメールを使っている場合は個別にメール認証を追加する必要がある。

スプリントレビュー用に共有する場合は、スプリント終了日の翌朝を期限にすると管理が楽だ。期限が来ると自動的にURLが無効になるため、「古い画面を参照してバグを登録してしまった」というすれ違いを防げる。次のスプリントで更新版を出したら新たに発行し直すサイクルを回す。

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

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

管理画面モックへのフィードバックは「ナビゲーション構造の妥当性」「一覧画面のソート・フィルター設計」「エラー表示のタイミング」など機能ごとに分けて聞くと整理しやすい。モックを見た第一印象を書いてもらうよりも、「このボタンを押したら次に何が起きると思いますか」という具体的な質問の方が有益な情報を得やすい。

修正後に「v1との差分」を伝えることが重要だ。変更箇所が多い場合は、スクリーンショットを並べた比較表をSlackに貼り、レビュアーが確認ポイントをすぐ把握できるようにする。変更ログを残すことで、後から「なぜこのデザインにしたか」という意思決定の根拠も追跡できる。

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

## よくある質問

### 管理画面モックにChartJSなどのグラフライブラリを使っています。CDN参照のままでも正しく表示されますか？

インターネットに接続された環境であれば、CDN参照のままで問題なく表示されます。社内ネットワークで外部CDNへのアクセスが制限されている場合は、ライブラリをローカルに落としてzipに同梱してからアップロードしてください。

### モックのデータテーブルに100行以上のダミーデータがあります。ページネーションはモック上で動作しますか？

JavaScriptによるクライアントサイドのページネーションであれば動作します。サーバーAPIからデータを取得する実装の場合は、モック用のJSONファイルをローカルで返すように書き換えてからアップロードしてください。

### 外部の業務委託メンバーにも見せたいのですが、会社ドメイン認証では弾かれてしまいます。どうすればよいですか？

会社ドメイン認証と個別メール認証を併用できます。外部メンバーのメールアドレスを個別に許可リストへ追加するか、共通パスワードを設定してパスワード認証に切り替える方法もあります。

## 関連記事

- [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で生成した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で生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/firebase-studio-admin-mock-review-url/index.md)
- [Google Stitchで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/google-stitch-admin-mock-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Builder.io Visual Copilotで生成した管理画面モックをレビュー用URLにして共有する方法",
  "description": "データテーブルやモーダルが絡む管理画面のHTMLをメール添付すると、開く環境によってレイアウトが崩れる問題が起きやすい。Builder.io Visual Copilotの生成物を迅速に共有するため、ギガサイト便で認証付きURLを発行する方法と落とし穴を解説する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/builder-io-visual-copilot-admin-mock-review-url",
  "url": "https://giga-site.com/articles/builder-io-visual-copilot-admin-mock-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": "管理画面モックにChartJSなどのグラフライブラリを使っています。CDN参照のままでも正しく表示されますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "インターネットに接続された環境であれば、CDN参照のままで問題なく表示されます。社内ネットワークで外部CDNへのアクセスが制限されている場合は、ライブラリをローカルに落としてzipに同梱してからアップロードしてください。"
      }
    },
    {
      "@type": "Question",
      "name": "モックのデータテーブルに100行以上のダミーデータがあります。ページネーションはモック上で動作しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JavaScriptによるクライアントサイドのページネーションであれば動作します。サーバーAPIからデータを取得する実装の場合は、モック用のJSONファイルをローカルで返すように書き換えてからアップロードしてください。"
      }
    },
    {
      "@type": "Question",
      "name": "外部の業務委託メンバーにも見せたいのですが、会社ドメイン認証では弾かれてしまいます。どうすればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "会社ドメイン認証と個別メール認証を併用できます。外部メンバーのメールアドレスを個別に許可リストへ追加するか、共通パスワードを設定してパスワード認証に切り替える方法もあります。"
      }
    }
  ]
}
```