AI活用

WordPress AIで生成した管理画面モックをレビュー用URLにして共有する方法

WordPress AIやChatGPTで生成した管理画面モックは、開発着手前にチームや発注者に「こういう画面になります」と見せるために使う。しかし実際のWordPress環境にモックをアップするのはリスクが高く、ローカルファイルをZipで送っても開いてもらえないことが多い。ギガサイト便でURLを発行すれば、アクセス認証付きでモックをその日のうちに共有できる。

何が共有しづらいのか

管理画面モックには「売上:¥3,245,000」「ユーザー数:1,287名」など業務を想定したリアルな数値が入りやすい。AIが自動生成した数値でも、実際の社内データと近い値であればステークホルダーが「これは本物のデータか?」と混乱することがある。サンプルデータには明確に「SAMPLE」のラベルを付けるか、明らかにフィクションとわかる値(例:¥99,999,999)を使おう。

管理画面モックには複数のメニュー項目やサイドバーナビゲーションがあり、JavaScriptでタブ切り替えやモーダル表示が実装されていることが多い。外部ファイルに切り出されたJSが一緒にアップロードされていないと、ボタンを押しても何も起きない状態でレビューが進んでしまう。HTMLと同じディレクトリにあるJSとCSSファイルをすべてセットでアップロードすることを忘れないようにしよう。

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

URL化する前の確認点

WordPressのAIアシスタントが生成した管理画面HTMLには、wp-admin特有のnonce値やajax_urlが残っていることがある。これらを含むままアップロードしても動作はしないが、コードを見た人が実際の管理画面と誤解するリスクがある。`ajax_url`や`nonce`を検索して、モックには不要な記述を削除してからURLを発行しよう。

モックのHTMLがBootstrapやMaterial UIをCDN経由で読み込んでいる場合、CDNがオフラインになったときにデザインが崩れる。レビューの直前にCDNが落ちる可能性は低いが、重要なレビューの際は該当CSSをダウンロードして相対パスで参照する形に変えておくと安定して共有できる。

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

認証と期限の決め方

管理画面モックは社内システムの仕様を含むため、社外に見せるべきではない場合がほとんどだ。ギガサイト便の会社ドメイン認証を使えば、特定の会社メールアドレスを持つ人だけがアクセスできる状態にできる。複数の取引先に個別に見せたい場合は、取引先ごとに異なるURLを発行して期限も個別に設定すると管理しやすい。

モックのレビュー期限は開発キックオフMTGの前日が適切だ。開発が始まった後は仕様が変わりモックが陳腐化するため、古いモックに取引先がアクセスし続けると混乱の原因になる。期限後は自動でアクセス不可になるため、アーカイブが必要な場合はPDFやスクリーンショットとして保存しておこう。

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

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

管理画面モックのレビューでは「操作権限の階層(管理者・一般ユーザー)が画面から読み取れるか」「データが多い場合にテーブルはどう見えるか」といった機能観点のフィードバックが重要だ。見た目の色やフォントへのコメントは後工程でも対応できるため、優先して聞くべきは「この画面で本当に業務が回るか」という点に絞る。

フィードバックを受けてモックを修正したら、変更点を差分形式(「Beforeはこう、Afterはこう」)で示すと確認が楽になる。修正版のURLを送る際に「ログイン画面とダッシュボード画面を修正しました。設定画面は次回対応予定」と範囲を明記すると、レビュアーが全画面を見直す手間を省ける。

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

よくある質問

管理画面モックのサイドバーメニューをクリックしても何も起きない場合はどうすればいいですか?

JavaScriptのイベントハンドラが別ファイルに定義されていて、そのJSファイルがアップロードされていない可能性が高い。HTMLのsrcやscriptタグで参照しているすべてのJSファイルをHTMLと同じフォルダに配置してから再アップロードする。

モックに「SAMPLE」ラベルを追加したいのですが、HTMLを編集せずにできますか?

HTMLを編集するのが最も確実な方法だ。bodyタグ直下に固定表示のバナーを追加するか、既存のヘッダー要素に「【サンプル】」というテキストを挿入するだけで対応できる。コードの編集が難しい場合は、共有メール本文にその旨を明記する方法でも一定の効果がある。

発注者が海外にいる場合、ドメイン認証は機能しますか?

ドメイン認証はメールアドレスのドメイン(@以降)で判定するため、閲覧者の所在地は問わない。海外からアクセスしても同じ会社ドメインのメールアドレスで認証すれば閲覧できる。インターネット接続があれば場所を選ばず機能する。

関連記事

「AI活用」の記事をもっと見る →