ホームページを持っていても、問い合わせフォームは外部サービスの有料プランに頼ったままという個人事業主の方は少なくありません。問い合わせフォームの実装はClaude Codeを使えば自力でも進められますが、スパムの大量流入や自動返信の不達といった落とし穴があります。フォームは動いて当たり前、見えないところで問い合わせを取りこぼしていても気づけないのが最大のリスクです。本記事では、弊社が実際に組む手順に沿って、メール通知・自動返信・スパム対策までの流れと、AIに任せてよい部分と人が確認すべき部分を整理します。
問い合わせフォームをClaude Codeで実装する流れとは
フォームのコードと入力検証の生成はClaude Codeに任せ、個人情報の扱いと送信テストは制作者が確認する分担が、最も安全で速い進め方です。
最初にやるのは、いきなりコードを書かせることではなく、仕様を文章で渡すことです。たとえば「お名前・メールアドレス・お問い合わせ内容の3項目、送信先は事業用アドレス、送信後に確認メールを自動返信」といった要件を整理して伝えると、Claude Codeはフォームの画面、送信を受けるサーバー側の処理、入力チェックをまとめて生成してくれます。
ここで大切なのは、入力検証をブラウザ側だけに置かせないことです。ブラウザ側のチェックは利用者への親切にすぎず、悪意ある送信は画面を通らず直接サーバーに届きます。そのため、文字数の上限、メールアドレスの形式、必須項目の有無はサーバー側でも必ず検証するよう、指示に明記します。この一言があるかどうかで、生成されるコードの堅牢さは大きく変わります。
実装の順序は、画面とサーバー処理を先に作り、次にスパム対策、最後にメール送信を足していくのがおすすめです。一度に全部を頼むと、どこで不具合が出たのか切り分けにくくなるためです。弊社の感覚では、各段階でローカル環境で動作を確かめてから次に進むほうが、結果的に手戻りが少なく済みます。
Claude Codeは「書く」作業は速い一方で、何を収集し、どこに保存し、いつ消すかという判断は代わりにしてくれません。この点は後半で触れる確認項目と合わせて、必ず制作者側で決めておく必要があります。
Cloudflare Turnstileでスパム対策をする方法とは
スパム対策は、CAPTCHAの代替として使えるCloudflare Turnstileの検証をサーバー側で行い、あわせて見えない入力欄で機械を弾く二段構えが現実的です。
Turnstileは、画像を選ばせるような手間を利用者にかけずに、人間か機械かを判定する仕組みです。フォームにウィジェットを埋め込むと、送信時に使い捨てのトークンが発行されます。このトークンをサーバーに送り、Cloudflareの検証用エンドポイントに秘密鍵とともに問い合わせて、成功した場合だけ処理を進めます。
よくある失敗は、ウィジェットを表示しただけで安心してしまうことです。トークンをサーバー側で検証していなければ、スパム対策は見た目だけで実質的に何も防いでいません。Claude Codeには「サーバー側で検証し、失敗時は送信処理に進まない」と必ず指示し、生成後にコードを読んで検証の分岐があることを確認してください。トークンは使い回しができず有効期限も短いため、検証に失敗した場合は再度の送信を促す文言も用意しておくと親切です。
もう一つの対策が、ハニーポットと呼ぶ人間には見えない入力欄です。この欄に値が入っていたら、機械による送信とみなして静かに破棄します。Turnstileと併用すれば、導入の手間は小さいまま弾ける範囲が広がります。なお、秘密鍵はコードに直接書かず、環境変数として管理するよう指示することも忘れないでください。
ResendでメールとAuto返信を実装する方法とは
メール通知と自動返信は、Resendのようなメール送信サービスをサーバー処理から呼び出し、独自ドメインの認証を済ませたうえで送る方法が確実です。
実装としては、フォームの検証を通過したあとに2通を送ります。1通は事業者本人に届く通知メールで、お名前、連絡先、内容、受信日時を本文に載せます。もう1通は問い合わせた方への自動返信で、「受け付けました」という確認と、返信までの目安日数を伝えます。Claude Codeに依頼する際は、件名と本文の文面も一緒に渡すと、そのまま使える形で出てきます。
見落とされやすいのが、送信元ドメインの認証です。Resendでは自分のドメインを登録し、DNSにSPFとDKIMのレコードを設定します。これを済ませていないと、自動返信が迷惑メールに振り分けられたり、届かなかったりします。自動返信が届かないと、お客様は「無視された」と感じ、問い合わせ直さずに離脱してしまいます。DNSの設定はAIが代行できない作業なので、制作者が管理画面で行います。
また、通知メールの宛先に入力値をそのまま差し込む際は、改行コードの混入によるヘッダー改ざんに注意が必要です。返信先に使うメールアドレスは形式を厳密に検証し、本文は文字列として扱うようコードで確認します。Resendには無料枠がありますが、送信数の上限や条件は変わることがあるため、導入時に公式の料金ページで確認してください。
公開前に人が確認すべきことと費用はどう考えるか
費用は、ドメイン代とホスティングを除けば無料枠の範囲で始められる場合が多く、公開前の確認は機械チェックに任せず制作者が最終判断する半自動の線引きが欠かせません。
確認の中心は個人情報の扱いです。フォームの近くにプライバシーポリシーへのリンクを置き、取得する項目と利用目的を明示します。問い合わせ内容をデータベースに保存する場合は、保存期間と削除の方法を決めておきます。保存しないのであれば、メールだけに残る形で構いませんが、そのメールの管理も個人情報の管理に含まれます。Claude Codeは文面の下書きは作れますが、事業の実態に合っているかの判断は人にしかできません。
送信テストも、必ず手で行います。正常な送信、必須項目を空にした送信、わざと長い文字列を入れた送信、Turnstileを通さない送信の4パターンを試し、通知メールと自動返信が想定どおり届くかを、PCとスマートフォンの両方で確認します。さらにGmailなど複数のメールアドレスで受信し、迷惑メールフォルダに入っていないかも見ておくと安心です。
公開後も、月に一度はテスト送信をして、通知が届くことを確かめる運用を残してください。サービス側の仕様変更やDNSの変更で、ある日突然届かなくなることがあるためです。自社で保守まで抱えるのが負担な場合は、弊社のWeb制作・再構築でフォームの設計から公開後の確認までご相談いただけますし、どこから自動化すべきか迷う場合はAIアドバイザリーで優先順位の整理もできます。
よくある質問
問い合わせフォームの実装はプログラミング未経験でもClaude Codeで可能ですか？
基本的な部分は可能ですが、生成されたコードをそのまま公開するのは避けてください。サーバー側の検証、秘密鍵の管理、送信テストは制作者が確認する必要があります。
Cloudflare Turnstileはサーバー側の検証が必須ですか？
はい、必須です。ウィジェットを表示するだけでは機械の送信を防げず、発行されたトークンをサーバーで検証して初めてスパム対策として機能します。
自動返信メールが迷惑メールに入るのを防ぐ方法はありますか？
送信元ドメインにSPFとDKIMを設定し、独自ドメインで送信するのが基本です。公開前に複数のメールアドレスで受信テストをして、迷惑メールフォルダも確認してください。
問い合わせフォームの運用費用はどれくらいかかりますか？
CloudflareTurnstileやResendには無料枠がありますが、条件は変更されることがあるため公式で確認してください。別途、ドメイン代やホスティング費用が必要になる場合があります。
関連記事
- 【中小企業向け】Claude CodeでWordPressテーマを制作・改修する方法
- 【士業向け】Astroで高速な静的サイトをClaude Codeで構築する方法
- 【店舗ビジネス向け】LP制作とABテストをClaude Codeで回す方法
「自分の業務は、どこまでAI化できるのか」を無料で診断します
ここまで読んで、「うちのあの作業もできるのかな」と一瞬でも頭に浮かんだ作業があるなら、それを教えてください。「見積書の作成に毎回1時間かかっている」「契約書のチェックに毎回悩む」「発信を続ける余力がない」——そんな一文で十分です。
私たちは診断だけで終わらせません。業務フローを可視化してAIを組み込む「AI実装・業務設計」、どこからAIを入れるべきかROIを見立てる「AIアドバイザリー」、信頼感のあるサイトを構築する「Web制作・再構築」、そしてAIを活用して記事・SNS発信を続ける「メディア運用・コンテンツ」まで、実績をもとに一気通貫でお任せいただけます。
まずは診断から。送っていただいたら、実運用の経験をもとに、その作業を「AIに任せられる部分」と「人が確認すべき部分」に分解した診断結果を、1〜3営業日以内にメールでお返しします。
- 診断まで完全無料です（費用が発生する場合は、必ず事前にお見積りを出し、納得いただいてからです）
- 診断の結果、AI実装・アドバイザリー・Web制作・メディア運用のいずれかでお手伝いできそうな場合は、進め方と費用の目安もあわせてご提案します。不要ならそのまま終了で大丈夫です（しつこい連絡はしません）
