何が共有しづらいのか
管理画面モックはサイドナビのリンクが内部ページ遷移を前提としているため、HTML単体で開くと「リンクを押すたびに404」という状態になりやすい。Uizardのプロトタイプモードではクリックフローが設定できるが、HTMLエクスポートではその情報が失われる。共有前にレビュアーに「このURLはモック静的版のため遷移できないページがあります」と伝えるひと言が必要だ。
管理画面モックには「ユーザー一覧」「注文一覧」のような表形式データが含まれることが多い。Uizardが自動生成するダミーデータの名前や数値が実際の業務データに近すぎると、社内共有時に情報漏洩と誤解されるリスクがある。テーブルデータはすべて「テストユーザー001」「¥99,999」のような明らかに架空の値に置き換えておく。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
管理画面モックのHTMLで`<form>`タグを使っている箇所を探し、action属性が設定されていないかを確認する。検索フォームや絞り込みUIにformタグが使われている場合、送信先が空でもブラウザのデフォルト動作でGETリクエストが発生することがある。`onsubmit="return false;"`を追加してデフォルト送信を止めておく。
管理画面モックで使われているアイコンがSVGスプライトや外部CDNのアイコンフォントの場合、URLを共有する相手のネットワーク環境次第でアイコンが表示されないことがある。特に海外拠点のレビュアーに送る場合はGoogle Fonts IconsやMaterial Iconsの読み込みが遅延する場合があるため、レビュー前にVPN等で疎通確認することを推奨する。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
管理画面モックは社内向けシステムの設計情報を含むため、基本的に社外秘として扱うべきだ。社内エンジニアやPMにのみ共有する場合は、会社メールドメインによる認証が最も管理しやすい。社外のシステム開発会社と要件確認をする場合は、特定メールアドレスへの招待方式か、使い捨てパスワードをZoom会議中に口頭で伝える方法が安全だ。
開発スプリントの計画フェーズでモックをレビューする場合、スプリント開始日に合わせてURLの期限を設定する。スプリント中盤でモックが修正された場合は、URLを差し替えて変更サマリーをチームに通知する。「期限が切れたURLを探している」という問い合わせが来ないよう、期限日をJiraのチケットやNotionのドキュメントにも記載しておくとよい。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
エンジニアへのモックレビューでは「実装コストが高そうな箇所はどこか」「既存のUIコンポーネントで実現できるか」という2点の質問が最も有用なフィードバックを引き出す。デザインの好みより実現可能性の観点からコメントを求めることで、開発着手後のデザイン変更を減らせる。
PMからのフィードバックは「ユーザーがこの画面で最初に操作するのはどこか」という操作優先順位の観点で集めると有効だ。モックの各セクションに番号を振り、「セクション3のフィルターパネルは初期状態で展開すべきか折りたたむべきか」のように番号を使った設問にすると回答精度が上がる。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
管理画面モックのサイドナビにあるすべてのメニューにアクセスできる状態にするには追加作業が必要ですか？
Uizardのプロトタイプ機能でクリックフローを設定し、HTMLとして書き出すとnavタグのhref先に対応したHTMLファイルが生成されます。ただしすべての画面をHTMLで書き出すには画面数分のエクスポートが必要で、数が多い場合はzip構成が複雑になります。
ダークモード版のモックも一緒に見てもらいたいのですが、1つのURLにまとめられますか？
ライトモードとダークモードをHTMLのトグルスイッチで切り替えられるよう実装すれば1つのURLで提供できます。実装が難しい場合は別々のURLを発行して「ライトモード版URL」「ダークモード版URL」として依頼文に両方を記載する方法が現実的です。
フィードバックをGoogleフォームで収集する場合、共有URLとGoogleフォームのリンクを一緒に送るのが良いですか？
はい、モックのURLとGoogleフォームのリンクを同じSlackメッセージや依頼メールに並べて記載するのが効率的です。フォームの質問項目にモックのスクリーンショットを貼ると、レビュアーが回答中にURLを行き来しなくて済みます。