問い合わせフォーム・LINE 連携付きの企業サイトを作る

この教材で作るもの

トップ・サービス・会社情報・お問い合わせ・プライバシーポリシーの 5 ページ。問い合わせフォームを送ると、管理者のメールと LINE 公式アカウントに 1 通ずつ通知が届く。Vercel で公開済み。

動作確認環境: Node.js 20 / Next.js 15（App Router） / Vercel（2026年10月時点の無料枠） / LINE Messaging API（push message） / Resend（メール送信）

前提条件

• GitHub アカウント
• Vercel アカウント（無料枠でよい）
• LINE Developers のプロバイダーと Messaging API チャネル（無料）
• Resend のアカウント（無料枠でよい。別のメール送信サービスでも可）
• Node.js 20 以上と、Claude Code か Cursor

実装手順

1. 1作りたいものを 1 文で決める

   「誰のための、何をしてもらうサイトか」を 1 文にします。例：小さなデザイン事務所が、見積もりの問い合わせをもらうためのサイト。

   確認: 1 文で言えたら次へ

2. 2AI に情報設計を出してもらう

   1 文をプロンプトに入れて、5 ページの見出し構成とフォーム項目を出してもらいます。分からない点は推測させず、質問として返してもらいます。

   AI に渡すプロンプト要件を 1 文から情報設計にするclaude-code

   プロンプトをコピー

   あなたは Web 制作者です。次の 1 文から、企業サイトの情報設計を提案してください。
   
   作りたいもの: ＜ここに 1 文。例: 小さなデザイン事務所の、問い合わせをもらうためのサイト＞
   
   出力:
   - 5 ページ（トップ / サービス / 会社情報 / お問い合わせ / プライバシーポリシー）それぞれの目的と見出し構成
   - トップに載せる要素の優先順位
   - 問い合わせフォームの項目（必須 / 任意）
   - まだ決まっていないことの質問リスト（推測で埋めない）

   確認: 5 ページの見出しとフォーム項目が決まった

3. 3プロジェクトを作って GitHub に置く

   npx create-next-app@latest でプロジェクトを作り、最初のコミットを GitHub に置きます。手順は AI で 0 から Web サービスを公開する の STEP 4〜15 と同じです。

   確認: GitHub にリポジトリができた

4. 4静的サイトの骨子を作る

   5 ページと共通ヘッダー・フッターを作ってもらいます。文章はあとで差し替えるので、まずは構造と見た目だけを整えます。

   AI に渡すプロンプト静的サイトの骨子を作るclaude-code

   プロンプトをコピー

   Next.js（App Router）で 5 ページの静的な企業サイトを作ってください。
   
   条件:
   - ページ: / , /services , /company , /contact , /privacy
   - 共通ヘッダー（ロゴ・ナビ）と共通フッター（会社名・プライバシーポリシーへのリンク）
   - CSS はフレームワークを使わず、CSS Modules か素の CSS。色は --primary: #6e4bff を基調に
   - 画像はプレースホルダーでよい（alt は必ず付ける）
   - スマートフォン幅（375px）で崩れないこと
   - 各ページの title と description を設定すること
   
   作ったら、起動コマンドと確認手順を最後に書いてください。

   確認: 5 ページが表示され、375px で崩れない

