AI活用

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

Google Stitchが生成するフォーム付きHTMLページは、入力欄・エラー表示・送信ボタンが動作する状態になっているため、そのままレビュー用に公開すると実際のAPIに誤データが送信されてしまう可能性がある。事前に送信処理を無効化してからプレビューURLを発行することで安全なレビュー環境を作れる。

何が共有しづらいのか

Google Stitchが生成するフォームにはGoogle Formsやカスタムバックエンドへのaction URLが設定されることがある。レビュアーが入力して送信ボタンを押した瞬間に本番の受信ボックスやデータベースにデータが届いてしまうため、レビュー用途では必ずaction属性を無効化する処理が必要だ。

フォームのバリデーションが厳しく設定されている場合、レビュアーが正しい形式の値を入力しないとフォームの後半が確認できない。特にメールアドレスや電話番号の形式チェックで弾かれると、入力後のUIをレビューしてもらえなくなる。テスト用のサンプル入力値を共有URLとあわせて案内しておくと、レビュアーが詰まらずに確認できる。

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

URL化する前の確認点

Google Stitchのフォームに含まれるGoogleフォームへの送信コードは、form actionだけでなくJavaScript内のfetchとしても実装されることがある。HTMLのaction属性を消しただけでは対処できないため、`<script>`タグ内のfetch・XMLHttpRequest・axios呼び出しをすべて検索し、送信を行う関数の中身を`console.log`に置き換えるかコメントアウトする。

フォームにGoogle reCAPTCHAが組み込まれている場合、reCAPTCHAのサイトキーが登録済みのドメインでないと検証が通らずフォームが動作しない。レビュー用にはreCAPTCHAを無効化するか、テスト用のサイトキー(`6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI`)に差し替えることで動作確認できる。

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

認証と期限の決め方

フォームページは問い合わせや申し込みの受け口になるページの場合が多く、実際のサービス名やブランドカラーが確認できる状態での共有になることが多い。競合他社の目に触れないよう、社外共有の場合はパスワード認証を必ず設定する。パスワードは共有URLとは別のメッセージで伝え、URLとパスワードが同一の文書に含まれないよう気をつける。

フォームデザインのレビューは通常1〜3回の往復で完結することが多い。最初のレビュー依頼から1週間をURL有効期限の目安として設定し、期間中にフィードバックをまとめてもらう形にすると効率的だ。修正後の差し替えアップロードで同じURLが更新されるため、2回目以降も同じURLで確認できることを依頼時に伝えておく。

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

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

フォームのレビューでは「入力の流れが自然か」「エラーメッセージが何をすればよいか伝わるか」「完了後の画面が次のアクションを促しているか」の3点を確認してほしい観点として明示すると、デザインに詳しくないレビュアーからも実用的な意見が出てきやすい。

フォームのフィードバックは「◯番目の入力フィールドの」というように番号やラベル名で場所を特定してもらうよう依頼する。スクリーンショットに番号や矢印を書き込んで送ってもらうと、どの部分への指摘かが一目でわかり、対応漏れを防ぎやすい。フィードバック回収後はフィールドごとに対応ステータスを管理するシートを作り、完了したものから消し込んでいくとよい。

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

よくある質問

フォームの送信を無効化した場合、送信後の完了画面もレビューしてもらえますか?

送信を無効化すると完了画面への遷移もできなくなります。完了画面は別のHTMLファイルとして保存し、そのURLも合わせて共有すると完了画面までレビューしてもらえます。

Google StitchのフォームにGoogle Analyticsのイベント計測が含まれている場合、レビュー時のアクセスも計測されてしまいますか?

GAのIDが設定されていると計測対象になります。レビュー用には`gtag`の初期化コードをコメントアウトするか、テスト用のプロパティIDに差し替えてからアップロードしてください。

フォームを何度も修正してアップロードし直す場合、レビュアーへの通知はどうすればよいですか?

差し替えアップロードのたびにSlackやメールで「URLは同じですが内容を更新しました、◯◯を修正しています」と変更箇所を添えて通知すると、レビュアーが何を見ればよいか迷わずに確認できます。

関連記事

AI活用

Google Stitchで生成したLP案をレビュー用URLにして共有する方法

Google StitchでLP案を生成したデザイナー・マーケター向け。生成したHTMLをレビュー用URLとして安全に共有するための前処理・認証設定・フィードバック回収の手順を具体的に解説し、どの認証方式が適切か判断できるようにする。

4分で読める
「AI活用」の記事をもっと見る →