---
title: "Claude Appsで生成した管理画面モックをレビュー用URLにして共有する方法"
description: "Claude Appsで管理画面モックを生成したPdM・エンジニア向け。モック特有のダミーデータ管理・社内アクセス制御・スプリントに合わせた期限設定・フィードバック収集の実践的な進め方を解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/claude-apps-admin-mock-review-url"
markdown: "https://giga-site.com/articles/claude-apps-admin-mock-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Claude Appsで生成した管理画面モックをレビュー用URLにして共有する方法

Claude Appsで管理画面のモックを生成すると、ダッシュボードやデータテーブルが絡む複雑なHTMLが出力される。これを「見てほしい」と伝えるだけで相手に届けるのは意外と難しい。ファイル添付だとレイアウトが崩れ、スクリーンショットだとインタラクションが伝わらない。ギガサイト便なら生成したHTMLを貼るだけで社内レビュー用URLが数秒で手に入る。

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

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

Claude Appsの管理画面モックはJavaScriptでデータを動的に描画するケースが多く、ファイルとして保存してブラウザで開くと`file://`プロトコルの制約でスクリプトがブロックされることがある。その結果、テーブルが空欄になったりグラフが表示されなかったりする。URLとして提供することで、この問題を根本的に解消できる。

管理画面モックのレビューには複数部門が関わることが多い。開発チーム・PdM・カスタマーサクセスがそれぞれ違う観点で確認したいとき、メールで個別に添付ファイルを送ると「どのバージョンを見ているか」が分からなくなる。URLを1つ発行して全員に共有すれば、全員が同じ画面状態を見た上で議論できる。

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

## URL化する前の確認点

Claude Appsが生成した管理画面モックには、グラフのサンプルデータや一覧テーブルのダミー行が含まれる。このデータに実際の顧客名・メールアドレス・売上数値が紛れ込んでいないか確認する。Claudeは架空のデータを生成するが、プロンプトに実データのサンプルを貼り付けていた場合はそれが出力に含まれることがある。

管理画面モックに含まれるハイパーリンクがモック内の別ページを正しく指しているか確認する。存在しないページへのリンクをクリックすると404エラーが表示され、レビュアーがバグと誤解することがある。レビュー段階では未実装の遷移先リンクに`href="#"`を設定し、「このリンクは次フェーズで実装予定」と説明文を追加しておくとよい。

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

## 認証と期限の決め方

管理画面モックは「業務システムの設計」に直結するため、社外への流出を防ぐことが重要だ。パスワード認証に加えて、アクセスできる人のIPアドレス範囲を社内に限定する設定があれば活用したい。ギガサイト便ではメール認証を使うことで、特定の社員のみが閲覧できる環境を作れる。

管理画面のモックはプロトタイプが進むにつれて頻繁に差し替わる。毎回URLを変えるとSlackのリンクが大量に溜まるため、「同じURLで差し替え」する設定を使い、差し替えたタイミングをSlackに投稿するルールを決めておくと混乱が少ない。差し替え後は旧バージョンへのアクセスができなくなる点をチームに周知する。

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

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

管理画面モックのレビューは「ユースケース単位」で依頼すると具体的なフィードバックが返ってくる。「受注一覧からCSVをエクスポートする操作を試してください」というように実際の業務タスクを設定し、つまずいた箇所をコメントしてもらう形にする。抽象的な「UIの印象はどうですか」という聞き方より遥かに実用的だ。

フィードバックを受けた後の修正では「変更した画面と変更理由」を箇条書きにしてSlackに投稿する。「一覧テーブルのアクションボタンを行末から先頭列に移動しました（Aさんの指摘を反映）」のように誰の意見を反映したかを示すと、フィードバックした側のエンゲージメントが高まり、次のレビューの協力も得やすくなる。

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

## よくある質問

### Claude Appsで生成した管理画面モックはダークモード対応になっています。URLで共有したときにレビュアーのブラウザ設定に引きずられますか？

CSSの`prefers-color-scheme`メディアクエリで切り替えている場合はレビュアーのOS設定に従います。レビュー時に全員が同じ表示で確認したい場合は、HTMLに`data-theme="dark"`などのクラスを固定指定して、ブラウザ設定に依存しない状態でアップロードしてください。

### 管理画面モックに50ページ以上の画面が含まれています。全部1つのHTMLにまとめる必要がありますか？

必須ではありません。複数HTMLをzipでまとめてアップロードし、index.htmlからメニューでページ遷移する構造にすれば問題ありません。ただし、ZIPのディレクトリ構造と相対パスを一致させることが必須条件です。

### 管理画面の特定画面（例：売上ダッシュボード）だけを経営陣にレビューしてもらいたいのですが、その画面だけを共有できますか？

はい。該当画面のHTMLだけを切り出して別途アップロードし、そのURLだけを経営陣に共有すればよいです。全画面セットのURLとは別にページ単位でURLを発行できるため、レビュアーに見せる範囲をコントロールできます。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Claude Appsで生成した管理画面モックをレビュー用URLにして共有する方法",
  "description": "Claude Appsで管理画面モックを生成したPdM・エンジニア向け。モック特有のダミーデータ管理・社内アクセス制御・スプリントに合わせた期限設定・フィードバック収集の実践的な進め方を解説する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/claude-apps-admin-mock-review-url",
  "url": "https://giga-site.com/articles/claude-apps-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": "Claude Appsで生成した管理画面モックはダークモード対応になっています。URLで共有したときにレビュアーのブラウザ設定に引きずられますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CSSの`prefers-color-scheme`メディアクエリで切り替えている場合はレビュアーのOS設定に従います。レビュー時に全員が同じ表示で確認したい場合は、HTMLに`data-theme=\"dark\"`などのクラスを固定指定して、ブラウザ設定に依存しない状態でアップロードしてください。"
      }
    },
    {
      "@type": "Question",
      "name": "管理画面モックに50ページ以上の画面が含まれています。全部1つのHTMLにまとめる必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "必須ではありません。複数HTMLをzipでまとめてアップロードし、index.htmlからメニューでページ遷移する構造にすれば問題ありません。ただし、ZIPのディレクトリ構造と相対パスを一致させることが必須条件です。"
      }
    },
    {
      "@type": "Question",
      "name": "管理画面の特定画面（例：売上ダッシュボード）だけを経営陣にレビューしてもらいたいのですが、その画面だけを共有できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。該当画面のHTMLだけを切り出して別途アップロードし、そのURLだけを経営陣に共有すればよいです。全画面セットのURLとは別にページ単位でURLを発行できるため、レビュアーに見せる範囲をコントロールできます。"
      }
    }
  ]
}
```