ChatGPT・Claude・Geminiでフォームは作れる?AIでできること・できないことと、安全に公開する方法【プロンプト例付き】

AIでフォームはつくれるか?アイキャッチ画像
フォーム

ChatGPTやClaude、Geminiに頼めば、お問い合わせフォームやアンケートフォームの画面は数分で作れます。Googleフォームにも、Geminiが質問項目を作ってくれる「フォーム作成サポート」が加わりました。一方で、「AIで作ったフォームを、そのまま顧客向けに公開して大丈夫なのか」「送信されたデータはどこに保存されるのか」と迷う方も多いのではないでしょうか。

この記事では、AIでフォームを作る3つの方法と、AIでできること・できないことを比較表で整理します。そのうえで、顧客や取引先から回答を集めるフォームを、安全に公開・運用する方法を、実際のプロンプト例とAIの生成結果を交えて解説します。

この記事の結論

  • 生成AIでフォームは作れます。作り方は「コードを書かせる」「AIの公開機能を使う」「Googleフォーム内蔵のGeminiを使う」の3通りです。
  • ただし、AIが作れるのは「見た目」か「質問項目の下書き」までです。回答の受け取り・保管・自動返信・運用の仕組みは、別に必要です。
  • 社内向けや一時的な利用ならAIだけでも十分です。顧客や取引先の個人情報を継続して集めるなら、見た目はAIで作り、受付から運用までは専用の基盤に任せるのが安全です。

フォームの受付から運用までを任せられる基盤を検討するときは、Webフォーム・メール配信・データベースの機能をまとめた「クライゼル」のカタログ(無料PDF)もご活用ください。

AIで作ったフォームを、安全に公開・運用するなら

クライゼルのカタログ資料ダウンロード

トライコーンのCRMプラットフォーム「クライゼル」は、Webフォーム・メール配信・データベースを1つにまとめたサービスです。フォームの作り方、自動返信・通知、セキュリティ、料金をカタログにまとめています。

無料でカタログをダウンロード ▶

この記事の著者
服部誠

トライコーン(株)
Senior Vice President of Marketing。
同社 元取締役COO
Web広告、CRM、CDP、データ可視化などお客様のWebマーケティングの課題解決に長年従事。
Salesforce Marketing cloud メールスペシャリスト / アドミニストレータ / コンサルタントおよび、Salesforce アドミニストレータの各認定資格を保持。
Markezine Dayでの登壇や、自社ウェビナー、共催セミナーでの登壇実績多数。

服部誠をフォローする
  1. この記事でわかること
  2. 生成AIでWebフォームは作れる?結論と前提
    1. AIでフォームを作る3つの方法
    2. Googleフォームの「フォーム作成サポート(Gemini)」とは
    3. ChatGPT Sites・Claude・Gemini Canvasの公開機能とは
    4. フォームが「使える」状態になるまでの流れ
  3. AIでできること・できないこと【4つの作り方を比較】
    1. 主要3社の「公開機能」をフォーム用途で比べると
  4. AIでフォームを作るときの落とし穴
    1. ① コードだけ書かせる場合:送信先がない
    2. ② AIの公開機能を使う場合:企業の継続利用に向かない理由
    3. ③ Googleフォーム×Geminiの場合:下書きの先は人が仕上げる
    4. AIだけで作る方法が向いている使い方
  5. 解決策:AIで「見た目」、クライゼルで「受付・保管・運用」
    1. クライゼルのフォームは2つの作り方から選べる
    2. デザインモードとAIの相性が良い理由
    3. 継続運用で差が出るポイント
  6. 【実践】ChatGPT・Claude・Geminiでアンケートフォームを作ってみた
    1. 準備:クライゼルでフォームを用意する(3ステップ)
    2. AIが壊しやすい4つのポイント
    3. プロンプトのポイント:「必ず守ること」を短く明確に
    4. AIに依頼して、クライゼルに貼り付ける
    5. 同じプロンプトで3つのAIに依頼した結果
    6. 公開前に確認したいこと
  7. フォーム×AIの活用アイデア
  8. よくある質問
    1. Q. ChatGPTでお問い合わせフォームは作れますか?
    2. Q. GoogleフォームのGeminiで作ったフォームを、会社の問い合わせ窓口に使えますか?
    3. Q. ChatGPT SitesやGemini Canvasでアンケートフォームを公開しても大丈夫ですか?
    4. Q. クライゼルならノーコードでフォームを作れますか?
    5. Q. AIが作ったHTMLがうまく動かないときは、サポートしてもらえますか?
    6. Q. クライゼルの料金はいくらですか?
  9. まとめ
  10. 関連記事

