ChatGPT と MCP でホームページを作成する手順（美容室の例）

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

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

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

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

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

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

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

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

先に全体像をつかむ

登場人物は 2 つです。

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

ChatGPT は文章を書くのは得意ですが、書いたものをインターネット上の住所（URL）に置いておく役目は持っていません。そこで、この 2 つを ChatGPT のプラグインでつなぎます。プラグインとは、AI が外部のサービスを操作できるようにする接続口のことです（技術的には MCP という仕組みを使っています）。つないでおくと、ChatGPT との会話の中で「このページを公開して」と頼めるようになります。

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

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

用意するもの

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

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

手順

1. FormEdge に登録する

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

   FormEdge に無料で登録する

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

2. ChatGPT と FormEdge をつなぐ

   ChatGPT の設定 > プラグインを開きます。「プラグインを探す」で FormEdge を検索すると FormEdge が出てくるので、選んで「プラグインをインストール」を押します。

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

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

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

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

   AI に任せる範囲を絞りたいときは、FormEdge の管理画面の 設定 > 外部アプリ接続から変えられます。

4. ChatGPT に作ってもらう

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

   貼り付ける指示文

   コピー

   FormEdge で、お店のホームページを作ってください。
   
   - 店名: （例: ヘアサロン こもれび）
   - 業種: （例: 個人経営の美容室。カットとカラーが中心）
   - 住所: （例: 東京都〇〇区〇〇 2-4-1 〇〇ビル 2F）
   - 電話番号: （例: 03-0000-0000）
   - 営業時間: （例: 10:00-19:00）
   - 定休日: （例: 月曜・第 3 火曜）
   - 料金: （例: カット 4,500 円 / カラー 7,000 円〜 / トリートメント 3,000 円〜）
   - 伝えたいこと: （例: 美容師 1 人で、お客さま 1 人ずつゆっくり担当します。髪の悩みを聞いてから提案します）
   
   ページには、お店の紹介・メニューと料金・アクセス・予約や相談の問い合わせフォームを入れてください。
   問い合わせフォームの項目は、お名前・メールアドレス・ご希望のメニュー・ご相談内容の 4 つでお願いします。
   
   まだ公開はしないで、プレビュー URL を教えてください。

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

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

   プレビュー URL を開いて、次のようなポイントを確認します。お客さまはスマートフォンで見ることが多いので、スマートフォンの幅でも確認しておくと確実です。

   • 営業時間・定休日・電話番号・住所が正しいか
   • 料金が実際のメニュー表と合っているか（「〜」で始まる価格が定額になっていないか）
   • 書いていないことが勝手に足されていないか（「駐車場あり」「当日予約歓迎」など）
   • 写真が入る場所、文章の量が読みやすいか
   • 見た目が片側に寄っていたり、余白が不自然に空いていたりしないか

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

   貼り付ける指示文

   コピー

   トップの見出しをもう少し短くしてください。
   カラーの料金は「7,000 円〜」で、髪の長さによって変わります。そう書き直してください。
   アクセスの欄に「〇〇駅 東口から徒歩 3 分」を足してください。
   メニューの料金表が左に寄って見えるので、中央に揃えてください。

   

6. 公開する

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

   貼り付ける指示文

   コピー

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

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

   

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

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

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

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

   貼り付ける指示文

   コピー

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

   有料プランでは、メールのほかに LINE や Slack・Teams などのチャットへの通知、外部システムへの連携（Webhook）にも対応しています。営業中に手が離せない仕事なら、スマートフォンで気づきやすい通知先を選んでおくと取りこぼしが減ります。

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

よくつまずくところ

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

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

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

連携を使わずに作る場合

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