AI活用

Relumeで生成したフォーム付きページをレビュー用URLにして共有する方法

Relumeで生成したフォーム付きLPや申し込みページをレビューに回すと「ボタンを押したら本当に送信されるの?」と心配されることがある。テスト環境と本番環境の境界をレビュワーに伝えられていないのが原因だ。送信ボタンを無効化したうえでURLを発行すれば、デザインと導線だけに集中したフィードバックを引き出せる。

何が共有しづらいのか

フォーム付きページをそのまま共有すると、レビュワーが動作確認のつもりでテスト送信した内容が実際のCRMやメールに届くという事故が起きやすい。「本番のフォームに繋がっていない」ことをテキストだけで説明しても、操作に慣れていない相手には伝わりにくい。

フォームのバリデーション動作(必須項目の赤枠表示、メールアドレス形式エラーなど)もレビュー対象になる場合が多い。PDFや画像に変換してしまうとこの部分が確認できず、「フォームが正しく動くか」というフィードバックが得られない。HTMLのまま安全に共有できる環境が必要だ。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

URL化する前の確認点

フォームの`action`属性がMailchimpやSalesforceなど外部サービスを指している場合は、公開前に必ず`action="#"`に書き換える。あわせて`<button type="submit">`に`onclick="event.preventDefault(); return false;"`を追加しておくと二重の安全策になる。変更後に自分で送信ボタンを押して、ページが遷移しないことを確認してから共有しよう。

フォームのinput要素に`autocomplete`属性が設定されていると、レビュワーのブラウザが以前入力した個人情報を自動補完してしまうことがある。レビュー用URLではautocompleteをオフにするか、フォーム全体に`autocomplete="off"`を付与しておくと、レビュワーのプライバシーを守れる。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

認証と期限の決め方

問い合わせフォームのデザインレビューには、フォームの送信先となる部門のメンバーも参加させると「この項目は必要か」という議論が前倒しでできる。その場合、部門のメールドメインで絞った認証にすると招待管理が楽になる。

フォームページはサービスリリース前のフェーズに使われることが多いため、リリース日をURL有効期限の目安にするとよい。期限設定を忘れたまま放置すると、リリース後の本番URLと並存してユーザーが古いフォームに入力するという混乱を招く可能性がある。

  • 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
  • 特定の相手だけ: パスワードまたはメール認証を使う
  • 会社内だけ: 会社ドメイン認証を検討する
  • 短期レビュー: 期限を設定して古いURLを残さない

共有後のフィードバック回収

フォームページのレビューで確認してほしい観点は「入力フィールドのラベルがわかりやすいか」「エラーメッセージが何をすべきか明確に伝えているか」「送信後の導線(サンクスページ)があるか」の3点に絞ると、回答の焦点がぼけない。

フォーム全体の文章トーンについてのフィードバックは別途コピーライターに依頼する場合が多い。そのため「デザインレビュー」「コピーレビュー」「UXレビュー」を別のURLまたは別の期限で依頼すると、担当者が迷わず自分の観点だけに集中できる。

  • 確認してほしい観点を3つ以内に絞る
  • 期限と返信先を明記する
  • 修正後も同じURLで見られるか伝える
  • 最終版と途中版が混ざらないようタイトルを付ける

よくある質問

送信ボタンを無効化したのに、レビュワーがページを操作したらCRMにデータが届いたと言われました。

ボタンの無効化だけでは`form action`へのPOSTが防げないケースがあります。`action`属性を`#`に変更し、サーバー側のエンドポイントへのリクエストを根本的に遮断してください。JavaScriptのsubmitイベントをpreventDefaultするだけでは不十分な場合があります。

フォームのバリデーション動作もレビューしてほしいのですが、必須項目の確認はできますか?

HTML5のバリデーション(required属性や type="email"によるチェック)は送信ボタンを押した際にブラウザが実行するため、actionを#に設定してもバリデーションエラーの表示は確認できます。URLを共有してレビュワーに空欄送信を試してもらうとよいでしょう。

レビューURLと本番URLを間違えないようにするにはどうすればいいですか?

レビュー用HTMLのheaderに「これはレビュー用プレビューです。データは送信されません。」というバナーを表示するのが最も確実です。背景色を黄色などで目立たせると、本番と見間違えるリスクを大幅に下げられます。

関連記事

「AI活用」の記事をもっと見る →