何が共有しづらいのか
フォーム付きページをHTMLファイルとして送ると、相手がローカルで開いたときにCORSエラーでsubmitが失敗するケースが多い。ブラウザはローカルの`file://`スキームからの外部API呼び出しを制限するため、実際の送信フローをレビューするにはHTTPSのURLが必要になる。
フォームには入力バリデーション（必須チェック・メール形式確認など）が実装されていることが多く、スクリーンショットではそのエラーメッセージの見え方を確認できない。URLを共有して実際に入力・送信してもらうことで、UX上の問題点を具体的に指摘してもらいやすくなる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
HTMLの`<form action="...">`に設定されているエンドポイントを確認する。ChatGPT Agentがサンプルとして埋め込んだダミーURLのままだと、送信ボタンを押したときに404エラーが返ってレビュアーが混乱する。モック段階ではaction属性を空にするか、`event.preventDefault()`でsubmitをキャンセルするスクリプトを追加しておく。
フォームに`<input type="hidden" name="token" value="xxxx">`のような隠し項目がないかHTML全文を検索する。APIキーやCSRFトークンのサンプル値がそのまま埋め込まれていると、公開後に悪用されるリスクがある。不要な隠し項目は削除してから共有する。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
フォームのレビューは社内QAチームと行うことが多いため、会社ドメイン認証を設定すれば招待の手間なく全員がアクセスできる。ただしQAがフォームに実データを入力するリスクを考慮し、「このページはモックです。入力した情報は送信されません」というバナーをHTML上部に追記しておくとトラブルを防げる。
フォームページはリリース直前まで修正が続くことが多い。期限を設定せずに差し替えを繰り返すより、修正のたびにバージョン番号付きのURLを発行し、最終承認版のURLをリリース直前まで確定させない運用が現場では安全だ。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
フォームレビューでは「送信できたかどうか」だけでなく「エラーメッセージはわかりやすかったか」「どの入力欄で迷ったか」を具体的に聞く。レビュアーに画面録画か操作動画を送ってもらうと、操作の詰まりポイントが一目でわかる。
フォームの送信が正常に完了する前提でレビューする場合と、エラー状態を意図的に試してもらう場合では、依頼内容が異なる。共有時のメッセージに「必須項目を空欄のまま送信ボタンを押した場合の挙動も確認してください」のように手順を明示しておくと、期待通りのフィードバックが返ってきやすい。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
モックのフォームが実際にデータを送信しないようにするには？
`<form>`タグのaction属性を削除し、JavaScriptで`form.addEventListener('submit', e => e.preventDefault())`を追加してください。これでボタンを押しても送信処理が走らず、UIだけをレビューできます。
フォームのバリデーションエラーをレビュアーに確認させるにはどうすればいいですか？
共有メッセージに「必須項目を空欄で送信する」「メールアドレスの形式を意図的に間違える」などの操作手順を書き添えてください。エラーメッセージの文言や位置についての具体的なフィードバックが得やすくなります。
フォームページに「このページはモックです」というバナーを追加する方法は？
`<body>`の直後に`<div style="background:#ff0;padding:8px;text-align:center">このページはモックです。入力情報は送信されません。</div>`を追記するだけで追加できます。CSSで固定表示にすればスクロールしても常に見える状態になります。