AI活用

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

Builder.io Visual Copilotで問い合わせフォームや申込フォームを含むページを生成したとき、そのままレビュアーに共有するとフォームの送信先が未設定で「エラーになる」という誤解を生みやすい。ギガサイト便でURLを発行する際にその点を一言添えれば、レビュアーはデザインと導線の確認に集中できる。共有までの手順と注意点をまとめた。

何が共有しづらいのか

フォーム付きページは`<form action="...">`の送信先が未設定か、開発用エンドポイントを指していることが多い。レビュアーが誤ってフォームを送信すると、エラーページに飛ぶか、開発環境のサーバーにダミーデータが送られてしまう。レビュー用URLとして共有する前に、`action`属性を空欄にするか`javascript:void(0)`に差し替えてフォームを無効化しておくのが基本だ。

フォームに入力項目(名前・電話番号・メールアドレス)が並んでいると、レビュアーが「実際に入力して試してみた」とき自分の個人情報を送ってしまう可能性がある。フォームを無効化していない場合でも、送信ボタンのラベルを「(レビュー用・送信不可)」に変えるだけで誤送信リスクを下げられる。

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

URL化する前の確認点

フォームの`action`属性と`method`属性を確認し、外部サービスのエンドポイント(Formspree・HubSpot・Salesforce等)に実際のデータを送らないように処理する。特にHubSpotのフォームIDが埋め込まれている場合、送信するとCRMに本物のリードとして登録される危険がある。レビュー段階ではフォームをdisabledにするJavaScriptを一行追加するだけで安全になる。

プライバシーポリシーへのリンクや「個人情報の取り扱いについて」のテキストが、実在しないURLを指していないかも確認する。存在しないURLへのリンクがあると、レビュアーが「ここをクリックしたら404でした」というコメントを残し、本来確認してほしいデザインの議論から話がそれてしまう。

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

認証と期限の決め方

マーケティング担当者や営業が確認するフォームページのレビューは、パスワード認証が最も手軽だ。SlackのDMでパスワードとURLを同時に送り、「フォームはレビュー用なので送信ボタンは機能しません」と一行添えると誤解を防げる。フィードバック期限は依頼から3営業日以内に設定し、過ぎたらURLを無効化する。

A/Bテスト候補の複数バージョンを並行でレビューしてもらう場合は、バージョンごとにURLを発行し「AパターンURL」「BパターンURL」とSlackで明示する。同じURLを差し替えると、レビュアーがどちらを見ているか分からなくなるため、複数バージョンは別URLで管理するのが鉄則だ。

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

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

フォームページのレビューでは「①フォームの入力項目は適切か ②必須・任意の表示は分かりやすいか ③送信ボタンのコピーに違和感はないか」に絞ってフィードバックを依頼する。フォームのUXは細部が多いため、観点を絞らないと「フォントが気になる」「背景色が合わない」という方向に話が行きやすい。

「フォームのステップ数を減らしてほしい」というフィードバックを受けた場合は、変更前後のフィールド数と削除した理由を明記して再共有する。「電話番号欄を削除し、2ステップを1ステップに統合しました」のように具体的な変更理由を示すと、次のレビューで同じ議論が蒸し返されにくい。

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

よくある質問

フォームの送信ボタンを押しても何も起きないようにしたいのですが、HTMLをどう変更すればよいですか?

フォームタグに`onsubmit="return false;"`を追加するか、送信ボタンに`type="button"`を指定するだけで送信を止められます。あるいはフォーム全体を`<fieldset disabled>`で囲むと入力もできなくなり、よりレビュー専用の状態にできます。

フォームページにGoogleアナリティクスのタグが埋め込まれています。レビューURL経由のアクセスが計測に混入しませんか?

混入します。レビュー用URLを共有する前にGAタグを一時的に削除するか、GA4のフィルタ機能でIPアドレスや内部トラフィックを除外する設定を入れておくことをお勧めします。

フォームページのレビューが終わって本番に近い状態にしたいのですが、レビュー用URLをそのまま本番として使えますか?

レビュー用URLはフォームを無効化した状態でアップロードしているため、本番用には別途フォームの送信先を設定したHTMLを用意する必要があります。レビューOKが出たら本番用の設定でホスティングし直すフローをあらかじめ設計しておくとスムーズです。

関連記事

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