ChatGPTでホームページを作って公開する方法
「ホームページを作って」とChatGPTに頼むと、HTMLのファイルを作って、その場でページを見せてくれます。ここまではとても簡単ですが、そのページをお客様に見てもらうには、もう一歩必要です。この記事では、ChatGPTでホームページを作るところから、保存する・人に見せる・自分のサイトとして公開する・あとから直すところまでを、実際のChatGPTの画面で順に紹介します。例として、架空のカフェ「こもれび珈琲」のホームページを作ります。
1. ChatGPTでできること
ChatGPTは、OpenAIが提供するAIアシスタントです。ホームページづくりでは、次のことができます。
- ページを作る: 伝えた内容をもとに、HTMLのファイルを作ります。会話の横にプレビューが表示されます。
- 会話で直す: 「見出しを大きく」「メニューを足して」と頼むと、ページを書き直します。
- 保存する・見せる: できたHTMLをダウンロードしたり、会話の共有リンクで見せたりできます。
- 自分のサイトとして公開する: プラグインでホスティングサービスとつなぐと、ChatGPTがアップロードまで行います。
この記事の画面は、2026年11月時点のWeb版ChatGPT（無料プラン）のものです。画面の表記や使える機能は、プランや時期によって変わることがあります。
2. ChatGPTでホームページを作る
STEP1：作りたいページを伝える
ChatGPTを開き、入力欄に作りたいページの内容を書いて送ります。お店の名前、見る人、載せる情報、雰囲気を具体的に書くのがコツです（書き方は6章で詳しく紹介します）。
STEP2：プレビューで確かめる
しばらく待つと、ChatGPTが komorebi-coffee.html のようなHTMLファイルを作ります。返事の中のファイルを押すと、会話の右側にできあがったページが表示されます。
ChatGPTの返事もよく読みましょう。この例では、駅名や住所を渡していなかったので、アクセスの欄はあとから追加できるようにしてある、とChatGPTが教えてくれました。渡していない情報は、ChatGPTが仮の内容で埋めることがあります。
STEP3：会話で直す
気になるところは、そのまま会話で伝えます。「メニューにチーズケーキ（450円）を足して」「スマホで見たときに文字を少し大きく」のように、どこをどう直したいかを書くと、思ったとおりに直りやすくなります。
3. できたページを保存する・人に見せる
HTMLとしてダウンロードする
プレビューの右上にあるダウンロードのボタンを押すと、HTMLファイルをパソコンに保存できます。返事の中の「HTMLファイルをダウンロード」からも保存できます。あとでホスティングサービスにアップロードするときに使います。
会話の共有リンクで見せる
画面右上の「共有」を押すと、この会話の公開リンクが作られ、コピーされます。リンクを知っている人なら誰でも、この会話を見られます。
共有リンクは、試作を家族や仕事仲間に見てもらうには手軽です。一方で、見せられるのはChatGPTの会話の画面で、URLもChatGPTのものです。お店の名前のURLや独自ドメインは使えません。名刺やお店の案内に載せる正式なサイトにするなら、次の章の方法で公開します。
4. 自分のサイトとして公開する2つの方法
| 方法 | やること | 直すとき |
|---|---|---|
| ダウンロードして | HTMLファイルをダウンロードし、 | ChatGPTで直して、 |
| プラグインで | ホスティングサービスを | 「ここを直して」と |
ダウンロードしてアップロードする方法は、どのホスティングサービスでも使えます。サービスの選び方と手順はHTMLファイルを無料で公開する方法を比較で紹介しています。
ChatGPTのプラグインは、ChatGPTとほかのサービスをつなぐ仕組みです。中身はMCP（Model Context Protocol）という、AIが外部のサービスを操作するための共通の仕組みで、つないだサービスの操作をChatGPTに任せられます。一度つないでおけば、直すたびにファイルを出し入れする必要がなくなります。次の章で、すぐサイトをつなぐ手順を紹介します。
5. プラグインで公開まで任せる手順
STEP1：プラグインの画面で「カスタム MCP サーバーを追加」
ChatGPTの左のメニューで「プラグイン」を開き、右上の「追加」から「カスタム MCP サーバーを追加」を選びます。
STEP2：名前とURLを入力する
名前に「すぐサイト」、接続タイプの「サーバーURL」に https://sugusite.com/mcp を入力します。認証は「OAuth」のままで大丈夫です。
STEP3：注意を確かめて「プラグインとして作成」
下にカスタムMCPサーバーを使うときの注意が表示されます。読んだら「理解したうえで続けます」にチェックを入れ、「プラグインとして作成」を押します。
STEP4：「すぐサイトに接続」を押す
ChatGPTとすぐサイトの間で扱うデータの説明が表示されます。確かめたら「すぐサイトに接続」を押します。
STEP5：すぐサイトにログインして「許可する」
すぐサイトの「AIとの接続」画面が開きます。ログインすると、ChatGPTができることと、できないことが表示されます。確かめたら「許可する」を押します。アカウントが無い方は、この画面から新規登録できます（30日間の無料トライアル付き）。パスワードの変更やカードの登録、プランの変更はChatGPTからはできないようになっています。
STEP6：「@」ですぐサイトを選んで頼む
新しい会話で、入力欄に「@」を入力し、候補から「すぐサイト」を選びます。
続けて、作りたいページと「すぐサイトで公開して」を一緒に頼みます。この例では、サイトのURLも指定しました。
STEP7：ChatGPTの操作を確かめて許可する
ファイルのアップロードなど、サイトを書き換える操作の前に「ChatGPT による すぐサイト の使用を許可しますか？」と表示されます。内容がよければ「一度だけ許可」を押します。毎回確かめるのが面倒な操作は「常に許可」にもできます。
「詳細を見る」を押すと、送るHTMLの中身も確かめられます。この例の確認には「外部画像URLを含む」と書かれていました。ChatGPTが、ほかのサイトの写真をページに使おうとしていたということです。このまま公開すると、他人の写真を勝手に使うことになりかねません（あとのSTEP9で外してもらいました）。
STEP8：確認用ページを見てから公開する
この例では、ChatGPTがまずパスワード付きの確認用ページを作り、見るためのユーザー名とパスワードを教えてくれました。確認して問題がなければ「公開して」と送ると、本番のURLで公開されます。
公開が終わると、ChatGPTが公開したURLを教えてくれます。この例では https://komorebi-gpt.mysugusite.com が公開されたURLです。
STEP9：あとから会話で直す
公開したあとも、会話で頼むだけで直せます。ChatGPTはサーバー上のファイルを読み直してから書き換えるので、手元にファイルが無くても大丈夫です。この例では「ほかのサイトの画像は使わないで。写真の部分は外して、メニューにチーズケーキ（450円）を足して。確認用のプレビューは削除して」と頼みました。
直したあとのページです。ほかのサイトの写真を使わず、色と文字で雰囲気を出すデザインになりました。
ほかのAI（Claude・Claude Code・Cursorなど）でのつなぎ方は、AIからすぐサイトを操作する（MCP連携）の使い方で紹介しています。
6. ChatGPTに頼むときのコツ
「ホームページを作って」だけでも形にはなりますが、次のことを最初に伝えると、直す回数が減ります。
- 誰の、何のためのページか: 「駅前の小さなカフェ。近所の方に営業時間とメニューを知ってもらいたい」のように、目的と見る人を伝えます。載せる内容や順番をChatGPTが考えやすくなります。
- 載せる情報: 店名・住所・電話番号・営業時間・メニューと値段など、実際の情報を渡します。渡さない情報は、ChatGPTがもっともらしい仮の内容で埋めてしまいます。
- ページの構成: 「上から順に、お店の紹介・メニュー・アクセス・お問い合わせ」のように並び順を伝えます。
- 雰囲気: 「木のぬくもりがある、落ち着いた色合い」のように言葉で伝えます。参考にしたいサイトの雰囲気を説明するのも効果的です。
- 作りの条件: 「1つのHTMLファイルで」「スマホで見やすく」「外部のJavaScriptは使わないで」と添えると、公開しやすい形で作ってくれます。
- まず確認したいときは、そう伝える: プラグインで公開するときは「まずパスワード付きのプレビューで見せて」と頼むと、関係者だけが見られる状態で確かめてから公開できます。
この記事の画面で使った依頼文は次のとおりです。
依頼文を一から考えるのが難しいときは、AIで簡単ホームページデザイン！のプロンプト作成ツールを使ってください。ホームページの目的・載せる情報・内容・色のイメージを入れると、ChatGPTにそのまま貼り付けられる依頼文ができます。
写真は、ChatGPTに説明して作ってもらうよりも、実際のお店や商品の写真を使うほうが伝わります。AIで画像を作る方法はAIで簡単画像作成！で紹介しています。
7. 公開する前に確かめること
ChatGPTが作ったページは見た目が整っていても、中身に思わぬ間違いが混ざることがあります。公開する前に、とくに次の点を確かめてください。
- 情報が正しいか: 住所・電話番号・営業時間・値段を、一文字ずつ確認します。ChatGPTは渡していない情報を作って書くことがあり、「○○」のような仮の文字が残っていることもあります。
- お問い合わせフォームが動くか: ChatGPTが作るフォームは見た目だけで、送信しても誰にも届かないことがよくあります。HTMLだけのサイトでフォームを使うには、フォーム送信サービスを使うか、メールソフトが開くリンク（mailto）にします。
- 画像の権利: ほかのサイトの画像のURLが入っていないか確認します。使う写真は、自分で撮ったものか、使ってよいと確認できたものにします。
- スマホで見やすいか: 公開したURLをスマホで開き、文字が小さすぎないか、横にはみ出していないかを確認します。
ほかのサイトから読み込んでいるプログラムなど、確かめておきたいことの一覧は、AIでホームページを作って公開する方法にまとめています。
8. すぐサイトについて
最後に、この記事を書いている私たちのサービス、すぐサイトのアピールをさせてください。
すぐサイトは、HTMLファイルをアップロードするだけでホームページを公開できる、日本のホスティングサービスです。自分で作ったHTMLやAIに作ってもらったページをそのまま公開できるほか、文章と写真を入れるだけで作れる飲食店向けのテンプレートや、今のサイトをURLから取り込む機能もあります。料金は1サイト月額220円（税込）で、お店や会社のサイトなど商用にも使えます。初回30日間は無料で、クレジットカードを登録せずに試せます。
ChatGPTのプラグインとしてつなげる
すぐサイトは、ChatGPTのプラグインの画面からURLを入れるだけでつなげます。一度つないでおけば、「@」ですぐサイトを選んで話しかけるだけで、作成から公開、あとからの修正まで進められます。
ChatGPTがすぐサイトの決まりを知っている
つないだChatGPTは、すぐサイトの使い方（URLの決まり方、画像の容量、お問い合わせフォームの作り方など）と、あなたのアカウントやサイトの状態を確かめてから作業します。「フォームを付けたい」と頼めば、HTMLだけで動く方法を提案します。
公開前の確認がしやすい
ファイルやフォルダごとにパスワードをかけられるので、できたページをまず関係者だけに見てもらい、確認が済んでから公開する、という進め方ができます。
パスワードはChatGPTに渡らない
接続はブラウザでのログインと許可で行い、ChatGPTにパスワードを教える必要はありません。パスワードの変更やカードの登録、プランの変更など大切な操作は、ChatGPTからはできないようにしています。
詳しくはAIに話しかけるだけでホームページを公開のページをご覧ください。