--- title: "Cursor Agentで生成した管理画面モックをレビュー用URLにして共有する方法" description: "Cursor Agentが数分で吐き出した管理画面モックを、Slackに貼るだけで相手が確認できる状態にするにはどうすればいいか。ファイル送付やローカルサーバーに頼らずURLを発行する方法をステップ別に解説する。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/cursor-agent-admin-mock-review-url" markdown: "https://giga-site.com/articles/cursor-agent-admin-mock-review-url/index.md" category: "AI活用" publishedAt: "2026-06-25" updatedAt: "2026-06-25" readingMinutes: 5 --- # Cursor Agentで生成した管理画面モックをレビュー用URLにして共有する方法 Cursor Agentで管理画面のHTMLモックを作成した後、それをチームやクライアントに見せる方法として「ファイルを送る」か「ローカルサーバーで共有する」しか選択肢がないと感じていないだろうか。URLを1本発行してSlackに貼るだけでレビューができるようになると、往復のやり取りが大幅に減る。管理画面モックを安全にURL共有するための手順と判断基準を解説する。 > Source HTML: https://giga-site.com/articles/cursor-agent-admin-mock-review-url > Article index: https://giga-site.com/articles/index.md ## 何が共有しづらいのか Cursor Agentが生成する管理画面モックは複数のHTMLファイルとCSS・JSで構成されることが多く、ZIPで送ると相手がフォルダを正しく展開しないとリンクが切れる。特にサイドバーのナビゲーションが``のような相対パスで別ページに遷移する構成では、ファイルの配置が一つでもずれると404になる。ZIPをそのままアップロードできてURLで配信してくれるサービスを使うと、この問題が根本的に解決する。 管理画面モックには「在庫数」「売上金額」「ユーザーID」など実業務を連想させる数値が並ぶ。Cursor Agentはプロンプトに書いた業務コンテキストを読み取ってリアルなダミーデータを生成するため、数字が現実的すぎて「これは本物のデータですか？」と聞かれることがある。`¥1,234,567`のような数値は`¥XX,XXX,XXX`に変え、ユーザーIDは`user-demo-001`のような明示的なテスト形式にしてから共有する。 - 相手がログインなしで開ける状態か確認する - PCとスマホで最低1回ずつ表示を確認する - 内部情報・個人情報・不要な外部送信が残っていないか見る - レビュー期限と修正時の差し替え方を決めておく ## URL化する前の確認点 管理画面のモックにはボタンクリックでAPIを呼ぶfetchやaxiosのコードがCursor Agentによって自動生成されることがある。本番のAPIエンドポイントや開発環境のURLが含まれていないかをファイル内で検索し、見つかった場合はURLを削除するか関数ごとコメントアウトする。レビュー用のモックでは、ボタン操作後に`alert('保存しました（デモ）')`を出すだけで十分だ。 管理画面にTable/List形式の大量データ表示がある場合、ブラウザがHTMLをレンダリングするのにかかる時間がURLを開いた瞬間の印象を左右する。Cursor Agentが1000行のダミーデータを生成することがあるが、レビュー目的では10〜20行で十分だ。不要な行を削除してHTMLを軽量化してからアップロードすることで、表示速度への不満が先行することを防げる。 - HTML内の外部script・form action・iframeを確認する - APIキーやトークンらしき文字列がないか検索する - 画像・CSS・JSのパスが公開後も解決できるか見る - noindexと認証を混同せず、必要なら両方設定する ## 認証と期限の決め方 発注元のクライアントに管理画面の仕様を確認してもらうフェーズでは、クライアント担当者のメールアドレスを許可リストに登録するメール認証が最適だ。外部のデザイン会社やフリーランスを交えた要件確認の場合は、各担当者のメールアドレスをリストに追加していけばURLは一本で管理できる。 開発スプリントごとにモックを更新する場合は、スプリントの終わりにURL期限が切れるよう設定すると、旧バージョンのモックが社内のWikiやSlackに残り続けることを防げる。スプリント期間が2週間なら期限を14日に設定し、新スプリントの開始時に新しいモックURLを発行して通知するサイクルにすると管理が楽だ。 - 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する - 特定の相手だけ: パスワードまたはメール認証を使う - 会社内だけ: 会社ドメイン認証を検討する - 短期レビュー: 期限を設定して古いURLを残さない ## 共有後のフィードバック回収 管理画面モックのレビュー依頼には「この画面でどの業務タスクをこなせますか？」という具体的な問いを設定する。「使いやすいですか」という質問では「はい」か「まあまあ」という返答しか来ないが、タスクベースで確認してもらうことで「注文のキャンセルをどこからするか分からなかった」という具体的な課題が上がってくる。 デザイナーとエンジニアのレビュアーでは見てほしい観点が異なる。デザイナーへは「情報の階層とレイアウトの密度感」を、エンジニアへは「API設計との整合性と実装コストの感覚」を見てほしい旨を個別にメッセージで伝える。同じURLを共有していても依頼内容を役割別にすることで、両者から役に立つフィードバックが返ってくる。 - 確認してほしい観点を3つ以内に絞る - 期限と返信先を明記する - 修正後も同じURLで見られるか伝える - 最終版と途中版が混ざらないようタイトルを付ける ## よくある質問 ### 管理画面モックのサイドバーリンクが全部URLで共有後に404になってしまう。なぜか？ HTMLファイルが複数ある場合、ZIPにまとめてアップロードしないと個別ファイルの相対リンクが解決できない。index.htmlと同階層に全HTMLファイルを入れてZIPにまとめ、トップページからのナビゲーションが機能するか手元のローカルサーバーで確認してからアップロードする。 ### Cursor Agentが生成したコードに本番のAPIキーが混入していないか確認するには？ VSCodeの「ファイル内を検索」機能で`sk-`・`Bearer `・`Authorization`・`apiKey`などのキーワードを全ファイルに対して検索する。ヒットした行を一つずつ確認し、実際のキー文字列は削除するかenv変数の参照に置き換えてからアップロードする。 ### クライアントが管理画面モックを印刷またはPDF保存して持ち出そうとする場合に対策はあるか？ HTMLのCSSで`@media print { body { display: none; } }`を追加すると印刷時に白紙になる。ただし根本的な情報流出防止には認証によるアクセス制限の方が重要で、URLを知っているだけでは閲覧できない状態にすることが先決だ。 ## 関連記事 - [Cursor Agentで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-lp-draft-review-url/index.md) - [Cursor Agentで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-slide-html-review-url/index.md) - [Cursor Agentで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-form-page-review-url/index.md) - [Cursor Agentで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-internal-tool-prototype-review-url/index.md) - [ChatGPT Agentで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/chatgpt-agent-admin-mock-review-url/index.md) - [Windsurf Agentで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/windsurf-agent-admin-mock-review-url/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "Cursor Agentで生成した管理画面モックをレビュー用URLにして共有する方法", "description": "Cursor Agentが数分で吐き出した管理画面モックを、Slackに貼るだけで相手が確認できる状態にするにはどうすればいいか。ファイル送付やローカルサーバーに頼らずURLを発行する方法をステップ別に解説する。", "datePublished": "2026-06-25", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/cursor-agent-admin-mock-review-url", "url": "https://giga-site.com/articles/cursor-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": "管理画面モックのサイドバーリンクが全部URLで共有後に404になってしまう。なぜか？", "acceptedAnswer": { "@type": "Answer", "text": "HTMLファイルが複数ある場合、ZIPにまとめてアップロードしないと個別ファイルの相対リンクが解決できない。index.htmlと同階層に全HTMLファイルを入れてZIPにまとめ、トップページからのナビゲーションが機能するか手元のローカルサーバーで確認してからアップロードする。" } }, { "@type": "Question", "name": "Cursor Agentが生成したコードに本番のAPIキーが混入していないか確認するには？", "acceptedAnswer": { "@type": "Answer", "text": "VSCodeの「ファイル内を検索」機能で`sk-`・`Bearer `・`Authorization`・`apiKey`などのキーワードを全ファイルに対して検索する。ヒットした行を一つずつ確認し、実際のキー文字列は削除するかenv変数の参照に置き換えてからアップロードする。" } }, { "@type": "Question", "name": "クライアントが管理画面モックを印刷またはPDF保存して持ち出そうとする場合に対策はあるか？", "acceptedAnswer": { "@type": "Answer", "text": "HTMLのCSSで`@media print { body { display: none; } }`を追加すると印刷時に白紙になる。ただし根本的な情報流出防止には認証によるアクセス制限の方が重要で、URLを知っているだけでは閲覧できない状態にすることが先決だ。" } } ] } ```