何が共有しづらいのか
フォーム付きページをそのままURL公開すると、レビュアーが試しにフォームを操作した際に実際のデータが送信されてしまうリスクがある。WindsurfのAgentはform要素のactionにダミーのエンドポイントや実際のAPIを設定することがあり、公開前に必ずaction属性を確認してモック用の処理に差し替える必要がある。最低限「送信を受け付けました（モックです）」とアラートを出すだけのJSで代替するのが手軽だ。
フォームの入力バリデーションがJavaScriptで実装されている場合、ブラウザによって挙動が異なることがある。Chromeでは正常に動いたのにSafariでは必須チェックが効かないといった差異が出やすく、特定ブラウザだけでのテストで「OKです」と判断すると本番リリース後に問題が発覚する。共有時に「ChromeとSafariの両方で試してください」と明記しておく。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
フォームのaction属性・メソッド・encTypeを確認し、レビュー用として公開する場合はaction="#"に変更してsubmitイベントをpreventDefault()で止めるのが最も確実だ。合わせてinputのautocomplete属性を確認し、ブラウザが保存済みのパスワードや個人情報を自動入力しないよう`autocomplete="off"`を設定しておくと、スクリーンショットに意図しない情報が映り込む事故を防げる。
フォームページがreCAPTCHAやhCaptchaと連携している場合、サイトキーが正しく設定されていないと「ロボット確認が表示されない」という状況でレビューが進んでしまい、実際の動作が確認できない。レビュー用にはテストキーを使うか、CAPTCHA部分をコメントアウトしてUIの見た目とフォームフローの確認に集中してもらう構成が現実的だ。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
フォームページのレビューは機能を操作して確認するため、URLを知っている人全員が触れる状態は避けたい。パスワード認証を設定してURLとパスワードをセットで伝えれば、意図しない操作や負荷テストのような無差別アクセスを防ぎやすくなる。特に個人情報の入力を模したフォームなら、アクセス者を絞ることがコンプライアンス上も重要だ。
フォームのレビュー期間は通常のデザインレビューより長くなりがちで、「動作を確認する時間が取れなかった」という理由で延長依頼が来ることも多い。初期設定の期限は2週間を目安にしつつ、延長ボタンで簡単に1週間単位で伸ばせるサービスを使うと管理コストが下がる。期限延長のたびにSlackで再通知するルールを決めておくと、確認漏れを防ぎやすい。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
フォームのレビューでは「入力しやすいか」「エラーメッセージが分かりやすいか」「送信完了後の画面が適切か」の3点を軸に依頼するとフィードバックが集まりやすい。自由記述だけにすると「使いやすかったです」という漠然とした返答で終わることが多く、具体的な改善点が得られない。チェックリスト形式で依頼文を作るのが実際に有効だ。
フォームの修正は細かい変更が繰り返し入るため、差し替え後に「どこが変わったか」を伝えないとレビュアーが全部再確認しなければならない。更新時には「v2: エラーメッセージの文言を修正、送信ボタンの配置を変更」のように差分をテキストで添えてURLを再通知すると、確認の範囲が絞れてレビューサイクルが速くなる。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
フォームの送信をモック化する最も簡単な方法はなんですか？
form要素にonsubmit="event.preventDefault(); alert('送信しました（テスト）'); return false;"を追加するのが最も手軽。これだけで実際の送信を止めつつ、レビュアーに送信後のフローをイメージさせられる。
入力途中のデータがブラウザに保存されてしまう心配はありますか？
autocomplete属性をoffに設定し、sessionStorageへの一時保存コードがないか確認すれば大部分は防げる。パスワードフィールドはtype="password"なら自動でブラウザが保存提案するため、レビュー用ページではtype="text"に変更しておくか保存しないよう案内する。
フォームページのレビューで、モバイル入力の確認もしてほしい場合はどう依頼しますか？
依頼文に「スマートフォンからフォームに入力して送信ボタンを押すまでの操作を試してください」と明示する。キーボードが表示された際のレイアウト崩れやiOSのズームイン問題は実機で確認しないとわからないため、OS・ブラウザの組み合わせも報告してもらうと後の修正に役立つ。