この記事でわかること

  • 生成AIでWebフォームを作る3つの方法(チャットAI・AIの公開機能・Googleフォーム×Gemini)
  • AIでできること・できないことの比較表
  • AIだけで作ったフォームを、顧客向けに継続運用するときの落とし穴
  • AIで「見た目」、フォーム基盤で「受付・保管・運用」という役割分担の考え方
  • ChatGPT・Claude・Geminiでアンケートフォームを作った実践例とプロンプトのポイント

生成AIでWebフォームは作れる?結論と前提

結論から言うと、生成AIでWebフォームは作れます。ただし、AIが担えるのは作業の一部です。フォームが業務で使えるようになるには、画面を作るだけでなく、送信された回答を受け取り、保存し、回答者や担当者に知らせ、データを管理する仕組みが必要になります。

AIでフォームを作る3つの方法

方法AIが作るもの向いている使い方
① チャットAIにコードを書かせる(ChatGPT・Claude・Gemini)フォームのHTML・CSS・JavaScript(画面)見た目を自由に作りたいとき。受け取る仕組みは別に用意する
② AIの公開機能で公開まで任せる(ChatGPT Sites・Claudeのアーティファクト・Gemini Canvas)画面と、データを保存する仕組みを含むページ一式試作や、短期間の社内利用
③ Googleフォーム内蔵のGeminiで作る(フォーム作成サポート)質問項目の下書き社内アンケートなど、デザインにこだわらない用途

Googleフォームの「フォーム作成サポート(Gemini)」とは

Googleフォームでは、作りたいフォームを文章で伝えたり、Googleドライブ上のドキュメント・スプレッドシート・スライド・PDFを指定したりすると、Geminiが質問項目の下書きを作ってくれます。利用には対象のGoogle WorkspaceまたはGoogle AIのプランが必要で、2026年9月時点ではパソコンのみの対応です。複数セクションのフォームや、既存のフォームの編集には対応していません。

作成手順と、業務用に仕上げるときの注意点は、Googleフォームでお問い合わせフォームを作る方法で詳しく解説しています。

ChatGPT Sites・Claude・Gemini Canvasの公開機能とは

  • ChatGPT Sites:会話でWebサイトや簡単なアプリを作り、そのまま公開できる機能です(2026年9月時点で公開ベータ)。データベースやファイルの保存領域を備えています。
  • Claudeのアーティファクト:Claudeが作ったページを共有・公開できる機能です。データの保存にも対応していますが、2026年9月16日以降に作るものは、開く人全員にClaudeのアカウントが必要です。
  • Gemini Canvas:Geminiで作ったアプリを公開リンクで共有できる機能です。データを保存するアプリを作ると、データベースが自動で用意されます。

いずれも「作ってすぐ公開できる」手軽さが魅力ですが、データの公開範囲や保管場所の管理は、作成者の責任になります。

フォームが「使える」状態になるまでの流れ

工程内容AIだけで担えるか
質問項目を決める何を聞くか、必須にするか○ 下書きは作れる(最終確認は人)
画面を作るデザイン、入力チェック、スマートフォン対応○ 得意分野
回答を受け取る・保存する送信先のサーバーとデータベース△ 公開機能なら可能。管理は作成者の責任
知らせる回答者への自動返信、担当者への通知× 標準では備えていないことが多い
管理・運用する権限、セキュリティ、担当者の交代、障害対応× 仕組みと体制が別に必要

AIでできること・できないこと【4つの作り方を比較】

AIでフォームを作る3つの方法と、見た目をAIで作り、受付から運用までをフォーム基盤「クライゼル」に任せる方法を比べました。

