AI活用

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

Difyで生成した管理画面モックは、テーブル・サイドメニュー・モーダルなど複雑なUI要素を含むため、スクリーンショットだけでは操作感が伝わらない。かといってソースをそのまま渡すと環境依存で崩れるリスクがある。静的HTML共有サービスにアップしてパスワード付きURLを発行すれば、ブラウザ上でインタラクションを体験させながら安全にレビューを進められる。

何が共有しづらいのか

管理画面モックはページ遷移やモーダル開閉などJSによるインタラクションが多い。ローカルファイルとして開くとfile://プロトコルの制限でAjax呼び出しがブロックされ、画面が正しく動かない。また社内共有ドライブに置いてもレビュアーの権限設定が必要になり、実際に開いてもらうまでに一往復かかる。

Difyの生成画面にはアカウント認証が必要なため、そのURLを社外の関係者に送ることはできない。エクスポートしたHTMLにもモックの顧客データや社員名が含まれる場合があり、そのまま外部共有すると情報管理上の問題になる。共有前の内容精査が特に重要だ。

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

URL化する前の確認点

管理画面モックのHTMLに含まれるAPIエンドポイント呼び出しを確認する。DifyがfetchやaxiosでバックエンドAPIを叩くコードを生成している場合、そのエンドポイントを本番ドメインのまま共有すると、レビュアーの操作が本番データを変更する恐れがある。エンドポイントはモックレスポンスを返すJSオブジェクトか、https://jsonplaceholder.typicode.comのようなパブリックモックに差し替える。

テーブルに表示されるモックデータにリアルな氏名・メールアドレス・電話番号が含まれていないかをHTMLソースで検索する。正規表現でメールアドレスパターン(@を含む文字列)を検索すると効率的だ。見つかった場合は`user@example.com`や`山田 太郎(仮)`のような明示的なダミーに置き換える。

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

認証と期限の決め方

管理画面モックは社内の業務フローを模しているため、社外に無制限に公開するのはリスクが高い。社内レビューならば会社ドメイン認証が適切で、社外パートナーが含まれる場合はパスワード認証に切り替える。いずれの場合も`noindex`メタタグを設定して検索エンジンからのクロールを防ぐ。

管理画面のレビューサイクルは要件確定まで複数回繰り返すことが多い。毎回新URLを発行するより、同じURLで上書き更新できる運用にしてレビュアーにブックマークしてもらうほうが効率的だ。一方、最終承認後は期限を設定してURLを失効させ、古いモックへのアクセスを閉じる。

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

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

管理画面のレビューでは「このメニュー構造で目的の操作に辿り着けるか」「一覧画面のソート・フィルタ項目が業務に必要な軸と合っているか」など業務担当者でないと答えられない観点を中心に質問する。URLとともにFigJamやMiroのコメント収集ボードを別途用意すると、画面の特定箇所への意見を可視化しやすい。

複数の画面をレビューさせる場合は画面名を番号で整理し、「2番のユーザー一覧画面について」「5番の設定画面について」と指定した形で質問を送ると回答が整理されやすい。修正後に更新した際はどの画面が変わったかをリストで伝え、全画面を見直す手間をレビュアーに与えないようにする。

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

よくある質問

管理画面モックのAPIエンドポイントを差し替えずに共有してしまった場合のリスクは?

レビュアーがボタンを押すたびに本番APIが叩かれ、データの登録・更新・削除が発生する可能性があります。気付いた時点ですぐURLを失効させ、エンドポイントをモックに差し替えた版を再公開してください。

管理画面モックを毎回のイテレーションで新しいURLで共有すべきですか?

同じURLを上書き更新できるサービスを使うと、レビュアーがブックマークをそのまま使えます。URL変更のたびに連絡するコストを省け、古い版との混乱も防げます。

会社ドメイン認証と社外パートナーが両方必要な場合はどうすればいいですか?

社外パートナーを含む場合はパスワード認証に統一するのがシンプルです。パスワードをSlackチャンネルやメールで別送し、URLと同時に受け取れないようにすると安全性が高まります。

関連記事

AI活用

Difyで生成したLP案をレビュー用URLにして共有する方法

DifyでAI生成したLP案のHTMLをレビュー用URLにして安全に共有したい人向け。公開前チェック・認証の選び方・効率的なフィードバック収集の手順を解説し、スムーズなレビュー運用を実現できるようにする。

4分で読める
「AI活用」の記事をもっと見る →