何が共有しづらいのか
ChatGPT Agentが生成した管理画面モックは、テーブルやサイドバーなど複数のUIコンポーネントを1ファイルに展開するため、ファイルサイズが数百KBになることがある。Slackのプレビューでは崩れて表示され、添付ZIPをダウンロードしてもらっても「どのブラウザで開けばいい？」という質問が返ってくることが多い。
管理画面モックには「ユーザー一覧」「売上ダッシュボード」などのダミーデータが埋め込まれていがちで、社外レビュアーに送る前に個人情報らしき文字列が混入していないかを確認する必要がある。URLで共有すればダウンロード不要で開けるうえ、アクセスログが残るので誰がいつ閲覧したかも把握できる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
管理画面モックでは `<script src="https://cdn.example.com/...">`のような外部CDN参照が多い。公開後にそのCDNがダウンすると画面が白くなるため、使用しているライブラリのバージョンとURLが有効かブラウザのDevToolsのNetworkタブで確認しておく。
モックのHTMLをテキストエディタで開き、`fetch(`や`axios.post(`などの文字列を検索する。ChatGPT Agentがサンプルとして埋め込んだAPIエンドポイントや認証トークンが残っている場合は、ダミー値に置き換えるかコメントアウトしてから公開する。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
社内デザインレビューなら会社ドメイン認証（例：@yourcompany.co.jpのみ閲覧可）が最も手軽で、招待リストの管理が不要になる。外部のクライアントやフリーランサーに見せる場合はパスワード認証を選び、パスワードは口頭か別経路で伝えると漏洩リスクが下がる。
管理画面モックは仕様変更で頻繁に差し替わるため、初回共有時に「このURLは○○日まで有効」と期限を明記しておく。期限切れ後も古いURLが検索エンジンにインデックスされないよう、共有ツール側でnoindexが設定されているか事前に確認しておくと安全だ。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
管理画面レビューでは「全体的にどう？」という質問では抽象的な回答しか返ってこない。「左サイドバーのナビゲーション順序」「テーブルのソート操作のわかりやすさ」など、確認してほしい箇所を具体的に3点以内に絞ってURLと一緒に共有する。
修正後に同じURLで最新版を確認できる場合は、その旨をコメントに書いておくと「v1とv2どっちを見ればいい？」という混乱がなくなる。最終承認版と作業中バージョンを別URLで管理し、ファイル名にも日付かバージョン番号を付けておくと後追いがしやすい。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
管理画面モックに含まれるダミーデータは公開前に必ず削除すべきですか？
氏名・メールアドレス・電話番号など個人情報に見える文字列は削除または明示的なダミー値（例：田中太郎、test@example.com）に置き換えてから公開してください。ランダムな英数字でも実在の情報と紛らわしい場合は同様です。
パスワード認証と会社ドメイン認証はどちらを選ぶべきですか？
社内メンバーだけが対象なら会社ドメイン認証が管理不要で便利です。外部クライアントや複数社が混在するレビューでは、ドメインを限定できないためパスワード認証を選びパスワードは別経路で伝えましょう。
ChatGPT Agentが生成したHTMLに外部CDNへの参照が多い場合、どう対処しますか？
CDN参照を全てインライン化するか、信頼性の高い公式CDN（jsDelivr・unpkgなど）に統一してください。開発中のモックであれば参照先URLをコメントに残しつつ、ローカルコピーをHTMLに同梱してZIP化する方法も有効です。