作業① チャットAIにコードを書かせる② AIの公開機能③ Googleフォーム×Gemini④ クライゼル+生成AI
質問項目の作成○ 案を出せる○ 案を出せる◎ 文章やファイルから下書きを自動で作る○ 「データベース作成AI支援」で作成できる
フォームの見た目◎ 自由に作れる◎ 会話で作成・修正できる△ テーマ(フォント・色・ヘッダー画像)の変更のみ◎ AIが作ったコードをデザインモードに貼るだけ
入力チェック・動き○ 作れるが、動作テストは人が行う○ 同左△ 回答の検証(形式・正規表現)は設定できる○ AIが作ったJavaScriptを使える(テストは人)
回答の受け取り・保存× 送信先を自前で用意・保守○ データベース・ストレージあり○ 回答画面とスプレッドシート連携◎ データベースに蓄積(重複登録の制御も可能)
自動返信・担当者への通知× 自前で実装× 標準機能なし。外部サービスとの連携を自前で作る△ 文面を変えられない「回答のコピー」と、本人へのメール通知のみ◎ 自動返信(HTML・テキスト)、管理者通知、Slack・Teams通知
セキュリティ× 生成されたコードの安全性は誰も保証しない△ 公開範囲などの設定と安全確認は作成者の責任△ 公開範囲・共有設定のミスは作成者の責任◎ プライバシーマーク、ISO/IEC 27001・27017、国内データセンター
継続運用・担当者の交代× すべて自社で対応△ 仕様や利用上限が変わりやすい△ 作成者のアカウントに依存しやすい◎ SaaSとしてトライコーンが運用
AIが作ったものの動作保証× なし× なし× なし× なし(AIが生成したHTMLはサポート対象外)

※各社の機能は、2026年9月時点の公式ヘルプに基づきます。最新の仕様は各社の公式サイトでご確認ください。

表の最後の行のとおり、どの方法でも「AIが作ったもの」の動作を保証してくれる人はいません。AIの出力は、必ず人が確認してから公開する前提で使いましょう。

主要3社の「公開機能」をフォーム用途で比べると

AI機能データの保存自動返信・通知フォーム用途での主な注意点
ChatGPTSites(公開ベータ)データベース・ファイル保存あり標準機能なし(外部のメール配信サービスとの連携を自前で実装)データの保管場所を指定できない。集めた個人情報は作成者が責任を負う
Claudeアーティファクト個人用/共有のストレージ標準機能なし2026年9月16日以降に作るものは、開く人全員にClaudeアカウントが必要。共有ストレージは開いた全員が同じデータを見られる
GeminiCanvasデータベースを自動作成公式ヘルプに記載なしユーザー間でデータを共有する設定では、リンクを知る人は誰でも閲覧・編集できる

3つとも試作や一時的な社内利用には便利ですが、顧客向けの問い合わせ窓口やアンケートとして継続的に使うことは想定しにくい仕組みです。

顧客向けフォームの基盤選びに

クライゼルのカタログ資料ダウンロード

クライゼルのWebフォーム・自動返信・データベース・セキュリティ・料金を1冊にまとめたカタログです。社内での比較検討にお使いください。

無料でカタログをダウンロード ▶

AIでフォームを作るときの落とし穴

① コードだけ書かせる場合:送信先がない

チャットAIが作るHTMLは、あくまで「画面」です。送信ボタンを押したときに回答を受け取るサーバーやデータベース、回答者への自動返信メールは、別に用意しなければなりません。自前で用意する場合は、セキュリティ対策や障害対応、公開後の修正も自社で担うことになります。

② AIの公開機能を使う場合:企業の継続利用に向かない理由

  • 公開範囲の設定ミスが、そのまま情報漏えいになる:共有の設定によっては、リンクを知る人が回答を閲覧・編集できてしまいます。
  • 作成者個人のアカウントに依存する:担当者の異動や退職で、フォームやデータを管理できなくなるおそれがあります。
  • 保管場所やセキュリティ要件を自社の規程に合わせにくい:たとえばChatGPT Sitesは、2026年9月時点でデータの保管場所を指定できません。
  • 個人情報の法的な責任は作成者にある:プライバシーポリシーの掲示や、開示・削除の請求への対応も自社で行います。
  • 自動返信・通知を自前で作り込む必要がある:3社とも標準機能としては備えておらず、外部サービスとの連携を作り、保守し続けることになります。

③ Googleフォーム×Geminiの場合:下書きの先は人が仕上げる