5. 5問い合わせフォームと API ルートを作る

   フォームと受け口の API を作ります。この段階では通知を送らず、受け付けた内容をサーバーのログに出すだけにして、検証とレート制限が効くことを先に確かめます。

   AI に渡すプロンプト問い合わせフォームと API ルートclaude-code

   プロンプトをコピー

   /contact に問い合わせフォームを作り、送信先として API ルート app/api/contact/route.ts を作ってください。
   
   フォーム:
   - 項目: お名前（必須）、メールアドレス（必須・形式チェック）、お問い合わせ内容（必須・最大 2000 文字）
   - ハニーポット用の非表示項目（入力があれば受け付けない）
   - 送信中はボタンを無効化し、成功 / 失敗をテキストで表示（aria-live="polite"）
   
   API:
   - POST のみ。JSON を受け取り、サーバー側でも同じ検証を行う
   - 同じ IP から 1 分に 3 回を超えたら 429 を返す（メモリ上の簡易制限でよい）
   - 成功したら { ok: true } を返す。通知の送信は次のステップで実装するので、いまは console.log で内容を出すだけにする
   - 秘密情報は一切ハードコードしない

   コード例app/api/contact/rate-limit.ts

   コードをコピー

   const hits = new Map<string, number[]>();
   
   export function tooMany(ip: string, limit = 3, windowMs = 60_000) {
     const now = Date.now();
     const recent = (hits.get(ip) ?? []).filter((t) => now - t < windowMs);
     recent.push(now);
     hits.set(ip, recent);
     return recent.length > limit;
   }

   確認: 空送信が拒否され、連打すると 429 になる

6. 6LINE Developers でチャネルを用意する

   LINE Developers コンソールでプロバイダーと Messaging API チャネルを作り、チャネルアクセストークン（長期）を発行します。通知先は自分のユーザー ID（チャネル基本設定の「あなたのユーザー ID」）です。公式アカウントを友だち追加しておきます。

   トークンは .env に書きます。.env.example にはキー名とプレースホルダーだけを書きます。

   コード例.env.example

   コードをコピー

   # 実際の値は .env（git には入れない）と Vercel の環境変数にだけ置く
   RESEND_API_KEY=＜ここに貼る：Resend の API キー＞
   CONTACT_TO=＜ここに貼る：通知を受け取るメールアドレス＞
   CONTACT_FROM=＜ここに貼る：Resend で認証した差出人＞
   LINE_CHANNEL_ACCESS_TOKEN=＜ここに貼る：LINE Developers のチャネルアクセストークン＞
   LINE_TO=＜ここに貼る：通知先の LINE ユーザー ID＞

   確認: .env にトークンがあり、.env.example には実際の値が無い

