---
title: "Gemini CLIで生成したフォーム付きページをレビュー用URLにして共有する方法"
description: "入力UIとバリデーションが1ファイルに収まったフォームは、実際に操作してもらわないと改善提案がもらいにくい。Gemini CLIで生成したフォーム付きページを動作確認できる形で共有するためのURL発行手順と、レビュー依頼時の伝え方のコツをまとめた。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/gemini-cli-form-page-review-url"
markdown: "https://giga-site.com/articles/gemini-cli-form-page-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Gemini CLIで生成したフォーム付きページをレビュー用URLにして共有する方法

Gemini CLIで生成したフォーム付きページは、入力UIとバリデーションロジックが1ファイルに収まっていることが多い。動作確認や改善提案をもらうには、実際にフォームを操作できるURLを相手に渡すのが最も効率的な方法だ。

> Source HTML: https://giga-site.com/articles/gemini-cli-form-page-review-url
> Article index: https://giga-site.com/articles/index.md

## 何が共有しづらいのか

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段階評価で答えてもらうと定量的な比較ができます。

## 関連記事

- [Gemini CLIで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/gemini-cli-lp-draft-review-url/index.md)
- [Gemini CLIで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/gemini-cli-admin-mock-review-url/index.md)
- [Gemini CLIで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/gemini-cli-slide-html-review-url/index.md)
- [Gemini CLIで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/gemini-cli-internal-tool-prototype-review-url/index.md)
- [Codex CLIで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/codex-cli-form-page-review-url/index.md)
- [Codex CLIで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/codex-cli-lp-draft-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Gemini CLIで生成したフォーム付きページをレビュー用URLにして共有する方法",
  "description": "入力UIとバリデーションが1ファイルに収まったフォームは、実際に操作してもらわないと改善提案がもらいにくい。Gemini CLIで生成したフォーム付きページを動作確認できる形で共有するためのURL発行手順と、レビュー依頼時の伝え方のコツをまとめた。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/gemini-cli-form-page-review-url",
  "url": "https://giga-site.com/articles/gemini-cli-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": "Gemini CLIが生成したフォームのaction属性を一時的に無効化するには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "`<form>`タグのaction属性を削除し、`<script>document.querySelector('form').addEventListener('submit',e=>e.preventDefault())</script>`を追加してください。これでSubmitボタンを押しても送信処理が走りません。"
      }
    },
    {
      "@type": "Question",
      "name": "フォームのレビューに画面録画を使うよう依頼する際のポイントは？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "「操作中に感じた疑問や違和感を声に出しながら録画してください」と依頼すると、テキストでは伝わらない迷いポイントが録画に残ります。LoomやVimeoの無料プランでも十分です。"
      }
    },
    {
      "@type": "Question",
      "name": "フォームのモックを複数バリエーション比較でレビューしてもらうには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "バリエーションごとに別URLを発行し、「A案：1列レイアウト」「B案：2列レイアウト」のようにラベルをつけて共有してください。どちらが入力しやすかったかを5段階評価で答えてもらうと定量的な比較ができます。"
      }
    }
  ]
}
```