Geminiのフォーム作成サポートは、4つの中で最も手軽な方法です。ただし、AIが作るのは質問項目の下書きまでです。トライコーンで「お問い合わせフォーム」とだけ入力して試したところ、お名前・メールアドレス・お問い合わせの種類・内容の4項目が作られましたが、必須の設定はオフで、会社名・電話番号・同意確認の項目はなく、メールアドレスの収集設定をすると入力欄が二重になりました。

  • 必須の設定、回答の検証、同意確認、メールアドレスの集め方は、人が設定する必要があります。
  • 既存のフォームの編集と、複数セクションのフォームには対応していません。
  • 標準の自動返信は、文面を変えられない「回答のコピー」のみです。会社名入りの文面で送るには、Google Apps Scriptやアドオンが必要になり、作った人のアカウントに依存しやすくなります。
  • デザインはテーマの変更に限られ、自社サイトのデザインに合わせることはできません。

Googleフォームを業務で使うときの確認ポイントは、Googleフォームでお問い合わせフォームを作る方法にまとめています。

AIだけで作る方法が向いている使い方

試作(プロトタイプ)、短期間の社内アンケート、社内向けの受付などには、AIだけで作る方法でも十分です。一方、顧客や取引先から個人情報を継続して集めるフォームは、次の章の考え方で作ることをおすすめします。

解決策:AIで「見た目」、クライゼルで「受付・保管・運用」

トライコーンが提供するCRMプラットフォーム「クライゼル」のWebフォームは、生成AIと組み合わせて使えます。AIには得意な「見た目づくり」を任せ、回答の受け取りから自動返信、データ管理、セキュリティまでをクライゼルが担う役割分担です。

クライゼルのフォームは2つの作り方から選べる

  • 自動生成モード:データベースの項目をもとに、プログラミングの知識がなくてもフォームを作成できます。
  • デザインモード:HTML・CSS・JavaScriptで、フォームを自由にデザインできます。

デザインモードとAIの相性が良い理由

デザインモードでは、クライゼルが出力する「サンプルソース」をもとに、HTML・CSS・JavaScriptを自由に書き換えられます。このサンプルソースを生成AIに渡して見た目を整えてもらい、クライゼルに貼り戻せば、コーディングの手間を大きく減らしながら、自社サイトになじむフォームを作れます。サンプルソースには回答者の個人情報が含まれないため、AIに渡す情報も最小限で済みます。

継続運用で差が出るポイント

確認するポイントクライゼルの対応
自動返信・通知回答者への自動返信メール(HTML・テキスト)、管理者への通知メール、Slack・Teamsへの通知
データ管理回答はデータベースに蓄積。同一メールアドレスの重複登録の制御、セグメント配信やステップメールにも活用できる
セキュリティプライバシーマーク、ISO/IEC 27001・ISO/IEC 27017を取得。国内データセンターで運用。IPアドレスによるアクセス制限、reCAPTCHA v3に対応
社内システムとの連携Webhook・APIに対応。kintoneやSalesforceとの連携も可能
料金月額1万円(税別)から(Entryエディションの場合)。14日間の無料トライアルあり

※機能の利用可否や上限は、ご契約のプラン・オプションによって異なります。

クライゼルの概要は、以下の動画(40秒)でご確認いただけます。

【実践】ChatGPT・Claude・Geminiでアンケートフォームを作ってみた

ここからは、クライゼルのデザインモードと生成AIを使って、アンケートフォームを作る手順を紹介します。本番で使っているフォームでは試さず、公開していないテスト用のフォームで作業してください。

準備:クライゼルでフォームを用意する(3ステップ)

準備1 データベースの項目を作る:アンケートで聞く項目を登録します。今回は、お名前・電話番号・メールアドレス・ご利用中のツール(複数選択)・現在の検討段階(単一選択)の5項目です。データベースは[データベース]>[データベース作成AI支援]でも作成できます。

クライゼルのデータベース項目設定画面。お名前、電話番号、メールアドレス、ご利用中のツール、現在の検討段階の5項目
データベースにアンケートの項目を登録します

準備2 フォームを作る:[フォーム設定]>[フォーム一覧]の「新規作成」から、フォームグループを作ります。タイプは「デザイン」を選びます(自動生成以外は後から変更できません)。

クライゼルのフォームグループ新規作成画面。フォームグループのタイプでデザインを選択
フォームグループのタイプは「デザイン」を選びます

