AI活用

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

Zapier Interfacesで生成した管理画面モックは、一覧表示・詳細表示・設定画面など複数の状態を持つことが多く、スクリーンショット数枚では動線全体を伝えきれない。実際にクリックして操作感を確認してもらうには、URLとして共有する必要がある。その際、モック上に残りがちな仮データや内部情報の扱いが最初のハードルになる。

何が共有しづらいのか

管理画面モックには、Zapierのテーブルやデータソースから引いた実際の顧客名・メールアドレス・金額が表示されたままになっていることがある。その状態でURLを共有すると個人情報保護の観点で問題が起きる。公開前にモック上の全テキストフィールドを「山田太郎」「example@example.com」「¥9,800」のような汎用的なダミーデータに置き換え、元データへの参照が残っていないことを確認する。

管理画面モックは操作経路が複数あるため、レビュワーが「どのページから確認すればいいか」迷うことが多い。URLを共有するとき、トップページのURLだけ送るのではなく「まずこのURLを開いて、左メニューの『ユーザー管理』をクリックしてください」という操作順を添えると、レビュワーが意図した画面に到達できる。

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

URL化する前の確認点

管理画面モックのHTTPリクエストがZapierの本番Zapに向いている場合、レビュワーが削除ボタンをクリックすると本番データが消える。`fetch`や`XMLHttpRequest`を使ったAPIコールをすべて検索し、URLが本番エンドポイントを指していれば、モック用のスタブ関数に差し替えるかエンドポイント自体を無効化してからアップロードする。

管理画面のモックはサイドバーや上部ナビゲーションが多くのページにまたがる共通コンポーネントとして含まれている。そのナビゲーション内リンクが`localhost:3000`や`zapier.com`内の認証済みパスを指している場合、公開後に404が連発する。全内部リンクをgrepping(`href=`で検索)して、外部からアクセスできないパスを`#`に差し替えてからアップロードする。

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

認証と期限の決め方

管理画面モックは経営陣や事業責任者がレビューするケースが多く、その人たちがURLを誤って広めるリスクは低い。しかし万が一のことを考えて、社内のメールドメインでのみアクセスを許可するドメイン認証が最もバランスが取れている。URLを知っていても社外メールアドレスではログインできないため、流出しても被害が最小化される。

管理画面モックのレビューは複数ラウンドにわたることがある。1回目でUIの構造を確認し、2回目で細部の文言を確認するといった進め方では、URLの有効期限を2週間単位で更新できる設定が便利だ。ラウンドごとに新URLを発行すると以前のメモとURLが食い違い、混乱が生じやすい。

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

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

管理画面のフィードバックは「どの画面の」「どの要素について」という座標情報がないと修正に使えない。共有メッセージで「ユーザー一覧画面のフィルター機能」「詳細画面の編集ボタンの位置」「削除確認ダイアログの文言」という単位で質問すると、回答を受け取ったときにすぐ修正箇所が特定できる。

フィードバックを口頭で受け取るミーティングでは、レビュワーがモックを操作しながら話すため画面収録を依頼すると後から参照できる。Zapier Interfacesで生成したモックは動的な操作も可能なため、「ここをクリックすると何が起きるか」という実際の操作ログを動画で残してもらう方がテキストのコメントより情報量が多い。

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

よくある質問

管理画面モックに表示されているグラフや数字は、本番のデータと接続されていますか?

Zapier InterfacesでZapierのデータテーブルを参照している場合は本番データが表示される。公開前にデータソースとの接続を切り、HTMLにハードコードされたダミー数値に差し替えてからアップロードすること。

ドメイン認証を設定した場合、フリーランスの外部パートナー(会社ドメインなし)にも見せられますか?

ドメイン認証では会社メールアドレスを持たない人はアクセスできない。その場合はパスワード認証に切り替えるか、メール認証で外部パートナーのアドレスを個別に許可リストに追加する方法を選ぶ。

複数ラウンドのレビューで毎回URLが変わる場合、どうやって最新版を管理すればいいですか?

ドキュメント管理ツール(NotionやConfluence)に「現在のレビューURL」欄を設けて更新する方法が定着しやすい。Slackのブックマークやピン留めをURLが変わるたびに更新するのも手軽な運用だ。

関連記事

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