---
title: "Claude Codeで生成した管理画面モックをレビュー用URLにして共有する方法"
description: "管理画面モックをHTMLで渡しても「CSSが当たらなかった」と言われて終わり——そんな無駄を減らしたい人向けに、Claude Code生成モックをワンクリックで確認できるURLに変える方法をまとめた。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/claude-code-admin-mock-review-url"
markdown: "https://giga-site.com/articles/claude-code-admin-mock-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Claude Codeで生成した管理画面モックをレビュー用URLにして共有する方法

Claude Codeで管理画面のモックを作ったとき、HTMLファイルをそのまま添付で送ると相手がローカル環境で開く手間が生じ、CSSが当たらないなどのトラブルが起きやすい。URLを発行して送れば相手はクリック一つで確認でき、フィードバックの回収も格段に速くなる。管理画面モック特有の注意点と共有フローをステップごとに説明する。

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

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

管理画面モックには「ユーザー一覧」「売上グラフ」「設定画面」など複数のページが含まれることが多く、HTMLファイルが複数枚に分かれている。メールやSlackでZIPを送っても相手がローカルで展開し正しいindex.htmlを開く手順が分からず、「うまく表示されない」という返事で終わることがある。ギガサイト便はZIPをそのままアップロードできるため、ファイル構造ごと配信できてリソースの参照関係も保たれる。

Claude Codeはダミーデータとして実在しそうな人名・会社名・メールアドレスを自動生成することがある。モック上の「田中 太郎」や`tanaka@example.com`が実際の取引先と同じ場合、見た人が「本物のデータでは？」と誤解するリスクがある。共有前にダミーデータを「山田 花子 / user001@demo.test」のような明らかにテスト用の形式に置換しておく。

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

## URL化する前の確認点

管理画面モックには削除ボタンや一括操作ボタンが含まれることが多く、実際のAPIエンドポイントが`fetch()`に残っているとレビュアーがボタンを押した瞬間に本番データに影響する危険がある。JavaScriptファイルを検索して`fetch(`や`axios.`で始まる行をすべて洗い出し、URLがlocalhost以外のものはコメントアウトしてからURL発行する。

チャートライブラリ（Chart.jsやApexChartsなど）をCDNから読み込んでいる場合、ネットワーク環境によってはライブラリが読み込まれずグラフが真っ白になる。外部CDNへの依存をなくすため、npmでインストールしてバンドルするかローカルのvendorディレクトリに配置し、相対パスで参照するように変更してからZIPにまとめる。

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

## 認証と期限の決め方

管理画面モックは社外の開発会社やフリーランスのデザイナーに見せることもあれば、社内の経営層のみに確認を求めることもある。対象者を事前に明確にすることで認証方式が決まる。社外の特定個人にはメール認証、社内の複数人には社内ドメイン（例：`@example.co.jp`のみアクセス可）の制限が最も手軽だ。

管理画面モックのレビューは「仕様合意」「デザイン確認」「開発着手前最終チェック」の3フェーズに分かれることが多い。フェーズごとに別URLを発行し、それぞれに1〜2週間の期限を設けると、古いフェーズのURLが有効なままになることを防ぎ、混在によるフィードバックのズレが起きにくい。

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

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

管理画面のレビューでは「どの操作でどんな結果になるか」のフローを事前に説明すると、レビュアーが何を確認すればよいか明確になる。たとえば「左メニューから『注文管理』を開き、ステータスを『処理中』に変更する操作をシミュレートしてください」という手順書を共有URLと一緒に送ると、的外れなフィードバックが減る。

フィードバックは「画面キャプチャと矢印コメント付きで返してください」と依頼すると、文字だけの「ここが分かりにくい」より修正箇所の特定が容易になる。LoomやCleanShotなどのスクリーンキャプチャツールのURLを添えて「このツールで録画してもらえると助かります」と提案すると、レビュアーも回答しやすくなる。

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

## よくある質問

### 複数のHTMLページで構成される管理画面モックをまとめてURLで共有するには？

HTMLと関連するCSS・JS・画像をフォルダにまとめてZIP圧縮し、ギガサイト便にアップロードする。トップページをindex.htmlにしておけば自動的にそのファイルが開かれ、相対リンクで他ページへの遷移も正常に動作する。

### 削除ボタンや一括操作ボタンをレビュアーが誤って押しても問題ない状態にするには？

JavaScriptの`fetch()`や`axios()`の呼び出し部分を`console.log('API call skipped in review mode')`に置き換えるか、関数を空の実装に差し替える。ボタンの見た目はそのままでAPIコールだけ無効化できるため、UIのレビューに支障がない。

### 管理画面モックのURLを共有した後、経営層から「本物のシステムではないよね？」と確認されたらどう答えるか？

「静的なHTMLで作成したプロトタイプです。データベースに接続されておらず、ボタンを押してもデータに変更は加わりません」と明確に伝える。モックであることを示すバナー（赤い帯で「デモ画面」など）をページ上部に追加しておくと誤解を事前に防げる。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Claude Codeで生成した管理画面モックをレビュー用URLにして共有する方法",
  "description": "管理画面モックをHTMLで渡しても「CSSが当たらなかった」と言われて終わり——そんな無駄を減らしたい人向けに、Claude Code生成モックをワンクリックで確認できるURLに変える方法をまとめた。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/claude-code-admin-mock-review-url",
  "url": "https://giga-site.com/articles/claude-code-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": "複数のHTMLページで構成される管理画面モックをまとめてURLで共有するには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLと関連するCSS・JS・画像をフォルダにまとめてZIP圧縮し、ギガサイト便にアップロードする。トップページをindex.htmlにしておけば自動的にそのファイルが開かれ、相対リンクで他ページへの遷移も正常に動作する。"
      }
    },
    {
      "@type": "Question",
      "name": "削除ボタンや一括操作ボタンをレビュアーが誤って押しても問題ない状態にするには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JavaScriptの`fetch()`や`axios()`の呼び出し部分を`console.log('API call skipped in review mode')`に置き換えるか、関数を空の実装に差し替える。ボタンの見た目はそのままでAPIコールだけ無効化できるため、UIのレビューに支障がない。"
      }
    },
    {
      "@type": "Question",
      "name": "管理画面モックのURLを共有した後、経営層から「本物のシステムではないよね？」と確認されたらどう答えるか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "「静的なHTMLで作成したプロトタイプです。データベースに接続されておらず、ボタンを押してもデータに変更は加わりません」と明確に伝える。モックであることを示すバナー（赤い帯で「デモ画面」など）をページ上部に追加しておくと誤解を事前に防げる。"
      }
    }
  ]
}
```