---
title: "Windsurf Agentで生成した管理画面モックをレビュー用URLにして共有する方法"
description: "Windsurf Agentで作った管理画面モックのHTMLを安全にURL公開したいエンジニアやPM向けに、内部情報の漏洩リスクを下げながらレビューURLを発行するための具体的な手順を解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/windsurf-agent-admin-mock-review-url"
markdown: "https://giga-site.com/articles/windsurf-agent-admin-mock-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Windsurf Agentで生成した管理画面モックをレビュー用URLにして共有する方法

Windsurf Agentで管理画面のモックを生成したとき、社内の関係者や発注先に見せる方法として「スクリーンショットを貼る」手段はインタラクションが伝わらない。実際にブラウザで触れるHTMLをURLとして共有することで、ボタンのホバー状態やタブ切り替えの動きを含めたレビューが可能になる。本記事ではその手順と注意点を整理する。

> Source HTML: https://giga-site.com/articles/windsurf-agent-admin-mock-review-url
> Article index: https://giga-site.com/articles/index.md

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

管理画面モックには、開発中のデータ構造を反映したダミーの数値や社員名・顧客名などのサンプルデータが含まれることが多い。それらが実在する情報に見えてしまうと、共有先が混乱したり、場合によっては情報漏洩とみなされるリスクがある。共有前に全てのテキストがフィクションであることを確認し、本物に見えるデータは置き換えておく必要がある。

管理画面モックはPC表示を前提にデザインされることが多いが、モバイルで開いた際のレイアウト崩れを確認しないまま共有すると、スマホでレビューした相手から「崩れている」という報告が届く。共有前にChrome DevToolsのデバイスエミュレーションでタブレット・スマホ表示を確認しておくと、こうした誤解を防げる。

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

## URL化する前の確認点

Windsurf Agentが生成した管理画面HTMLには、モックのAPIコールを示すfetchやaxiosのコードが残っていることがある。公開後にこれらが実際のAPIエンドポイントに向いていると、意図しないリクエストが飛ぶ可能性がある。`grep -r 'fetch\|axios\|XHR' .`で一括検索し、外部URLへの通信がないかを確かめてから公開する。

CSSやJSをCDNから読み込んでいる場合、CDNのURLが将来変わっても表示が壊れないよう、ファイルをローカルにコピーしてHTMLと同梱することを検討する。特にTailwind CSSのPlayCDNはあくまで開発用途のため、レビュー期間が長引く場合はビルド済みのCSSに差し替えるほうが安定する。

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

## 認証と期限の決め方

管理画面モックは社内のステークホルダーに限定して見せるケースが大半だ。会社ドメイン認証を使えば「@example.co.jpのメールアドレスを持つ人だけ閲覧可」と設定でき、招待リストを管理する手間が省ける。パスワード共有と違い、パスワードが外部に転送されるリスクもない。

開発フェーズが進むにつれてモックの内容は陳腐化していく。期限を開発スプリントの終了日に合わせて設定しておくと、古いモックが参照され続けて混乱を招く事態を防げる。スプリントごとに新しいURLを発行し、Slackの固定メッセージを更新する運用が実際のチームでは定着しやすい。

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

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

管理画面モックのレビューでは、画面遷移の漏れやボタンの配置に関する意見が集中しやすい。フィードバックテンプレートを用意し「一覧画面・詳細画面・設定画面のそれぞれについて操作上の違和感を記載してください」と指示すると、網羅的なレビューが得られる。自由記述だけに頼ると特定の画面だけに意見が偏りがちだ。

フィードバックを受け取ったあと、修正版を同じURLに上書きアップロードして「URLは変わりません、もう一度ご確認ください」と通知する流れが最もシンプルだ。ただし複数人が同時にレビュー中に上書きすると見ている版が変わってしまうため、全員の初回確認が終わってから差し替えるタイミングを調整するとよい。

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

## よくある質問

### 管理画面モックに含まれるダミーデータはどの程度リアルに作ってよいですか？

氏名・電話番号・メールアドレスは実在しないものを使う。会社名は「株式会社サンプル」のような明らかにフィクションとわかる表記にする。数値データは桁数が実態に近いほど使い勝手の確認に役立つが、実際の売上数字の流用は避けること。

### WindsurfのAgentが複数HTMLファイルを生成した場合、全部まとめてURLにできますか？

フォルダ構造を保ったままZIPに圧縮してアップロードすれば、複数HTMLファイルをまとめて公開できる。index.htmlが起点となるため、各画面へのリンクをindex.htmlに設けておくとレビュアーが迷わない。

### レビュー後にモックを完全に削除したい場合はどうすればよいですか？

ギガサイト便の管理画面からURLを失効または削除すればアクセス不能になる。クライアントのブラウザキャッシュに残ることもあるため、削除と同時に「このURLは終了しました」と通知しておくとよい。

## 関連記事

- [Windsurf Agentで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/windsurf-agent-lp-draft-review-url/index.md)
- [Windsurf Agentで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/windsurf-agent-slide-html-review-url/index.md)
- [Windsurf Agentで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/windsurf-agent-form-page-review-url/index.md)
- [Windsurf Agentで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/windsurf-agent-internal-tool-prototype-review-url/index.md)
- [ChatGPT Agentで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/chatgpt-agent-admin-mock-review-url/index.md)
- [Cursor Agentで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-admin-mock-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Windsurf Agentで生成した管理画面モックをレビュー用URLにして共有する方法",
  "description": "Windsurf Agentで作った管理画面モックのHTMLを安全にURL公開したいエンジニアやPM向けに、内部情報の漏洩リスクを下げながらレビューURLを発行するための具体的な手順を解説する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/windsurf-agent-admin-mock-review-url",
  "url": "https://giga-site.com/articles/windsurf-agent-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": "管理画面モックに含まれるダミーデータはどの程度リアルに作ってよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "氏名・電話番号・メールアドレスは実在しないものを使う。会社名は「株式会社サンプル」のような明らかにフィクションとわかる表記にする。数値データは桁数が実態に近いほど使い勝手の確認に役立つが、実際の売上数字の流用は避けること。"
      }
    },
    {
      "@type": "Question",
      "name": "WindsurfのAgentが複数HTMLファイルを生成した場合、全部まとめてURLにできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォルダ構造を保ったままZIPに圧縮してアップロードすれば、複数HTMLファイルをまとめて公開できる。index.htmlが起点となるため、各画面へのリンクをindex.htmlに設けておくとレビュアーが迷わない。"
      }
    },
    {
      "@type": "Question",
      "name": "レビュー後にモックを完全に削除したい場合はどうすればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便の管理画面からURLを失効または削除すればアクセス不能になる。クライアントのブラウザキャッシュに残ることもあるため、削除と同時に「このURLは終了しました」と通知しておくとよい。"
      }
    }
  ]
}
```