何が共有しづらいのか
フォーム付きHTMLページをそのまま公開すると、レビュアーがフォームを実際に送信してしまうリスクがある。Firebase Studioが生成するフォームには本番APIのエンドポイントが指定されているケースがあり、テストのつもりで送信されたデータが本番のデータベースに入ってしまうことも起きる。共有前に必ず送信先を無効化する処理が必要だ。
また、フォームに含まれる入力項目（氏名・メールアドレス・電話番号など）がレビュアーに「本当に送信される」と誤解される場合、個人情報を入力させてしまうリスクもある。フォームがモック状態であることをページ内で明示することが、安全な共有の前提となる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
フォームのHTMLを開いて`<form action>`属性を確認し、実際のAPIエンドポイントURLが設定されている場合はaction属性を削除するか`#`に変更する。送信ボタンのclickイベントにJavaScriptが紐づいている場合は、該当のscriptタグ内でfetchやXHRの呼び出しを`console.log`に差し替えてからアップロードする。
バリデーションメッセージに実際のサービス名やドメインが含まれていると、外部に公開したときにサービス名が特定される場合がある。レビュー用HTMLではサービス名をプレースホルダー表記に変えるか、バリデーション処理を無効化するオプションを検討する。また、reCAPTCHAなど外部認証サービスのサイトキーがHTMLに記載されている場合も確認と対処が必要だ。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
フォームUIのレビューは入力欄のラベル・プレースホルダー・エラーメッセージが適切かどうかを確認する作業なので、比較的少人数で行うことが多い。パスワード認証を設定してURLとパスワードをSlackのDMで伝えるか、相手のメールアドレスをホワイトリストに追加するメール認証が適している。
フォームデザインの修正が何度も発生しそうな場合は、差し替えのたびに同一URLが更新される仕組みを確認しておく。「URLは変えずに中身だけ更新できます」と事前に伝えておけば、レビュアーがURLをブックマークして何度でも最新版を確認できる。レビュー完了後は期限を設定してURLを無効化し、古いフォームデザインが残り続けないようにする。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
フォームのレビューでは「入力項目の順番は自然か」「必須・任意の表示はわかりやすいか」「エラーメッセージは何をすべきか伝わるか」という3点に絞って確認依頼を出すと、ピンポイントな意見が返ってきやすい。スクリーンショットにコメントを書き込んで送ってもらう形式が最も手軽で、意図の伝達ミスも少ない。
フォームのフィードバックはフィールドのラベル名や順序の変更など細かい修正が多いため、まとめて受け取った後でバージョン管理しながら反映するのがよい。途中でコメントを小出しにされると修正の優先順位が付けにくいため、「フィードバック締め切りを◯月◯日17時」と明示してまとめて受け取るルールを設けることを勧める。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
フォームのバリデーションが動く状態のままレビューさせたい場合、送信だけ無効化できますか？
送信ボタンのクリックイベントで`event.preventDefault()`を実行しfetchを呼ばない形にすることで、バリデーションを動かしたまま実際の送信だけを止められます。
複数のフォームパターンを同時にレビューさせるにはどうすればよいですか？
パターンごとにHTMLファイルを作成し、それぞれ別URLで発行して共有するのが最もシンプルです。1つのHTMLにタブ切り替えで複数パターンを実装する方法もありますが、生成の手間がかかります。
レビュー依頼後にフォームのデザインを変更した場合、レビュアーに再確認を依頼する際の注意点はありますか？
どの箇所を変更したかを差分リストにして通知すると、レビュアーが変更点を見逃さずに確認できます。変更点が多い場合は変更前後のスクリーンショットを添付するのが効率的です。