自分のホームページに「お問い合わせフォーム」を付けたいと思ったとき、多くの人は「サーバを契約して、WordPressを入れて、専門の人にお願いして…」と身構えてしまいます。手順が多く、費用もかかりそうで、途中であきらめてしまう方も少なくありません。

でも今は、生成AIに手伝ってもらうことで、サーバ契約もWordPressも外注も使わずに、問い合わせフォーム付きのサイトを作れるようになってきました。この記事では、実際にフォームがどんな部品でできているのか、その全体の仕組みと各ツールの役割を、画面を見ていない前提でやさしく整理します。

結論：生成AIを使えば、サーバ契約もWordPressも外注もいらない

先に答えを言うと、生成AI(たとえばClaude CodeやChatGPTのようなツール)にサイトのもとになるファイルを作ってもらい、それを無料の公開サービスに置くだけで、問い合わせフォーム付きのサイトが動きます。

ポイントは、大がかりな仕組みを自分で用意しない、というところです。サイトを置く場所も、フォーム送信を処理する部分も、無料枠のあるサービスを組み合わせるだけで成り立ちます。「作れる人にしかできない」ものではなく、部品の役割さえ分かれば、個人でも組み立てられる範囲に入ってきました。

ムチオ
ムチオ
問い合わせフォームって、なんか一番むずかしそうなやつじゃない？サーバとか要るんでしょ？
ルミナ
ルミナ
それが、いまは要らない作り方があるんです。仕組みをいくつかの部品に分けて考えると、意外とすっきりしますよ。順番に見ていきましょう。

全体の仕組み：フォームが動くまでの流れ

問い合わせフォーム付きサイトは、大きく分けて2つのかたまりでできています。ひとつは「見える部分(サイトそのもの)」、もうひとつは「送信が来たときに裏で動く部分」です。

流れを言葉で追うと、こうなります。

  1. 生成AIに手伝ってもらって、サイトのファイル(見た目とフォーム)を作る。
  2. そのファイルを公開用のサービスにアップして、インターネット上に出す。
  3. 訪問者がフォームに入力して送信すると、その内容が裏の処理へ送られる。
  4. 裏の処理が、あなたのSlackに「問い合わせが来ました」と通知する。
  5. 同時に、Googleスプレッドシートに問い合わせ内容が1行ずつ記録されていく。

つまり、「サイトを公開する係」と「送信を受け取って知らせる係」が別々にいて、フォームの送信をきっかけに後者が動き出す、という構図です。この2つの係を、それぞれ無料のサービスにお願いしているわけです。

使うツールの役割をやさしく整理する

登場するツールは4つです。名前は聞き慣れないかもしれませんが、それぞれ担当している仕事はシンプルです。

  • VS Code(ブイエス コード)：サイトのファイルを書いたり編集したりするための道具です。文章を書くノートのようなもので、ここに生成AIが作ったサイトの中身が入ります。
  • Netlify(ネットリファイ)：作ったサイトファイルを置いて、インターネットに公開してくれる場所です。こうした「サイトを預かって表示してくれるサービス」をホスティングと呼びます。無料の登録から始められます。
  • GAS(Google Apps Script)：Googleのサーバ上で動く、無料の小さなプログラムです。今回は「フォーム送信が来たら、通知して記録する」という裏方の仕事を担います。
  • Slack(スラック)：問い合わせが来たことを知らせる通知先です。チームで使うチャット道具ですが、通知が届けばよいので、他の連絡手段でも代わりになります。
ムチオ
ムチオ
GASって初めて聞いた。プログラムって言われると身構えちゃうな。
ルミナ
ルミナ
中身を全部理解しなくても大丈夫です。GASは「送信が来たら、決めた作業を自動でやってくれる係」だと思ってください。しかもGoogleのサーバ上で動くので、自分でサーバを用意する必要がありません。似た使い方はGeminiとGASでメール・予定を自動化するAI秘書でも紹介しています。