準備3 サンプルソースをコピーする:フォームグループの「デザイン」を開き、入力画面の「サンプルソースをコピー」をクリックして、表示されたソースをすべてコピーします。確認画面・完了画面も同じ方法でコピーします。

クライゼルのフォームデザイン画面。サンプルソースをコピーするボタン
「サンプルソースをコピー」で、AIに渡すHTMLを取得します

AIが壊しやすい4つのポイント

AIは、クライゼル固有の仕組みを知りません。次の4点をプロンプトで指示しないと、見た目は整っても、フォームが正しく動かなくなることがあります。

  1. システム変数を消してしまう:「##e_○○##」のように「##」で囲まれた部分は、入力欄やエラー文を表示するための目印です。
  2. 電話番号の入力欄が崩れる:クライゼルの電話番号は、3つの入力欄に分けて出力されます。
  3. エラー文が表示されなくなる:エラー文(##e_○○:errors##)の位置を指定しないと、表示されないことがあります。
  4. 外部のファイルを読み込もうとする:外部のライブラリやWebフォントを使うと、読み込めない場合に表示が崩れます。

プロンプトのポイント:「必ず守ること」を短く明確に

プロンプトは長くしすぎず、デザインの要望と「必ず守ること」を分けて書くと、AIが指示を守りやすくなります。今回のプロンプトの「必ず守ること」は次のとおりです。

### 必ず守ること
- ##html:doctype##、##msg:title##、##e_○○## など「##」で囲まれたシステム変数は、削除・変更・移動しない
- form要素と、各入力要素の属性(name・value など)は変更しない
- 各入力欄の下に、エラー文(##e_○○:errors##)を表示する
- 外部のライブラリ・Webフォント・CSSファイル・JavaScriptファイルは使わない
- 修正したHTMLの全文を、1つのコードブロックで出力する

このほか、デザイン要件(見出し・テーマカラー・ボタンの色など)と、電話番号を1行に並べる指示を加えて依頼します。

AIに依頼して、クライゼルに貼り付ける

プロンプトとサンプルソースをAIに貼り付けて送信すると、AIが修正したHTMLを作ってくれます。

生成AIにクライゼルのサンプルソースとプロンプトを渡し、修正したHTMLが出力された画面
AIがシステム変数を残したまま、修正したHTMLを出力しました

AIが作ったHTMLを、クライゼルのソース入力欄に貼り付けて保存し、プレビューで表示を確認します。確認画面・完了画面も、同じチャットで続けて依頼するとデザインがそろいやすくなります。

クライゼルのフォームデザイン画面のソース入力欄に、AIが作ったHTMLを貼り付けて保存する
AIが作ったHTMLを貼り付けて保存します

同じプロンプトで3つのAIに依頼した結果

同じプロンプトでChatGPT、Claude、Geminiに作らせたアンケートフォームの入力画面の比較
同じプロンプトでも、AIによって仕上がりは変わります(2026年10月時点、1回目の依頼結果)
  • ChatGPT:項目名を左、入力欄を右に置く表形式。複数選択の選択肢は2行に折り返しました。
  • Claude:1列に並べたカード形式。複数選択の選択肢は3列に並びました。
  • Gemini:項目名を左、入力欄を右に置く形式。複数選択の選択肢は縦1列に並びました。

気に入らない場合は、同じチャットで「ほかの部分は変えずに、○○だけ直してください」と具体的に伝えるか、別のAIで試してみてください。AIが生成したHTMLについてのサポートは行っていませんが、ご要望に合わせてフォームを制作する有償の制作サービスもご用意しています。

公開前に確認したいこと

  • 「##」で囲まれたシステム変数が、元のサンプルソースとすべて同じか(テキストエディタで「##」を検索して数を比べる)
  • 入力・確認・完了の3画面が表示され、必須項目を空欄で送るとエラー文が出るか
  • スマートフォンで表示したとき、横にはみ出していないか
  • テスト送信した回答がデータベースに登録され、自動返信メール・担当者への通知が届くか
  • 回答者の個人情報や社外秘の情報を、AIに入力していないか

フォーム基盤の比較検討に、カタログをご活用ください

クライゼルのカタログ資料ダウンロード

クライゼルの機能・料金・導入事例をまとめたカタログです。無料トライアルの前に、全体像を把握するのにお使いください。

無料でカタログをダウンロード ▶

フォーム×AIの活用アイデア

フォームで集めた回答は、AIと組み合わせることで活用の幅が広がります。たとえば次のような使い方が考えられます。

フォームの種類AIで考えられる活用
お問い合わせ内容を「技術・契約・営業」などに分類し、担当への振り分けを助ける
お問い合わせよくある質問と回答の履歴から、FAQの原稿案を作る
アンケート(研修・イベント)自由記述を肯定・否定に分け、要望を抽出してレポートにまとめる
面接・予約希望日時と担当者の空き時間を照合し、候補日を提案する

※回答データを外部のAIサービスに入力する場合は、個人情報を含めない、社内規程を確認するなど、取り扱いに注意してください。実現方法はシステム構成によって異なります。

よくある質問

Q. ChatGPTでお問い合わせフォームは作れますか?

A. 作れます。ChatGPTにフォームのHTML・CSS・JavaScriptを書いてもらえば、画面は数分で作れます。ただし、送信された回答を受け取る仕組みや自動返信メールは別に必要です。顧客向けに継続して使う場合は、見た目をAIで作り、受付から運用まではフォーム基盤に任せる方法が安全です。

Q. GoogleフォームのGeminiで作ったフォームを、会社の問い合わせ窓口に使えますか?

A. 社内向けや一時的な用途であれば十分使えます。ただし、Geminiが作るのは質問項目の下書きまでで、必須設定や同意確認は人が設定する必要があります。また、標準の自動返信は文面を変えられず、デザインもテーマの変更に限られます。顧客向けの窓口として継続運用する場合は、これらの点を確認してください。

Q. ChatGPT SitesやGemini Canvasでアンケートフォームを公開しても大丈夫ですか?

A. 試作や短期間の社内利用には便利です。ただし、データの公開範囲や保管場所の管理は作成者の責任で、共有の設定によってはリンクを知る人が回答を閲覧できてしまう場合があります。顧客の個人情報を継続して集める用途には向きません。

Q. クライゼルならノーコードでフォームを作れますか?

A. クライゼルのフォームには2つの作り方があります。自動生成モードなら、プログラミングの知識がなくてもデータベースの項目をもとにフォームを作成できます。デザインモードでは、HTML・CSS・JavaScriptで自由にデザインでき、生成AIが作ったコードをそのまま使えます。

Q. AIが作ったHTMLがうまく動かないときは、サポートしてもらえますか?

A. AIが生成したHTMLについてのサポートは行っていません。公開していないテスト用のフォームで試し、うまくいかない場合はAIに修正を依頼するか、新しいチャットでやり直してください。トライコーンでは、ご要望に合わせてフォームを制作する有償サービスもご用意しています。

Q. クライゼルの料金はいくらですか?

A. 月額1万円(税別)から(Entryエディションの場合)ご利用いただけます。14日間の無料トライアルもあります。機能の利用可否や上限は、ご契約のプラン・オプションによって異なります。

まとめ

生成AIを使えば、Webフォームの画面や質問項目の下書きは短時間で作れます。一方で、AIが担えるのは「見た目」か「質問項目の下書き」までで、回答の受け取り・保管・自動返信・運用の仕組みは別に必要です。社内向けや一時的な利用ならAIだけでも十分ですが、顧客や取引先の個人情報を継続して集めるフォームは、見た目をAIで作り、受付から運用までを専用の基盤に任せるのが安全です。

クライゼルなら、AIが作ったコードをデザインモードに貼り付けるだけで、受付から運用までを任せられます。検討には「クライゼル」のカタログ(無料PDF)をご活用ください。

AIで作ったフォームを、安心して公開するために

クライゼルのカタログ資料ダウンロード

Webフォーム・メール配信・データベース・セキュリティ・料金をまとめたクライゼルのカタログです。

無料でカタログをダウンロード ▶

実際に試してみたい方は、14日間の無料トライアルをご利用ください。フォーム制作について相談したい方は、お問い合わせください。

関連記事

弊社の多彩な業務で使える高セキュリティなCRMプラットフォーム「クライゼル」のカタログは下記からダウンロードいただけます。機能・料金表の記載もありますので、ぜひご覧ください。
クライゼルカタログ資料ダウンロードリンク
シェアする
タイトルとURLをコピーしました