何が共有しづらいのか
Gemini CLIが生成したフォームのHTMLをファイルとしてローカルで開くと、`file://`スキームに対するCORSポリシーでfetch・XHR呼び出しがブロックされる。フォームのSubmit動作を実際に確認するにはHTTPS経由のURLが必要で、URLで共有するのが最も手っ取り早い解決策だ。
フォームの見た目確認だけでなく、送信後のサンクスページへの遷移・エラーメッセージの表示タイミング・入力欄のtabキー移動順序なども、URLで共有してレビュアーに実際に操作してもらうことで初めて確認できる。静的なスクリーンショットでは把握できない体験上の問題を早期に発見できる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
Gemini CLIが生成したフォームでは`<form method="POST" action="/api/submit">`のように、まだ存在しないAPIエンドポイントへのactionが設定されていることが多い。モックとして共有する場合はaction属性を空文字に変更し、JavaScriptで`submit`イベントをキャンセルする処理を追加してから公開する。
フォームに`autocomplete`属性が設定されていない場合、ブラウザが過去の入力履歴を補完することがある。レビュアーが誤って個人情報を入力しないよう、モック用のダミー入力値をHTML上にサンプルとして表示するか、placeholder属性に「例：taro@example.com」のような明示的なダミー値を入れておく。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
お問い合わせフォームやユーザー登録フォームのモックを社外クライアントに見せる場合、フォームに入力した内容が実際に保存・送信されないことをメッセージと画面の両方で明示したうえで、パスワード認証を設定する。フォームのUIが出来上がるたびに毎回新しいURLを発行するより、差し替え対応できる設計にして同じURLを継続利用する方が混乱が少ない。
社内のQAチームやアクセシビリティ担当者がフォームをテストする場合は、会社ドメイン認証で全員が同じURLにアクセスできるようにし、有効期限をテスト完了予定日の翌日に設定しておく。テスト終了後に誤って本番データを送信する事故を防ぐためにも、期限管理は重要だ。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
フォームのレビューでは操作手順を具体的に指定するのが重要だ。「フォームを最初から最後まで入力して送信してください」「必須項目を空欄のまま送信ボタンを押してください」「メールアドレス欄に無効な形式を入力してください」という3つのシナリオをURLとともに共有すると、バリデーション周りのUX問題が網羅的に確認できる。
フィードバックは画面録画で受け取るのが最も情報量が多い。LoomやCleanshot Xなどの簡易録画ツールを使い「操作しながら気になった点を話してください」と伝えると、テキストコメントでは伝わりにくいフォームのUX問題が明確になる。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
Gemini CLIが生成したフォームのaction属性を一時的に無効化するには？
`<form>`タグのaction属性を削除し、`<script>document.querySelector('form').addEventListener('submit',e=>e.preventDefault())</script>`を追加してください。これでSubmitボタンを押しても送信処理が走りません。
フォームのレビューに画面録画を使うよう依頼する際のポイントは？
「操作中に感じた疑問や違和感を声に出しながら録画してください」と依頼すると、テキストでは伝わらない迷いポイントが録画に残ります。LoomやVimeoの無料プランでも十分です。
フォームのモックを複数バリエーション比較でレビューしてもらうには？
バリエーションごとに別URLを発行し、「A案：1列レイアウト」「B案：2列レイアウト」のようにラベルをつけて共有してください。どちらが入力しやすかったかを5段階評価で答えてもらうと定量的な比較ができます。