Slackがない場合でも、Googleスプレッドシートへの記録だけを残す形にできますし、通知の届け先をメールなど別の手段に変えることもできます。自分の受け取りやすい形に合わせて選べる、と考えておくと気が楽です。

なぜサーバ契約がいらないのか

「フォームを動かすならサーバが必要」というイメージは、以前は正しいものでした。フォームの送信を受け取って処理するには、常に動いているコンピュータ(サーバ)が要ると考えられていたからです。

今回サーバ契約が不要なのは、その役割を2つのサービスが肩代わりしているからです。ひとつはNetlifyで、これはサイトそのものを預かって表示する部分を引き受けます。もうひとつはGASで、これは送信を受け取って通知や記録をする裏の処理を、Googleのサーバの上で動かしてくれます。

つまり、あなたが自分でサーバを借りて維持しなくても、それぞれの会社が用意した仕組みに乗せてもらうだけで成り立つ、というわけです。サーバやホスティングという言葉そのものが気になる方は、サーバとはもあわせて読むと、この身軽さの理由がつかみやすくなります。

開発はClaude Codeでなくても代用できる

今回の作り方は、AIにサイトの中身を作らせる進め方が土台になっています。特定のツールでなければできない、というものではありません。

Claude Codeのような開発向けのAIでも、普段お使いのChatGPTのような一般的なAIでも、「問い合わせフォーム付きの簡単なサイトを作りたい」と相談しながら進められます。大事なのは、いきなり完成品を求めるのではなく、作りたいものと使うサービスを伝えて、少しずつ形にしていくことです。こうしたAIと対話しながら作る進め方は、バイブコーディングとはでくわしく解説しています。

注意点：公開する前に知っておきたいこと

手軽に作れるぶん、公開して運用するなら気をつけたい点もあります。あとで困らないよう、先に押さえておきましょう。

  • スパム対策：公開したフォームには、機械が自動で送りつけてくる迷惑な送信が届くことがあります。人間かどうかを簡単に確かめる仕組みを足すなど、対策を検討しておくと安心です。
  • 個人情報の扱い：問い合わせフォームには名前や連絡先などの個人情報が入ります。記録先のスプレッドシートを誰でも見られる状態にしない、集めた情報の使い道を明記するなど、扱いには配慮が要ります。
  • 無料枠の範囲：NetlifyもGASも無料で始められますが、それぞれ無料で使える範囲に上限があります。問い合わせが大量に増えてきたら、上限や規約を確認しておくとよいでしょう。
ムチオ
ムチオ
作って終わりじゃなくて、公開したあとの気配りも要るんだね。
ルミナ
ルミナ
そうなんです。とくに個人情報は、集めた側に責任が生まれます。むずかしく考えすぎず、必要な範囲で丁寧に扱う、という姿勢が大切ですよ。

次の一歩

仕組みの全体像がつかめたら、実際に手を動かしてみるのがいちばんの近道です。まずはAIと対話しながら小さなサイトを作る感覚をつかむならバイブコーディングとは、サイトを公開する土台を知りたいならサーバとは、GASでの自動化をもう一歩広げたいならGeminiとGASでメール・予定を自動化するAI秘書が、それぞれの入口になります。

まとめ

  • 問い合わせフォーム付きサイトは、サーバ契約やWordPress、外注がなくても、生成AIの助けを借りて作れる範囲に入ってきた。
  • 仕組みは「サイトを公開する係(Netlify)」と「送信を受け取って知らせる係(GAS)」の組み合わせでできている。
  • 送信が来ると、GASがSlackへ通知し、Googleスプレッドシートに記録を残す、という流れで動く。
  • サーバがいらないのは、NetlifyとGASがその役割をそれぞれ肩代わりしているから。
  • 公開して運用するなら、スパム対策・個人情報の扱い・無料枠の上限に目を向けておくと安心。

独学でつまずきやすいのは、知識そのものよりも「何をどの順番で学ぶか」です。フォーム作りのような小さな成功体験も、あなたの目標から逆算した学ぶ順番の一部として、1対1で一緒に組み立てられます。