---
title: "Replit Agentで生成した管理画面モックをレビュー用URLにして共有する方法"
description: "Replit Agentで作った管理画面モックのHTMLを安全にURL共有したいPMやエンジニア向けに、Replit特有の依存解消・認証設定・フィードバック収集のステップを具体的に解説する記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/replit-agent-admin-mock-review-url"
markdown: "https://giga-site.com/articles/replit-agent-admin-mock-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Replit Agentで生成した管理画面モックをレビュー用URLにして共有する方法

Replit Agentで管理画面のモックを生成した場合、ReplitのURLは共有できてもアクセス権の管理が難しく、社外の人に見せたくない場面では使いにくい。ギガサイト便にHTMLを移植すれば、会社ドメイン認証やパスワード保護を自由に組み合わせた安全なレビューURLを発行できる。本記事はその具体的な手順を解説する。

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

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

Replit AgentがCRUDを模した管理画面を生成する場合、fetch APIでローカルのモックサーバーからデータを取得する構成になっていることがある。このままReplitのURL以外で公開すると、モックサーバーへのリクエストが失敗してテーブルが空になったり、コンソールにエラーが並んだりする。公開前にデータをJSのオブジェクトとしてHTML内にハードコードする、またはJSONファイルを同梱する形に変換しておく必要がある。

管理画面のモックには「削除」「編集」「承認」などのアクションボタンが含まれることが多い。ボタンクリックで何も起きないか、またはエラーダイアログが出る場合、レビュアーが「バグがある」と誤解してしまう。ボタンにはtoast通知などで「この操作はモックです」と表示する処理を入れておくと、誤解なくUIの評価に集中してもらえる。

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

## URL化する前の確認点

Replitで管理画面のHTMLが完成したら、「Download as zip」でプロジェクト全体を取得し、ローカルのブラウザでindex.htmlを開いて表示を確認する。この時点でテーブルのデータが空だった場合、Replit上のAPIサーバーに依存したデータ取得が含まれている可能性が高い。NetworkタブでXHRリクエストを確認し、失敗しているエンドポイントをダミーデータに置き換える作業が必要だ。

管理画面のモックでは画面幅が1280px以上を想定したレイアウトが多いが、共有相手がノートPCの小さい画面で開いた場合に横スクロールが発生することがある。メディアクエリが設定されていないテーブルや固定幅のサイドバーが原因になりやすい。公開前に1024px幅のウィンドウでの表示も確認しておくと、「横スクロールが出る」というフィードバックを事前に防げる。

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

## 認証と期限の決め方

管理画面モックは機能要件の確認のために多くの部署が関わる。経営層・現場・エンジニアそれぞれに同じURLを渡しつつ、社外には公開しないという要件を満たすには会社ドメイン認証が最適だ。ドメイン一致でのアクセス制御は設定が1回で済み、部署異動や新メンバー追加のたびに招待リストを更新する必要がない。

管理画面モックのレビュー期間は開発フェーズのゲートに合わせるのが理想で、「設計承認ゲート前の3日間」のような設定をする。この期間が過ぎたらURLを失効させ、実装フェーズに移行したことを関係者に通知する。過去のモックURLが生き続けると「これは実装済みですか？」という問い合わせの原因になる。

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

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

管理画面のフィードバックでは「情報の密度が適切か」「よく使う操作にすぐアクセスできるか」「エラー状態の表示はわかりやすいか」の3軸で意見を集めると実装に直結する指摘が得られやすい。一般的な「使いやすかったです」より、「このページで○○の操作を探すのに10秒かかった」という具体的なコメントが価値が高い。

フィードバックが集まったあとは修正版を同じURLに差し替えてアップロードし、「v2：サイドバーのメニュー順序変更・テーブルにソート機能追加」のように変更点を列挙して通知する。変更点がわかっていれば、レビュアーは全画面を再確認する必要がなく、差分だけ確認すればよくなる。

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

## よくある質問

### 管理画面モックのテーブルデータをReplit APIから取得していた場合の対処法を教えてください。

fetchやaxiosの呼び出し部分をコメントアウトし、代わりにJSの配列リテラルでダミーデータをハードコードする。またはsample-data.jsonを同梱してfetch('./sample-data.json')でローカルから取得する構成に差し替えると静的ホスティングで動作する。

### アクションボタンのクリックで「これはモックです」と表示するには何を追加すればよいですか？

ボタンのonclick属性にalert('この操作はモックです')を追加するのが最も手軽。UIをこわさないよう画面右下にトースト通知を出すなら、CSSアニメーション付きのdivをJSで動的に挿入する20行程度のスニペットで実装できる。

### 管理画面のモックをスマートフォンからレビューすることはできますか？

URLを開くだけでスマートフォンからも確認できる。ただし管理画面はPCを前提にした固定幅レイアウトが多いため、スマホではレイアウトが崩れるケースがある。モバイル最適化の確認を目的とするなら、その旨を依頼文に明記して実機での確認をお願いする。

## 関連記事

- [Replit Agentで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/replit-agent-lp-draft-review-url/index.md)
- [Replit Agentで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/replit-agent-slide-html-review-url/index.md)
- [Replit Agentで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/replit-agent-form-page-review-url/index.md)
- [Replit Agentで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/replit-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": "Replit Agentで生成した管理画面モックをレビュー用URLにして共有する方法",
  "description": "Replit Agentで作った管理画面モックのHTMLを安全にURL共有したいPMやエンジニア向けに、Replit特有の依存解消・認証設定・フィードバック収集のステップを具体的に解説する記事。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/replit-agent-admin-mock-review-url",
  "url": "https://giga-site.com/articles/replit-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": "管理画面モックのテーブルデータをReplit APIから取得していた場合の対処法を教えてください。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "fetchやaxiosの呼び出し部分をコメントアウトし、代わりにJSの配列リテラルでダミーデータをハードコードする。またはsample-data.jsonを同梱してfetch('./sample-data.json')でローカルから取得する構成に差し替えると静的ホスティングで動作する。"
      }
    },
    {
      "@type": "Question",
      "name": "アクションボタンのクリックで「これはモックです」と表示するには何を追加すればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ボタンのonclick属性にalert('この操作はモックです')を追加するのが最も手軽。UIをこわさないよう画面右下にトースト通知を出すなら、CSSアニメーション付きのdivをJSで動的に挿入する20行程度のスニペットで実装できる。"
      }
    },
    {
      "@type": "Question",
      "name": "管理画面のモックをスマートフォンからレビューすることはできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "URLを開くだけでスマートフォンからも確認できる。ただし管理画面はPCを前提にした固定幅レイアウトが多いため、スマホではレイアウトが崩れるケースがある。モバイル最適化の確認を目的とするなら、その旨を依頼文に明記して実機での確認をお願いする。"
      }
    }
  ]
}
```