---
title: "Claude Codeで生成したフォーム付きページをレビュー用URLにして共有する方法"
description: "フォーム付きページをクライアントに見せるとき、HTMLファイルを渡すと「開き方が分からない」と返ってくることがある。Claude Code生成のページをすぐ確認できるURLにして、レビューの往復を減らす手順を紹介する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/claude-code-form-page-review-url"
markdown: "https://giga-site.com/articles/claude-code-form-page-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Claude Codeで生成したフォーム付きページをレビュー用URLにして共有する方法

Claude Codeに「お問い合わせフォーム付きのHTMLページを作って」と頼むと数秒でファイルが生成されるが、そのHTMLをそのままクライアントに送ってレビューしてもらうには手間がかかる。URLを発行してリンクを送れば相手がすぐにブラウザで確認でき、フォームの使い勝手を実際に操作しながら評価してもらえる。フォームを含むページ特有の確認事項と、安全に共有するまでの流れを解説する。

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

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

Claude Codeが生成したフォームページには、プロンプトに書いたメールアドレスやFormspreeのエンドポイントURLがaction属性にそのまま入っていることがある。URLを共有してレビュアーがテスト送信すると、実際のメールボックスに通知が届いたり、Formspreeの送信回数制限を消費したりする。共有前に`action`属性を`#`に変更し送信処理を止めるのが最初のステップだ。

フォームページがスマートフォンで正常に表示されるかは、デスクトップで作業している開発者が見落としやすいポイントだ。Claude Codeが生成するフォームのCSSは`max-width`で幅を制限していることが多く、スマートフォンの実機では入力欄が極端に横長になったり、送信ボタンが画面外に出てしまうことがある。URLを発行したら自分のスマートフォンで確認してから共有する。

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

## URL化する前の確認点

フォームのHTMLにreCAPTCHAやhCaptchaが組み込まれている場合、公開済みの`sitekey`がソースコードに含まれる。レビュー用URLの公開範囲を絞らないと、sitekeyが見知らぬ第三者に使われるリスクがある。レビュー中だけアクセス制限を設ける、またはreCAPTCHAのscriptタグをレビュー用URLでは削除してからアップロードするのが安全だ。

入力フォームにJavaScriptのバリデーション（例：メールアドレスの形式チェック、必須項目の確認）が含まれる場合、エラーメッセージが正しく表示されるかを事前に確認しておく。レビュアーに「わざと間違えて入力して、エラーが分かりやすいか確認してください」と依頼すると、バリデーションのUXも同時に評価してもらえる。

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

## 認証と期限の決め方

ECサイトの購入フォームや求人の応募フォームのデザイン確認を外部クリエイターに依頼する場合、パスワードなしのURL共有は避けたい。競合他社に見られると改善施策が漏れるため、パスワード認証でアクセスを制限し、依頼期限と同じ日数だけURLを有効にするのが適切だ。

複数回の修正を経てフォームデザインが固まった後、クライアントに最終確認してもらうフェーズでは認証なしのURLを発行して、スマートフォンや複数のブラウザで気軽に試してもらう方が有効なこともある。ただしその場合はメタタグに`<meta name="robots" content="noindex">`を入れ、テストページが検索エンジンにインデックスされないようにする。

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

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

フォームページのフィードバック依頼には「各入力欄のラベルが何を求めているか直感的に分かるか」「送信完了後のメッセージが分かりやすいか」という2点を明示する。フォームのUXで問題が起きやすいのはエラー時と送信後のフロー体験なので、レビュアーにそこを重点的に見てもらうことで実用的な改善点が集まる。

フィードバックを受けて修正した後、更新日を添えて「v2のURLです、主に電話番号欄のUI改善が変更点です」と伝えると、レビュアーが前回との差分を確認する手間を省ける。ギガサイト便を使えば同一スロットへの上書きで同じURLを維持できるため、「どのURLが最新か」の混乱が起きにくい。

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

## よくある質問

### フォームが実際に送信されてしまうことを防ぎながら、見た目はリアルに見せるには？

`<form>`タグに`onsubmit="event.preventDefault(); alert('送信はデモ版では無効です'); return false;"`を追加する。送信ボタンを押すとアラートが出て処理が止まるため、レビュアーにはリアルなUXを体験させつつ誤送信を完全に防げる。

### フォームに入力した内容がどこかに保存されてしまうリスクはあるか？

静的HTMLとして配信されている場合、サーバーサイドの処理がないためフォーム入力データは保存されない。ただしFormspreeや外部APIのエンドポイントがaction属性に残っている場合は送信データが収集されるため、action属性を必ず`#`に変更してからアップロードする。

### フォームページのURLをSNSでシェアしてテストユーザーを集めたい場合の注意点は？

不特定多数に公開する前に個人情報保護方針のページへのリンクを追加し、「このフォームはテスト用です」という注記を目立つ位置に入れる。また収集したテストデータの保管・削除方針を事前に決めておくこと。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Claude Codeで生成したフォーム付きページをレビュー用URLにして共有する方法",
  "description": "フォーム付きページをクライアントに見せるとき、HTMLファイルを渡すと「開き方が分からない」と返ってくることがある。Claude Code生成のページをすぐ確認できるURLにして、レビューの往復を減らす手順を紹介する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/claude-code-form-page-review-url",
  "url": "https://giga-site.com/articles/claude-code-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": "フォームが実際に送信されてしまうことを防ぎながら、見た目はリアルに見せるには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "`<form>`タグに`onsubmit=\"event.preventDefault(); alert('送信はデモ版では無効です'); return false;\"`を追加する。送信ボタンを押すとアラートが出て処理が止まるため、レビュアーにはリアルなUXを体験させつつ誤送信を完全に防げる。"
      }
    },
    {
      "@type": "Question",
      "name": "フォームに入力した内容がどこかに保存されてしまうリスクはあるか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "静的HTMLとして配信されている場合、サーバーサイドの処理がないためフォーム入力データは保存されない。ただしFormspreeや外部APIのエンドポイントがaction属性に残っている場合は送信データが収集されるため、action属性を必ず`#`に変更してからアップロードする。"
      }
    },
    {
      "@type": "Question",
      "name": "フォームページのURLをSNSでシェアしてテストユーザーを集めたい場合の注意点は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "不特定多数に公開する前に個人情報保護方針のページへのリンクを追加し、「このフォームはテスト用です」という注記を目立つ位置に入れる。また収集したテストデータの保管・削除方針を事前に決めておくこと。"
      }
    }
  ]
}
```