7. 7メールと LINE に通知する

   API ルートに通知処理を足します。環境変数が無いときは落ちずにスキップし、片方が失敗してももう片方は送るようにします。

   AI に渡すプロンプトメールと LINE への通知claude-code

   プロンプトをコピー

   app/api/contact/route.ts に、受け付けた問い合わせを 2 か所へ通知する処理を追加してください。
   
   1. メール: Resend の SDK で管理者宛に送る。API キーは環境変数 RESEND_API_KEY、宛先は CONTACT_TO、差出人は CONTACT_FROM
   2. LINE: Messaging API の push message で、環境変数 LINE_CHANNEL_ACCESS_TOKEN と LINE_TO（通知先のユーザー ID）を使って送る。本文は「お名前 / メール / 内容の先頭 200 文字」
   
   条件:
   - 環境変数は process.env から読み、未設定のときは 500 ではなく「設定が足りません」とログに出して { ok: false } を返す
   - トークンや宛先をコードや .env.example に実際の値で書かない。.env.example にはキー名とプレースホルダー（＜ここに貼る：…＞）だけを書く
   - 片方の送信が失敗しても、もう片方は送る
   - 個人情報をログに残さない（名前・メール・本文をそのまま console.log しない）

   コード例app/api/contact/line.ts

   コードをコピー

   export async function notifyLine(text: string) {
     const token = process.env.LINE_CHANNEL_ACCESS_TOKEN;
     const to = process.env.LINE_TO;
     if (!token || !to) {
       console.warn('LINE notification skipped: environment is not configured');
       return false;
     }
     const res = await fetch('https://api.line.me/v2/bot/message/push', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${token}`,
       },
       body: JSON.stringify({ to, messages: [{ type: 'text', text: text.slice(0, 1000) }] }),
     });
     return res.ok;
   }

   確認: テスト送信でメールと LINE に 1 通ずつ届く

8. 8プライバシーポリシーに通知先を書く

   問い合わせ内容を「メールと LINE で運営者に通知し、サーバーには保存しない」ことをプライバシーポリシーに明記します。文面は運営者が確認してから公開します。

   確認: 通知先と保存しない旨が書かれている

9. 9公開前チェックを AI に出してもらう

   秘密情報の混入、検証、レート制限、表示崩れを表で確認します。問題があればその場で直します。

   AI に渡すプロンプト公開前のセルフチェックclaude-code

   プロンプトをコピー

   このプロジェクトを公開する前に、次を確認して結果を表にしてください。
   
   - .env が .gitignore に入っていて、git ls-files .env が空
   - .env.example に実際の値が入っていない
   - API ルートで入力を検証している（必須・長さ・メール形式・ハニーポット・レート制限）
   - 問い合わせ内容を永続化していない（通知だけ）
   - プライバシーポリシーに「問い合わせ内容をメールと LINE で運営者に通知する」ことが書いてある
   - 375px で全ページが崩れない
   - 各ページに title と description がある
   
   問題があれば、修正案も一緒に出してください。

   確認: 表のすべてが OK

10. 10Vercel に公開する

    Vercel でリポジトリを取り込み、環境変数（5 つ）を Vercel 側に登録してからデプロイします。公開 URL でフォームを 1 回送信し、通知が届くことを確かめます。

    確認: 公開 URL からの送信でメールと LINE に届く

テスト・検証

チェックはこのブラウザにだけ保存されます。

公開手順

1. Vercel で GitHub リポジトリを取り込む
2. Vercel の Environment Variables に .env.example の 5 項目を登録する（Production）
3. デプロイ後、公開 URL から 1 回テスト送信して通知を確認する
4. 独自ドメインを設定し、HTTPS になっていることを確認する
5. Search Console にサイトを登録する

よくあるエラー

送信しても LINE に届かない

原因: LINE_TO が自分のユーザー ID ではない、または公式アカウントを友だち追加していない。トークンの期限切れや Vercel に環境変数を登録していないことも多い

対処: LINE Developers の「あなたのユーザー ID」を LINE_TO に入れ、公式アカウントを友だち追加する。Vercel の環境変数を確認して再デプロイする

メールは届くのに LINE だけ失敗する（401）

原因: チャネルアクセストークンが間違っている、または別チャネルのもの

対処: LINE Developers で長期トークンを再発行し、.env と Vercel の両方を更新する

ローカルでは届くのに公開後は届かない

原因: .env は git に入れていないので、Vercel 側に環境変数が無い

対処: Vercel の Environment Variables に 5 項目を登録して再デプロイする

正しい入力でも 429 になる

原因: レート制限の窓（1 分 3 回）にテスト送信が引っかかっている

対処: 1 分待つか、開発中だけ上限を上げる。本番の値は戻す

GitHub にトークンを push してしまった

原因: .env をコミットした、またはコードに直書きした

対処: すぐに LINE Developers と Resend でトークンを無効化・再発行し、履歴から削除する。再発行しない限り漏れたトークンは使われ続ける

あわせて使う

動く見本

• #002フェードアップFade-up
• #014追従ヘッダーSticky header
• #011トースト通知Toast notification

この組み合わせを Composer で開く→

使うプロンプト

• v0・Lovable・Boltに渡すプロトタイプ指示書を作るプロンプト
• 定型業務の自動化フローをZapier・Make・n8n向けに設計するプロンプト
• Web問い合わせへの初回返信メールを温度感別に作るプロンプト

AIツール

• Cursor
• Claude Code

先に読む Learn

• AIで0からWebサービスを作って公開する
• Vercel
• GitHub

参照した公式仕様

• LINE Messaging API リファレンス（プッシュメッセージ）
• Next.js Route Handlers
• Vercel Environment Variables
• Resend Node.js SDK

更新履歴

2026.10.21

初版