---
title: "Claude Appsで生成したフォーム付きページをレビュー用URLにして共有する方法"
description: "Claude Appsでフォーム付きページを生成したマーケター・Webデザイナー向け。フォーム無効化の方法・個人情報リスクへの対処・パスワード認証の設定から差し替え運用までを実践的に解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/claude-apps-form-page-review-url"
markdown: "https://giga-site.com/articles/claude-apps-form-page-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Claude Appsで生成したフォーム付きページをレビュー用URLにして共有する方法

Claude Appsで問い合わせフォームや資料請求フォームが埋め込まれたページを生成したとき、そのHTMLを関係者に確認してもらおうとすると「フォームが送信できない」「エラーページになる」という問題が起きやすい。ギガサイト便でURL化する前にフォーム送信を無効化しておけば、デザインと導線のレビューだけに集中できる環境をすばやく作れる。

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

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

Claude Appsが生成するフォームページのHTMLには`<form action="#">`や`<form>`（action未設定）の状態で出力されることが多い。レビュアーが送信ボタンを押すと、ブラウザによっては「送信エラー」のネイティブダイアログが表示され、「フォームが壊れている」と誤解される。共有前に送信動作を完全に止める処理を加えることが重要だ。

フォームを含むページのHTMLをメール添付で送ると、受け取った側が入力欄に個人情報を入れて「送信してみた」とき何が起きるか分からない。特にFormspreeやNetlify Formsのエンドポイントが残っていると、実際のメールが届いてしまう。レビュー段階では外部サービスのエンドポイントを完全に除去するか、テスト用のダミーエンドポイントに差し替えておく。

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

## URL化する前の確認点

HTMLを開いてフォームタグの`action`属性を確認し、外部サービスのURLが設定されていれば削除する。`<form>`タグに`onsubmit="event.preventDefault(); return false;"`を追加すれば、送信ボタンを押してもページ遷移やリクエストが発生しなくなる。これがレビュー用フォームページの最低限の対処だ。

Claude Appsがフォームページと同時に生成するプライバシーポリシーページのリンクが`/privacy`や`../privacy.html`などの相対パスを指している場合がある。単一HTMLをアップロードするとそのリンクは404になる。レビュー段階では`href="#"`に変更し「本番では別ページへのリンクになります」と注記するか、プライバシーポリシーのHTMLも同梱したzipをアップロードする。

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

## 認証と期限の決め方

フォームページのデザインレビューはパスワード認証が最もシンプルだ。「フォームはダミーです。デザインと入力項目の適切さを確認してください」という案内とともにパスワードをSlackで送ると、レビュアーが目的を把握した状態でページを開ける。パスワードは8文字以上のランダムな文字列を使い、レビュー完了後に変更または無効化する。

フォームページの改訂が複数回にわたる場合は、URLを変えずにHTMLを差し替える運用が混乱を減らす。ただし「第1稿」と「第2稿」を並べて比較してもらう場合は別URLを発行し、「①旧バージョン ②新バージョン」として両方共有する。比較レビューのフィードバックは具体的で質が高くなる傾向がある。

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

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

フォームページのレビューでは「入力項目の過不足」「必須・任意の表示の分かりやすさ」「エラーメッセージのタイミングと文言」の3点を明示して確認を依頼する。「全体的な感想」を聞いてしまうと「もっとシンプルにしてほしい」という漠然とした意見ばかりが集まり、修正の優先度が付けられなくなる。

フィードバックを受けて入力項目を削除した場合は「なぜ削除したか」の理由を添えて再共有する。「電話番号欄を削除しました。コンバージョン率調査によると電話番号の入力で離脱が増えるため」のように根拠を示すと、次のレビューで同じ「入れてほしい」という意見が出にくくなり、修正のターンが減る。

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

## よくある質問

### Claude Appsが生成したフォームに入力バリデーション（必須項目チェック）が実装されています。送信を止めてもバリデーションは動きますか？

はい、`event.preventDefault()`でフォーム送信を止めても、HTMLの`required`属性によるブラウザネイティブバリデーションは機能します。レビュアーが入力項目を空のまま送信ボタンを押したときにエラーが表示される動作を確認してもらえます。

### フォームページにreCAPTCHAウィジェットが含まれています。本番のAPIキーを使わなくても表示できますか？

reCAPTCHAはGoogle提供のAPIキーがないと正常に表示されません。レビュー用途ではreCAPTCHAのスクリプトタグとウィジェット部分をHTMLコメントアウトし、代わりに「（reCAPTCHA設置予定）」というプレースホルダテキストを置いておくことをお勧めします。

### マルチステップフォーム（3ステップ構成）を生成しました。URL共有後にステップ送りのボタンは動作しますか？

JavaScriptでステップを切り替える実装であれば動作します。フォームの最終送信だけを`event.preventDefault()`で止め、ステップ間の遷移は通常通り動くようにしておくと、ステップUXのレビューが正確に行えます。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Claude Appsで生成したフォーム付きページをレビュー用URLにして共有する方法",
  "description": "Claude Appsでフォーム付きページを生成したマーケター・Webデザイナー向け。フォーム無効化の方法・個人情報リスクへの対処・パスワード認証の設定から差し替え運用までを実践的に解説する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/claude-apps-form-page-review-url",
  "url": "https://giga-site.com/articles/claude-apps-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": "Claude Appsが生成したフォームに入力バリデーション（必須項目チェック）が実装されています。送信を止めてもバリデーションは動きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい、`event.preventDefault()`でフォーム送信を止めても、HTMLの`required`属性によるブラウザネイティブバリデーションは機能します。レビュアーが入力項目を空のまま送信ボタンを押したときにエラーが表示される動作を確認してもらえます。"
      }
    },
    {
      "@type": "Question",
      "name": "フォームページにreCAPTCHAウィジェットが含まれています。本番のAPIキーを使わなくても表示できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "reCAPTCHAはGoogle提供のAPIキーがないと正常に表示されません。レビュー用途ではreCAPTCHAのスクリプトタグとウィジェット部分をHTMLコメントアウトし、代わりに「（reCAPTCHA設置予定）」というプレースホルダテキストを置いておくことをお勧めします。"
      }
    },
    {
      "@type": "Question",
      "name": "マルチステップフォーム（3ステップ構成）を生成しました。URL共有後にステップ送りのボタンは動作しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JavaScriptでステップを切り替える実装であれば動作します。フォームの最終送信だけを`event.preventDefault()`で止め、ステップ間の遷移は通常通り動くようにしておくと、ステップUXのレビューが正確に行えます。"
      }
    }
  ]
}
```