--- title: "Galileo AIで生成したフォーム付きページをレビュー用URLにして共有する方法" description: "Galileo AIで生成したフォームUIデザインをHTML化してレビューURLを発行したいデザイナーやプロダクトマネージャー向け。送信先の無効化・マーケティングトラッカーの除去・フォームUXレビューに特化したフィードバック設問の設計を解説し、誤送信リスクなく外部レビュアーに届ける判断基準を提供する。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/galileo-ai-form-page-review-url" markdown: "https://giga-site.com/articles/galileo-ai-form-page-review-url/index.md" category: "AI活用" publishedAt: "2026-06-25" updatedAt: "2026-06-25" readingMinutes: 5 --- # Galileo AIで生成したフォーム付きページをレビュー用URLにして共有する方法 Galileo AIが生成するフォームUIは、フィールドの配置・入力補助テキスト・エラー表示のデザインまで整合性の取れた状態で提示される。そのUIをHTMLとしてURLで共有できれば、デザイン案をUXライターや事業担当者が自分のブラウザで触れる環境を数分で用意できる。ただし送信先の設定が残ったままURLを公開するリスクは見落とされやすい。この記事で確認手順を整理してほしい。 > Source HTML: https://giga-site.com/articles/galileo-ai-form-page-review-url > Article index: https://giga-site.com/articles/index.md ## 何が共有しづらいのか Galileo AIのフォームデザインはFigmaでインタラクティブなプロトタイプとして動作するが、HTML変換後はFigmaのプロトタイプ接続が失われるため、ボタン押下後の画面遷移が再現されないことが多い。「送信したら確認画面に進むはず」という期待でレビュアーがボタンを押すと何も起きず、壊れていると誤解される。変換後の動作範囲を依頼文で明示することが大切だ。 Figmaの開発モードでコードをコピーして作ったHTMLフォームに、コピー元のサービスのformspreeやNetlifyフォームのエンドポイントが含まれるケースがある。特にサンプルコードからフォームを実装した場合に起きやすく、送信テストを行うと無関係なサービスのダッシュボードに入力データが届く事態になる。全フォームのaction属性とfetch先を洗い出してから公開する。 - 相手がログインなしで開ける状態か確認する - PCとスマホで最低1回ずつ表示を確認する - 内部情報・個人情報・不要な外部送信が残っていないか見る - レビュー期限と修正時の差し替え方を決めておく ## URL化する前の確認点 フォームHTMLのheadタグ内にGoogle Tag Manager、Meta Pixel、HotjarのトラッキングスクリプトがFigmaのサンプルや変換ツールから引き継がれていないかを確認する。これらのスクリプトはページ表示だけでフォームの入力操作を記録するため、レビュアーの入力内容が外部サービスのデータとして蓄積されてしまう可能性がある。レビュー用途ではheadタグ内のthirdpartyスクリプトをすべて削除する。 フォームに使われているUIコンポーネントライブラリ（Chakra UI、Mantine等）のバージョンとCDN URLが有効かどうかを確認する。Unpkg.comやjsdelivr.comのURLは通常安定しているが、specific versionのURLが404を返すことがある。共有前にブラウザのネットワークタブを開いてすべてのリソースが200で返ることを確認する。 - HTML内の外部script・form action・iframeを確認する - APIキーやトークンらしき文字列がないか検索する - 画像・CSS・JSのパスが公開後も解決できるか見る - noindexと認証を混同せず、必要なら両方設定する ## 認証と期限の決め方 フォームデザインのレビュアーがUXライターの場合、ラベルテキストやプレースホルダーのコピーに関する意見を収集することが目的になる。この用途では認証なしのURLでも問題は少ないが、フォームのデザインコンセプトが競合に漏れたくない場合はパスワード認証を設定する。設計段階のUI資料として扱うか、公開前提の素材として扱うかで認証レベルを決める。 UXレビューのラウンドが複数回ある場合（ラフ案→修正案→最終案）、ラウンドごとにURLを差し替えて期限を更新するのが管理上シンプルだ。「最終案のURLにアクセスしているつもりがラフ案を見ていた」という混乱を防ぐため、依頼メッセージに「今回共有するのは第2ラウンドの修正案です（○月○日期限）」と明記する習慣をつける。 - 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する - 特定の相手だけ: パスワードまたはメール認証を使う - 会社内だけ: 会社ドメイン認証を検討する - 短期レビュー: 期限を設定して古いURLを残さない ## 共有後のフィードバック回収 フォームのUXレビューでは「入力項目が多すぎて離脱したくなる箇所はどこか」「エラーメッセージが出たとき何をすればよいかわかるか」という実際の操作体験に基づく設問が有効だ。評価を5段階で取るより、「迷った・詰まった箇所を自由記述してもらう」形式のほうがデザイン改善につながる具体的な情報を集めやすい。 UXライターへのコピーレビューでは、フォームの各フィールドのラベル・プレースホルダー・バリデーションメッセージを一覧にしたスプレッドシートと共有URLをセットで送る方法が効率的だ。レビュアーがUIとスプレッドシートを並べて確認でき、修正案を直接スプレッドシートに書き込んでもらうことで、反映漏れを防げる。 - 確認してほしい観点を3つ以内に絞る - 期限と返信先を明記する - 修正後も同じURLで見られるか伝える - 最終版と途中版が混ざらないようタイトルを付ける ## よくある質問 ### Galileo AIのFigmaデザインをHTMLに変換したらフォームのバリデーションUIが再現されませんでした。どうすれば見せられますか？ FigmaのComponent Variantで表現したバリデーション状態（エラー表示・成功表示）はHTML変換では単一状態しか書き出されないことが多いです。JavaScriptでinputイベントに応じたクラス切り替えを手動で実装するか、バリデーション状態のスクリーンショットを依頼文に貼り付けて補足する方法が現実的です。 ### フォームに電話番号入力欄があり、ハイフン自動挿入のJSが動作するか確認したいのですが、共有URLで確認できますか？ inputイベントベースのハイフン自動挿入スクリプトは共有URLでも動作します。ただしHTML変換後にスクリプトが正しく参照されているか確認するため、変換後のHTMLで実際にアクセスして入力テストを行ってから共有するのが確実です。 ### フォームの入力途中でブラウザのタブを閉じた場合に「入力内容が失われます」の警告を出すbeforeunloadの実装は共有URLで動作しますか？ beforeunloadイベントはHTTPSで提供されるページで動作します。共有サービスがHTTPSで提供していれば問題なく動作しますが、ブラウザによっては特定の条件下でダイアログが表示されない場合があります。レビュー前にChromeとSafariの両方で動作確認を行ってください。 ## 関連記事 - [Galileo AIで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/galileo-ai-lp-draft-review-url/index.md) - [Galileo AIで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/galileo-ai-admin-mock-review-url/index.md) - [Galileo AIで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/galileo-ai-slide-html-review-url/index.md) - [Galileo AIで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/galileo-ai-internal-tool-prototype-review-url/index.md) - [Firebase Studioで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/firebase-studio-form-page-review-url/index.md) - [Google Stitchで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/google-stitch-form-page-review-url/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "Galileo AIで生成したフォーム付きページをレビュー用URLにして共有する方法", "description": "Galileo AIで生成したフォームUIデザインをHTML化してレビューURLを発行したいデザイナーやプロダクトマネージャー向け。送信先の無効化・マーケティングトラッカーの除去・フォームUXレビューに特化したフィードバック設問の設計を解説し、誤送信リスクなく外部レビュアーに届ける判断基準を提供する。", "datePublished": "2026-06-25", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/galileo-ai-form-page-review-url", "url": "https://giga-site.com/articles/galileo-ai-form-page-review-url", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "AI活用", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "Galileo AIのFigmaデザインをHTMLに変換したらフォームのバリデーションUIが再現されませんでした。どうすれば見せられますか？", "acceptedAnswer": { "@type": "Answer", "text": "FigmaのComponent Variantで表現したバリデーション状態（エラー表示・成功表示）はHTML変換では単一状態しか書き出されないことが多いです。JavaScriptでinputイベントに応じたクラス切り替えを手動で実装するか、バリデーション状態のスクリーンショットを依頼文に貼り付けて補足する方法が現実的です。" } }, { "@type": "Question", "name": "フォームに電話番号入力欄があり、ハイフン自動挿入のJSが動作するか確認したいのですが、共有URLで確認できますか？", "acceptedAnswer": { "@type": "Answer", "text": "inputイベントベースのハイフン自動挿入スクリプトは共有URLでも動作します。ただしHTML変換後にスクリプトが正しく参照されているか確認するため、変換後のHTMLで実際にアクセスして入力テストを行ってから共有するのが確実です。" } }, { "@type": "Question", "name": "フォームの入力途中でブラウザのタブを閉じた場合に「入力内容が失われます」の警告を出すbeforeunloadの実装は共有URLで動作しますか？", "acceptedAnswer": { "@type": "Answer", "text": "beforeunloadイベントはHTTPSで提供されるページで動作します。共有サービスがHTTPSで提供していれば問題なく動作しますが、ブラウザによっては特定の条件下でダイアログが表示されない場合があります。レビュー前にChromeとSafariの両方で動作確認を行ってください。" } } ] } ```