---
title: "WebSimで生成した管理画面モックをレビュー用URLにして共有する方法"
description: "WebSimで生成した管理画面モックをURLで共有したいデザイナー・エンジニア向け。認証方式の選び方から公開前チェックリスト・フィードバック回収の段取りまでを具体的に解説し、どの方式を選ぶべきか判断できる。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/websim-admin-mock-review-url"
markdown: "https://giga-site.com/articles/websim-admin-mock-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# WebSimで生成した管理画面モックをレビュー用URLにして共有する方法

WebSimで生成した管理画面モックは、ローカルで動いていても共有しようとした瞬間に壁にぶつかる。HTMLをメール添付すると相手の環境でCSSが崩れ、Slack貼り付けでは認証も期限管理もできない。ギガサイト便を使えばドラッグ&ドロップ3秒でURLが発行でき、パスワード・メール認証・期限の三段構えで「見せたい人にだけ・決めた期間だけ」公開できる。

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

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

管理画面モックはサイドバー・テーブル・モーダルが組み合わさるため、HTMLをそのままメール添付すると相手のブラウザでCSSが壊れたり外部フォントが読み込めなかったりする。Figmaで再現するほど工数もかけられず、かといってローカルのlive-serverのURLを社外へ伝えることもできない。

相手が受け取った後の動線も問題だ。ログインなしで開けるかどうかを確認せずに送ると、社内VPN必須の環境では開けないまま返信待ちになる。最低でも「PCのChromeで開いてください」「スマホでも縦向きで確認してください」と伝えないと、モバイル崩れを見落としたまま承認が進む。

さらに内部情報の混入リスクがある。WebSimのプロンプトに仮データとして実在する社員名やIPアドレスを入れてしまったモックをそのまま公開するケースが多い。送付前にHTML全文を検索し、固有名詞・メールアドレス・トークンらしき文字列を置換しておく必要がある。

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

## URL化する前の確認点

HTMLを開いてブラウザの開発者ツール（F12）でNetworkタブを確認する。form actionが本番APIエンドポイントを指していたり、script srcが社内GitLabから取得していたりすると、公開後に意図しない通信が発生する。モックならフォームを全部 action="#" onsubmit="return false;" にしておくのが安全だ。

画像・フォント・CSSのパスが相対パスで書かれている場合、HTMLファイル単体を共有するとアセットが解決できなくなる。ギガサイト便はHTMLと同梱アセットをzipでまとめてアップロードできるので、ディレクトリ構造を保ったまま圧縮して投入するとパスが崩れない。

APIキーやBearerトークンがJavaScriptの変数に埋め込まれていないか grep -r 'Bearer|apiKey|SECRET' で確認する。WebSimが生成するコードはコメント内にサンプルキーを残すことがある。公開前に必ず空文字かDUMMY_KEYに置き換えること。

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

## 認証と期限の決め方

デザインレビューの相手が社外のクライアント1名なら「メール認証」が最もトラブルが少ない。相手が自分のメールアドレスでワンタイムコードを受け取って入力するだけで、パスワードを別途連絡する手間がない。複数名でも招待メールを個別送信すれば誰がアクセスしたかのログが残る。

社内メンバーだけに限定したいなら「会社ドメイン認証」を使う。@yourcompany.co.jp のメールアドレスでログインした人だけが閲覧でき、退職者や外部委託先が誤ってアクセスするリスクを防げる。パスワードを全員に共有して後から変更し忘れるという運用ミスがなくなる。

期限は「レビュー締め切り+3日」を目安に設定する。締め切り当日は相手が慌てて見るので、少し余裕を持たせると修正依頼が落ち着いて届く。古いモックのURLが検索に残るとバージョン混乱が起きるため、期限後は自動で404になる設定にしておくこと。

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

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

送付メッセージには「確認してほしい観点を3点以内」に絞って書く。例えば「1. ナビゲーションの順序が直感的か 2. テーブルの列幅は十分か 3. モーダルの閉じ方が分かるか」のように番号で振ると、相手が何を見ればよいか迷わない。観点を絞らないと「全体的にいい感じ」という漠然とした返信しか来ない。

修正後も同じURLで見られるかどうかを必ず伝える。ギガサイト便では差し替え機能でURLを維持したままHTMLを更新できるため、「v2を別URLで送ります」という追い連絡が不要になる。ただし相手がすでに旧版を見ている最中に差し替えると混乱するので、「〇月〇日〇時以降に更新します」と予告するとよい。

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

## よくある質問

### 管理画面モックのURLを期限後に延長することはできますか？

ギガサイト便では期限をあとから延長できる。相手からレビューが遅れた場合も管理画面から日付を変更するだけで対応可能。事前に「延長するかもしれない」と伝えておくとスムーズ。

### 複数バージョンのモックを同時に公開して比較してもらうことはできますか？

それぞれ別のURLで発行できる。送付メッセージにA案・B案と明記し、それぞれのURLを並べて記載すると比較レビューが整理しやすい。期限は同じ日付に揃えると回収が楽になる。

### スマホで見た際にレイアウトが崩れていた場合、差し替え後に相手へ再通知すべきですか？

差し替えたら「URLは同じですが内容を更新しました」と一言添えて再通知するのが望ましい。相手がキャッシュを持っている場合は強制リロード（Ctrl+Shift+R）も案内すると確実。

## 関連記事

- [WebSimで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/websim-lp-draft-review-url/index.md)
- [WebSimで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/websim-slide-html-review-url/index.md)
- [WebSimで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/websim-form-page-review-url/index.md)
- [WebSimで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/websim-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": "WebSimで生成した管理画面モックをレビュー用URLにして共有する方法",
  "description": "WebSimで生成した管理画面モックをURLで共有したいデザイナー・エンジニア向け。認証方式の選び方から公開前チェックリスト・フィードバック回収の段取りまでを具体的に解説し、どの方式を選ぶべきか判断できる。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/websim-admin-mock-review-url",
  "url": "https://giga-site.com/articles/websim-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を期限後に延長することはできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便では期限をあとから延長できる。相手からレビューが遅れた場合も管理画面から日付を変更するだけで対応可能。事前に「延長するかもしれない」と伝えておくとスムーズ。"
      }
    },
    {
      "@type": "Question",
      "name": "複数バージョンのモックを同時に公開して比較してもらうことはできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "それぞれ別のURLで発行できる。送付メッセージにA案・B案と明記し、それぞれのURLを並べて記載すると比較レビューが整理しやすい。期限は同じ日付に揃えると回収が楽になる。"
      }
    },
    {
      "@type": "Question",
      "name": "スマホで見た際にレイアウトが崩れていた場合、差し替え後に相手へ再通知すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "差し替えたら「URLは同じですが内容を更新しました」と一言添えて再通知するのが望ましい。相手がキャッシュを持っている場合は強制リロード（Ctrl+Shift+R）も案内すると確実。"
      }
    }
  ]
}
```