---
title: "Codex CLIで生成した管理画面モックをレビュー用URLにして共有する方法"
description: "CRUD操作UIのひな形はCodex CLIで素早く出せても、コードリポジトリへのアクセス権がないステークホルダーには届けにくい。生成したモックを誰でもブラウザで開けるURLとして共有し、確認サイクルを短縮する方法を具体的に解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/codex-cli-admin-mock-review-url"
markdown: "https://giga-site.com/articles/codex-cli-admin-mock-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Codex CLIで生成した管理画面モックをレビュー用URLにして共有する方法

Codex CLIはHTMLとJavaScriptの生成が得意で、管理画面のCRUD操作UIをひな形として素早く出力できる。生成したモックをチームに確認してもらうには、コードリポジトリへのアクセス権がない人でも開けるURLでの共有が最も包括的な方法だ。

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

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

管理画面のモックはエンジニアがコードを手元で動かす前提で作られることが多く、リポジトリにアクセスできないデザイナーやPOがレビューするにはURL化が必要だ。`npm run dev`を実行してもらうのは非エンジニアには難しく、URLを渡すだけで誰でも確認できる状態を作ることがスムーズなレビューにつながる。

Codex CLIが生成した管理画面モックは、削除ボタンや編集フォームなどの破壊的操作UIを含むことがある。レビュアーが誤って操作した場合に何かが起きるように見える実装になっていると、「本当に削除されるの？」という不安を与える。公開前に破壊的な操作には「このボタンはモックです」というダイアログを追加しておくと安心だ。

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

## URL化する前の確認点

Codex CLIはCRUD操作のサンプルとしてRESTful APIへのfetch呼び出しを生成することがある。`fetch('https://api.example.com/users')`のような記述が残ったまま公開すると、ブラウザコンソールに大量のネットワークエラーが出てレビュアーが混乱する。APIコールは全てモックデータの定数返却に差し替えてから公開する。

管理画面のHTMLにCSRFトークンや認証ヘッダーのサンプル値が埋め込まれている場合、セキュリティスキャナーがアラートを上げることがある。`Authorization: Bearer xxxxx`のような文字列が含まれていないかをテキスト検索で確認し、見つかった場合は削除またはダミー値（例：`Bearer SAMPLE_TOKEN`）に置き換える。

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

## 認証と期限の決め方

管理画面モックは製品ロードマップや機能仕様が透けて見える情報量があるため、社外への無認証公開は避ける。社内レビューは会社ドメイン認証、外部ベンダー（UXコンサルタントや受託デザイナー）はパスワード認証を選び、外部共有のURLは必ずベンダーの業務期間内に期限を設定する。

管理画面モックはスプリントごとに機能が追加されていくため、古いURLが社内Wikiに残り続けやすい。新しいバージョンを公開したら、前バージョンのURLを無効化し、社内Wikiのリンクも更新するルールをチームで決めておく。

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

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

管理画面レビューでは「最も頻繁に使うであろう機能への到達ステップ数」を実際に数えてもらうのが効果的だ。「ユーザー一覧から特定ユーザーの権限を変更するまで何クリックかかりましたか」という操作タスクを設定してレビュアーに実行してもらうと、UIの効率性に関する定量的なフィードバックが得られる。

テーブルのカラム順序やフィルタの位置などの細かいUIの問題は、レビュアーが自分から言及しにくい。「変えたほうがいいと思う箇所はどこでも自由に書いてください」という開放的な質問を最後に追加しておくと、指摘しにくかった意見が出てきやすくなる。

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

## よくある質問

### 管理画面モックの削除ボタンを押したときに「これはモックです」と表示させるには？

削除ボタンのonclickに`alert('このボタンはモックです。実際の削除は行われません。')`を追加してください。モーダルで表示する場合は`<dialog>`要素を使うとよりスタイリッシュに実装できます。

### Codex CLIが生成したコードのAPIコールをモックデータに差し替えるには？

fetchの呼び出しを削除し、`const users = [{id:1, name:'テストユーザー', email:'test@example.com'}]`のようなダミー定数に置き換えてください。DOMの描画処理はそのまま使えるため、モックデータで画面を正常に表示できます。

### 管理画面モックの旧バージョンURLを社内Wikiから一括で更新するには？

Confluenceならページ全体でURL検索・置換ができるプラグインがあります。Notionなら「リンクを含むページ」でフィルタして古いURLを手動で更新してください。Wikiの更新漏れを防ぐため、URL変更時に担当者に通知するルールをチームで決めておくのが確実です。

## 関連記事

- [Codex CLIで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/codex-cli-lp-draft-review-url/index.md)
- [Codex CLIで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/codex-cli-slide-html-review-url/index.md)
- [Codex CLIで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/codex-cli-form-page-review-url/index.md)
- [Codex CLIで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/codex-cli-internal-tool-prototype-review-url/index.md)
- [Gemini CLIで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/gemini-cli-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": "Codex CLIで生成した管理画面モックをレビュー用URLにして共有する方法",
  "description": "CRUD操作UIのひな形はCodex CLIで素早く出せても、コードリポジトリへのアクセス権がないステークホルダーには届けにくい。生成したモックを誰でもブラウザで開けるURLとして共有し、確認サイクルを短縮する方法を具体的に解説する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/codex-cli-admin-mock-review-url",
  "url": "https://giga-site.com/articles/codex-cli-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": "管理画面モックの削除ボタンを押したときに「これはモックです」と表示させるには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "削除ボタンのonclickに`alert('このボタンはモックです。実際の削除は行われません。')`を追加してください。モーダルで表示する場合は`<dialog>`要素を使うとよりスタイリッシュに実装できます。"
      }
    },
    {
      "@type": "Question",
      "name": "Codex CLIが生成したコードのAPIコールをモックデータに差し替えるには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "fetchの呼び出しを削除し、`const users = [{id:1, name:'テストユーザー', email:'test@example.com'}]`のようなダミー定数に置き換えてください。DOMの描画処理はそのまま使えるため、モックデータで画面を正常に表示できます。"
      }
    },
    {
      "@type": "Question",
      "name": "管理画面モックの旧バージョンURLを社内Wikiから一括で更新するには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Confluenceならページ全体でURL検索・置換ができるプラグインがあります。Notionなら「リンクを含むページ」でフィルタして古いURLを手動で更新してください。Wikiの更新漏れを防ぐため、URL変更時に担当者に通知するルールをチームで決めておくのが確実です。"
      }
    }
  ]
}
```