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

公開 2026-09-19

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

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

先に全体像をつかむ

登場人物は 2 つです。

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

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

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

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

用意するもの

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

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

手順

1. FormEdge に登録する

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

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

2. ChatGPT と FormEdge をつなぐ

   ChatGPT の設定 > アプリを開きます。FormEdge はアプリの一覧（ディレクトリ）に掲載されているので、一覧から FormEdge を探して接続します。URL の入力は要りません。

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

   一覧に出てこないときは、次の URL を接続先として手動で登録する方法もあります（ChatGPT の開発者モードが必要です）。

   接続先の URL

   コピー

   https://mcp.formedge.app/mcp

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

   つないだ直後に最初の操作を頼むと、FormEdge から「接続がまだ承認されていません」と返り、ChatGPT が承認ページの URL を教えてくれます。そのページで「どのワークスペースで、何をしてよいか」を選びます。ここで選んだ範囲が、そのまま AI にできることの範囲になります。承認したら、もう一度同じことを頼んでください。

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

   承認した内容は、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. 問い合わせが届くようにする

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

   貼り付ける指示文

   コピー

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

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

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

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

よくつまずくところ

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

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

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

連携を使わずに作る場合

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