何が共有しづらいのか
Claude Appsが生成するフォームページのHTMLには`<form action="#">`や`<form>`（action未設定）の状態で出力されることが多い。レビュアーが送信ボタンを押すと、ブラウザによっては「送信エラー」のネイティブダイアログが表示され、「フォームが壊れている」と誤解される。共有前に送信動作を完全に止める処理を加えることが重要だ。
フォームを含むページのHTMLをメール添付で送ると、受け取った側が入力欄に個人情報を入れて「送信してみた」とき何が起きるか分からない。特にFormspreeやNetlify Formsのエンドポイントが残っていると、実際のメールが届いてしまう。レビュー段階では外部サービスのエンドポイントを完全に除去するか、テスト用のダミーエンドポイントに差し替えておく。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
HTMLを開いてフォームタグの`action`属性を確認し、外部サービスのURLが設定されていれば削除する。`<form>`タグに`onsubmit="event.preventDefault(); return false;"`を追加すれば、送信ボタンを押してもページ遷移やリクエストが発生しなくなる。これがレビュー用フォームページの最低限の対処だ。
Claude Appsがフォームページと同時に生成するプライバシーポリシーページのリンクが`/privacy`や`../privacy.html`などの相対パスを指している場合がある。単一HTMLをアップロードするとそのリンクは404になる。レビュー段階では`href="#"`に変更し「本番では別ページへのリンクになります」と注記するか、プライバシーポリシーのHTMLも同梱したzipをアップロードする。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
フォームページのデザインレビューはパスワード認証が最もシンプルだ。「フォームはダミーです。デザインと入力項目の適切さを確認してください」という案内とともにパスワードをSlackで送ると、レビュアーが目的を把握した状態でページを開ける。パスワードは8文字以上のランダムな文字列を使い、レビュー完了後に変更または無効化する。
フォームページの改訂が複数回にわたる場合は、URLを変えずにHTMLを差し替える運用が混乱を減らす。ただし「第1稿」と「第2稿」を並べて比較してもらう場合は別URLを発行し、「①旧バージョン ②新バージョン」として両方共有する。比較レビューのフィードバックは具体的で質が高くなる傾向がある。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
フォームページのレビューでは「入力項目の過不足」「必須・任意の表示の分かりやすさ」「エラーメッセージのタイミングと文言」の3点を明示して確認を依頼する。「全体的な感想」を聞いてしまうと「もっとシンプルにしてほしい」という漠然とした意見ばかりが集まり、修正の優先度が付けられなくなる。
フィードバックを受けて入力項目を削除した場合は「なぜ削除したか」の理由を添えて再共有する。「電話番号欄を削除しました。コンバージョン率調査によると電話番号の入力で離脱が増えるため」のように根拠を示すと、次のレビューで同じ「入れてほしい」という意見が出にくくなり、修正のターンが減る。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
Claude Appsが生成したフォームに入力バリデーション（必須項目チェック）が実装されています。送信を止めてもバリデーションは動きますか？
はい、`event.preventDefault()`でフォーム送信を止めても、HTMLの`required`属性によるブラウザネイティブバリデーションは機能します。レビュアーが入力項目を空のまま送信ボタンを押したときにエラーが表示される動作を確認してもらえます。
フォームページにreCAPTCHAウィジェットが含まれています。本番のAPIキーを使わなくても表示できますか？
reCAPTCHAはGoogle提供のAPIキーがないと正常に表示されません。レビュー用途ではreCAPTCHAのスクリプトタグとウィジェット部分をHTMLコメントアウトし、代わりに「（reCAPTCHA設置予定）」というプレースホルダテキストを置いておくことをお勧めします。
マルチステップフォーム（3ステップ構成）を生成しました。URL共有後にステップ送りのボタンは動作しますか？
JavaScriptでステップを切り替える実装であれば動作します。フォームの最終送信だけを`event.preventDefault()`で止め、ステップ間の遷移は通常通り動くようにしておくと、ステップUXのレビューが正確に行えます。