Claude だけでお店のホームページと問い合わせフォームを作って公開する

公開 2026-09-19

お店やサロン、教室を営んでいると「ホームページを作りたい」「問い合わせをメールや電話以外でも受けたい」と思う場面があります。ただ、制作会社に頼むと費用がかかり、自分で作ろうとすると聞いたことのない用語が次々に出てきます。

このガイドでは、AI の Claude にチャットで頼むだけで、お店のホームページと問い合わせフォームを作り、実際にインターネット上に公開するまでの手順を説明します。プログラミングの知識も、サーバーの契約も要りません。

先に全体像をつかむ

やりとりの登場人物は 2 つです。

• Claude — 文章を書いたり、ページの構成を考えたりする AI です
• FormEdge — 作ったページとフォームを預かって、インターネット上に公開する場所です

この 2 つをコネクタでつなぎます。コネクタとは、AI が外部のサービスを操作できるようにする接続口のことです（技術的には MCP という仕組みを使っています）。つないでおくと、Claude との会話の中で「このページを公開して」と頼めるようになります。

つなぐ前に押さえておきたいのは、次の点です。

• Claude が作るのは下書きです。公開前の確認はご自身で行ってください
• 営業時間・料金・住所のような事実は、伝えた内容がそのまま使われます。伝えていないことは AI が推測で埋めてしまうことがあるので、必ず読み返してください

用意するもの

• Claude のアカウント（claude.ai）
• FormEdge のアカウント（この記事の最後から無料で作れます）
• お店の情報のメモ — 店名、何のお店か、住所、電話番号、営業時間、定休日、料金やメニュー、写真があれば写真

メモは箇条書きで構いません。あとで Claude にそのまま渡します。

手順

1. FormEdge に登録する

   まず、公開する場所を用意します。メールアドレスで無料登録できます。クレジットカードは要りません。

   登録すると管理画面が開きます。この時点では何も作らなくて大丈夫です。

2. Claude と FormEdge をつなぐ

   claude.ai を開き、設定 > コネクタを開きます。一覧に FormEdge があるので「接続」を選びます。URL の入力は要りません。

   選ぶと FormEdge のサインイン画面が開くので、手順 1 で作ったアカウントでサインインします。

   一覧に出てこないときや、Claude Code など別のアプリから使うときは、次の URL を接続先として登録します。

   コネクタの URL

   コピー

   https://mcp.formedge.app/mcp

3. できることの範囲を決めて承認する

   つないだ直後の最初の操作では、「どのワークスペースで、何をしてよいか」を選ぶ承認画面が開きます。ここで選んだ範囲が、そのまま AI にできることの範囲になります。

   • ページとフォームを作ってもらうので、作成・編集の権限は付けます
   • 公開の権限は、下書きまで AI に任せて公開は自分で判断したいなら付けずに承認します（あとから足せます）
   • 通知設定の変更の権限は、投稿があったときの知らせ先まで Claude に設定してもらうなら付けます（最後の手順で使います。付けない場合は管理画面から設定します）
   • 削除の権限は既定では付きません。取り消せない操作なので、必要になるまで付けないことをおすすめします

   承認した内容は、FormEdge の管理画面の 設定 > 外部アプリ接続からあとで変更・解除できます。

4. Claude に作ってもらう

   ここからは会話だけです。用意したメモを添えて、次のように頼みます。（ ）の部分をご自身のお店の情報に置き換えてください。

   貼り付ける指示文

   コピー

   FormEdge で、お店のホームページを作ってください。
   
   - 店名: （例: パン工房ひだまり）
   - 業種: （例: 天然酵母のパン屋）
   - 住所: （例: 東京都〇〇区〇〇 1-2-3）
   - 電話番号: （例: 03-0000-0000）
   - 営業時間: （例: 9:00-18:00）
   - 定休日: （例: 水曜）
   - 伝えたいこと: （例: 国産小麦と自家製酵母で、毎朝店内で焼いています）
   
   ページには、お店の紹介・メニュー・アクセス・問い合わせフォームを入れてください。
   問い合わせフォームの項目は、お名前・メールアドレス・お問い合わせ内容の 3 つでお願いします。
   
   まだ公開はしないで、プレビュー URL を教えてください。

   Claude がページとフォームの下書きを作り、確認用の URL（プレビュー URL）を返します。

5. プレビューを見て直す

   プレビュー URL を開いて、次のようなポイントを確認します。スマートフォンでもレイアウトを確認しておくと確実です。

   • 営業時間・定休日・電話番号・住所が正しいか
   • 書いていないことが勝手に足されていないか（「駐車場あり」など）
   • 写真が入る場所、文章の量が読みやすいか
   • 見た目が片側に寄っていたり、余白が不自然に空いていたりしないか

   直したいところは、そのまま Claude に伝えれば直ります。見た目も、気になった箇所を見たままの言葉で伝えれば十分です。

   貼り付ける指示文

   コピー

   トップの見出しをもう少し短くしてください。
   あと、定休日は水曜だけでなく第 3 火曜も休みです。
   アクセスの欄に「最寄りは〇〇駅から徒歩 5 分」を足してください。
   メニューの欄が左に寄って見えるので、中央に揃えてください。

   

6. 公開する

   内容に納得できたら公開します。

   貼り付ける指示文

   コピー

   内容を確認しました。このページを公開してください。

   公開されると、誰でも開ける URL が返ってきます。この URL を Google ビジネスプロフィールや SNS のプロフィール、名刺、チラシに載せて使います。

   

   この記事の手順どおりに作った見本は、こちらで実際に開けます。架空のお店のページです。

7. 問い合わせが届くようにする

   最後に、フォームに投稿があったときの知らせ先を設定します。

   貼り付ける指示文

   コピー

   問い合わせフォームに投稿があったら、（メールアドレス）にメールで知らせるようにしてください。

   メールの通知は、投稿があったことだけを知らせるのが既定の動作です。投稿の内容もメールに載せたいときは、そのように頼めば切り替えられます。届いた内容は、管理画面の投稿一覧からいつでも読めます。

   有料プランでは、メールのほかに LINE や Slack への通知、外部システムへの連携（Webhook）にも対応しています。

   設定できたら、テスト投稿を 1 回行って、指定した宛先に通知が届くことを確かめてください。

よくつまずくところ

予約や支払いも受けたいとき

問い合わせフォームに慣れたら、受け取る内容を増やせます。

• 予約の受付 — 希望日時を書いてもらう項目を足します。ただしフォームで受け取れるのは予約のリクエストで、その場で確定はしません。空き状況を見てお店から返信する運用になります
• 料金の受け取り — 固定の金額 × 数量という形で、フォームの送信後にカード決済を受けられます

連携を使わずに作る場合

コネクタを使わなくても、FormEdge の管理画面でテンプレートを選んで、文章を書き換えれば同じように公開できます。まずは無料プランで一度公開してみて、AI との連携は必要になってから検討するのでも遅くありません。