何が共有しづらいのか
フォームページ最大の落とし穴は、送信ボタンを押すと実際にデータが飛ぶ状態のまま共有してしまうことだ。WebSimのプロンプトに「お問い合わせフォームを作って」と入力すると、form actionにダミーのAPIエンドポイントが入っていることが多く、それが社内の本番サービスのドメインと似た文字列になっているケースがある。共有前に必ず送信先を無効化する。
スマホで入力フォームを確認する際、iOS Safariでは仮想キーボードが出るとビューポートが縮小してレイアウトが崩れることがある。PCで確認済みの状態で共有しても、相手がスマホで最初に開いた瞬間に「壊れてる」と感じてしまう。事前に実機か Chrome DevToolsのデバイスモードで確認しておくと余分なフィードバックを防げる。
バリデーションのエラーメッセージに個人情報を含む「サンプル入力値」が埋め込まれていることがある。例えば placeholder="yamada.taro@example.com" が本物の社員メールになっているケースだ。フォームの全フィールドを実際に入力して、エラー・完了画面まで一通り操作して確認するとこうした漏れに気づける。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
form要素のaction属性と、JavaScript内の fetch/XMLHttpRequest の送信先URLを必ずHTMLソースで検索する。モックとして公開するなら action="#" に変更した上で、onsubmit イベントで「このフォームはデモです」とアラートを出す処理に差し替えると、レビュアーが誤送信することなく操作の流れを確認できる。
フォームが複数ステップになっている場合、各ステップのURLハッシュや状態管理がHTMLに含まれているか確認する。JavaScriptで sessionStorage や localStorage を使っている場合、共有URLをそのまま開いた相手には最初のステップから始まる動作になるかテストする。ブラウザの「シークレットモード」で開いてみるのが最も手軽な方法だ。
入力フォームに reCAPTCHA や Google Analytics のスクリプトが含まれている場合、それらは外部サービスと通信する。デモ共有としてnoindexを設定していても、Googleのスクリプトが動くと分析データが汚染される。デモ用のプロパティIDに差し替えるか、スクリプトをコメントアウトしてから共有する。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
フォームのUIレビューは通常、デザイナー・エンジニア・PMなど社内3〜5名が対象になることが多い。この規模ならパスワード認証が効率的だ。Slackの限定チャンネルでパスワードとURLを同時に投稿すれば、一括で共有でき、チャンネル参加者以外には届かない。
クライアントにフォームのユーザビリティを確認してもらう場合はメール認証が適切だ。アクセスログから「いつ、どのリンクで入ってきたか」が分かるため、レビュー依頼のフォローアップのタイミングを判断しやすい。未閲覧のまま期限が来そうな場合にリマインドを送れる。
フォームのデザインは修正サイクルが短い。初回共有から最終確認まで1〜2週間で終わることが多いので、期限は共有日から10日を基準に設定するとよい。期限を設けないまま放置すると、古いフォームデザインのURLが流通してしまい「このフォームはまだ使われているのか」という問い合わせが来ることがある。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
フォームのレビューでは「入力途中に詰まった箇所」「エラーメッセージの分かりやすさ」「送信後の画面への期待」の3点を具体的に聞くと有効な意見が集まる。「全体の印象はどうですか」という漠然とした質問では、デザインの好みに偏ったコメントしか返ってこない。
修正が入った場合、同じURLを差し替えで更新できると便利だ。ただしフォームレビューはテスト入力を繰り返しながら行うことが多いため、相手がすでに入力中に差し替えると操作が中断される。差し替えはレビュアー全員のフィードバックが揃った後の夜間か朝に行い、「更新しました・再度ご確認ください」と一言添えて通知する。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
送信処理を無効化してデモとして共有した場合、レビュアーに誤解を招かないようにする方法はありますか？
送信ボタンを押したときに「これはデモです。実際のデータは送信されません」とモーダルで表示する処理をHTMLに追加するのが分かりやすい。冒頭バナーにも一言添えると安心。
フォームの入力補完（オートフィル）がレビュー時に個人情報を自動入力することはありますか？
ブラウザのオートフィルは共有URL先のフォームでも動作する。レビュアーには「オートフィルが入力されても実際には送信されません」と伝えるか、autocomplete=off を設定してデモ中は無効化する。
フォームが多段ステップ構成の場合、途中のステップを直接URLで見せることはできますか？
JavaScriptでステップを管理している場合は難しいが、各ステップをHTMLファイルとして別ファイルに分割してzipにまとめれば、ステップごとのURLで共有できる。レビュアーへの案内文にステップ別のURLを番号で記載するとよい。