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

公開 2026-09-19 · 更新 2026-09-25

この手順は Claude 向けです。ChatGPT をお使いの方は ChatGPT 版の手順へ。

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

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

MCP でホームページを作る 3 つの方法

「MCP でホームページを作る」と一口に言っても、やり方は大きく 3 つに分かれます。

• 開発者向け: AI にコードを書かせて自分で公開する — Claude Code などの AI エージェントに、デザインツールや公開先のサーバーを MCP でつなぎ、HTML や CSS を書かせて自分で公開します。自由度は高い一方、コードとサーバーの知識が要ります
• ヘッドレス CMS をつなぐ — すでにあるサイトの記事やお知らせを、AI とのチャットで更新します。サイトそのものは別に作ってある前提です
• ホームページ作成サービスの MCP コネクタを使う — FormEdge のように MCP に対応したホームページ作成サービスを AI につなぎ、チャットで頼むだけで作成から公開まで進めます。コードもサーバーの契約も要らず、問い合わせフォームも一緒に作れます。お店のオーナーが自分で作るなら、この方法がいちばん近道です

この記事で説明するのは 3 つ目です。

先に全体像をつかむ

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

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

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

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

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

用意するもの

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

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

手順

1. FormEdge に登録する

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

   FormEdge に無料で登録する

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

2. Claude と FormEdge をつなぐ

   claude.ai を開き、設定 > コネクタを開きます。「探索」を選んで FormEdge と入力すると FormEdge が出てくるので、選んで「Claude接続」を押します。

   このとき、コネクタの接続を続けてよいかを確かめる画面が出ることがあります。出た場合は、接続を続けるほうのボタンを押して進んでください。

   FormEdge のサインイン画面に移るので、手順 1 で作ったアカウントでサインインします。サインインすると、「This will allow … access to:」で始まる英語の確認画面が出ます。Claude に FormEdge へのアクセスを許してよいかの確認なので、内容を確かめて許可してください。ここで許可するのは、Claude を FormEdge につなぐことだけです。AI に任せる範囲は、次の手順のとおり、あとから管理画面で絞れます。

3. つないだら、任せる範囲を決める

   つないだあと、はじめて Claude に操作を頼んだときに、FormEdge への接続が自動で有効になります。ふつうは、これ以上の設定は要りません。

   無料プランで始めた場合は、Claude が承認ページの URL を案内します。そのページで「接続する」を押すと「Claude と接続しました」と出るので、Claude に戻って続けてください（無料プランでは、月の呼び出し回数に上限があり、投稿と添付ファイルは Claude から取得できません）。有料プランでは、最初の操作のときに自動で接続されます。

   AI に任せる範囲を絞りたいときは、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. 問い合わせが届くようにする

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

   別の宛先にしたいとき、宛先を増やしたいとき、投稿の内容もメールに載せたいときは、Claude に頼めば変えられます。

   貼り付ける指示文

   コピー

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

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

   そのうえで、テスト投稿を 1 回行って、思っている宛先に通知が届くことを確かめてください。

よくつまずくところ

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

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

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

連携を使わずに作る場合

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