AIでホームページを作って公開する方法（ChatGPT・Claude）
ChatGPTや「ホームページを作って」とClaudeに頼むと、数十秒でそれらしいページができあがります。ところが、できたページをお客様や知り合いに見てもらおうとすると、「これをどうやってインターネットに出せばいいの？」で手が止まる方が少なくありません。AIが作ってくれるのはページの中身（HTML）までで、インターネットに公開するには、ファイルを置いておく場所が別に必要だからです。この記事では、ChatGPTとClaudeでホームページを作る手順と、作ったページを公開する3つの方法を比べながら、頼み方のコツと公開前に確かめておきたいことを解説します。
1. 作ってから公開するまでの流れ
AIでホームページを作って公開するまでは、大きく次の3段階に分かれます。
- 作る: ChatGPTやClaudeに、どんなページにしたいかを伝えてHTMLを書いてもらいます。
- 確かめる: AIの画面のプレビューで見た目を確認し、気になるところを会話で直してもらいます。
- 公開する: できたHTMLを、インターネットからいつでも見られる場所（ホスティングサービス）に置き、URLを付けます。
1と2はAIの画面の中で完結します。つまずきやすいのは3です。AIのプレビューは自分の画面で見えているだけで、そのままではほかの人に見てもらえません。どこに、どうやって置くかで手間や使い勝手が大きく変わるので、次の章で方法を比べます。
2. 公開する方法の比較
AIで作ったページを人に見てもらう方法は、おもに次の3つです。2026年11月時点の各サービスの公開情報をもとにまとめています。
| 方法 | 手間 | URL | 直すとき | 向いている使い方 |
|---|---|---|---|---|
| AIの | ボタンを | AIサービスの | AIの画面で | 試作を |
| HTMLを | 保存と | 使う | 直したHTMLを | お店や |
| AI連携（MCP）で | 最初に | 使う | 会話で | 何度も |
AIの共有リンク
Claudeには、作ったページを「Artifacts」として公開し、リンクで共有する機能があります。ChatGPTでも、会話を共有リンクで送れます。いちばん手軽ですが、URLはAIサービスのもので、独自ドメインは使えません。共有の範囲や、見る人にアカウントが要るかどうかはプランや画面によって違います。お店の案内や名刺に載せる正式なサイトというより、試作を見てもらう用途に向いています。
HTMLを保存してアップロード
AIが書いたHTMLをファイルとして保存し、ホスティングサービスにアップロードする方法です。自分のサイトとしてURLを持てて、独自ドメインも使えます。そのかわり、直すたびに「AIに直してもらう→保存する→アップロードし直す」を繰り返します。ホスティングサービスの選び方はHTMLファイルを無料で公開する方法を比較で詳しく紹介しています。
AI連携（MCP）で公開まで任せる
MCP（Model Context Protocol）は、AIが外部のサービスを操作するための共通の仕組みです。MCPに対応したホスティングサービスをAIにつなぐと、「作って公開して」と頼むだけで、AIがアップロードまで行います。公開したあとも「ここを直して」と頼むだけで更新できます。最初に一度、AIとサービスをつなぐ設定が必要です。
このほか、複数のページを持つ本格的なサイトを作るなら、パソコンのファイルを直接読み書きできるコーディングAI（Claude Codeなど）を使う方法もあります。詳しくはコーディングAIで高度なホームページを作成してみよう！をご覧ください。
3. ChatGPTでホームページを作る手順
ChatGPTは、OpenAIが提供するAIアシスタントです。作りたいページを伝えると、HTMLのファイルを作り、会話の横にページのプレビューを表示します。会話で直してもらうこともできます。できたページは、プレビューのダウンロードのボタンで保存するか、会話の「共有」でリンクを使って人に見せられます。
実際の画面を使った詳しい手順は、ChatGPTでホームページを作って公開する方法で紹介しています。
4. Claudeでホームページを作る手順
Claudeは、Anthropicが提供するAIアシスタントです。作りたいページを伝えると、会話の横にページのプレビューが表示され、会話で直してもらえます。できたページは「HTMLとしてダウンロード」で保存するか、「Artifacts を公開」でリンクを使って人に見せられます。
実際の画面を使った詳しい手順は、Claudeでホームページを作って公開する方法で紹介しています。
5. 作ったHTMLを保存して公開する手順
AIの画面からコピーしたHTMLは、テキストのままでは公開できません。まずパソコンにファイルとして保存します。
- Windows: メモ帳を開いてHTMLを貼り付け、「名前を付けて保存」でファイル名を
index.html、文字コードを「UTF-8」にして保存します。 - Mac: テキストエディットを開き、メニューの「フォーマット」→「標準テキストにする」を選んでからHTMLを貼り付け、
index.htmlという名前で保存します。
保存したファイルをダブルクリックしてブラウザで開き、AIのプレビューと同じように表示されれば成功です。文字化けする場合は、文字コードがUTF-8になっているか確認してください。
あとは、ホスティングサービスに index.html をアップロードすれば公開できます。写真を使う場合は、HTMLと同じフォルダ（または images などのフォルダ）に入れて、フォルダごとアップロードします。各サービスの手順はHTMLファイルを無料で公開する方法を比較にまとめています。
6. AIに公開まで任せる手順（AI連携・MCP）
MCPに対応したホスティングサービスなら、保存やアップロードをAIに任せられます。ここではすぐサイトを例に説明します。https://sugusite.com/mcp が接続先のURLです。
Claudeにつなぐ
- Claudeのコネクタディレクトリのすぐサイト（Sugusite）のページを開き、「Claude に接続」を押します。
- すぐサイトの「AIとの接続」画面が開くので、ログインして「許可する」を押します。アカウントが無い方は、この画面から新規登録できます（30日間の無料トライアル付き）。
つないだあとの頼み方や、Claudeが操作する前に出る確認の画面は、Claudeでホームページを作って公開する方法で画面付きで紹介しています。
ChatGPTにつなぐ
- Web版ChatGPTの左のメニューで「プラグイン」を開き、右上の「追加」から「カスタム MCP サーバーを追加」を選びます。
- 名前（例: すぐサイト）と、サーバーURL
https://sugusite.com/mcpを入力します。認証は「OAuth」のままです。「理解したうえで続けます」にチェックを入れて「プラグインとして作成」を押します。 - 「すぐサイトに接続」を押すと、すぐサイトの「AIとの接続」画面が開きます。ログインして「許可する」を押します。会話では、入力欄に「@」を入力してすぐサイトを選ぶと使えます。
つないだあとの頼み方や、ChatGPTが操作する前に出る確認の画面は、ChatGPTでホームページを作って公開する方法で画面付きで紹介しています。ChatGPTでカスタムMCPサーバーを使えるプランや画面の表記は変わることがあります。見つからない場合は、OpenAIのドキュメントを確認してください。ほかのAIとのつなぎ方はAIからすぐサイトを操作する（MCP連携）の使い方で紹介しています。
話しかけて公開する
つないだら、いつもどおり話しかけるだけです。
AIがHTMLを作り、アップロードして、公開したURLを会話の中で教えてくれます。公開したあとも、「メニューにチーズケーキ（450円）を足して」「営業時間を11時から20時に直して」と頼むだけで直せます。AIはサーバー上のファイルを読み直してから書き換えるので、手元にファイルが無くても大丈夫です。サイトの削除やファイルの上書きなど元に戻せない操作は、AIが実行の前に確認します。
7. AIに頼むときのコツ
「ホームページを作って」だけでも形にはなりますが、次のことを最初に伝えると、直す回数が減ります。
- 誰の、何のためのページか: 「駅前の小さなカフェ。近所の方に営業時間とメニューを知ってもらいたい」のように、目的と見る人を伝えます。載せる内容や順番をAIが考えやすくなります。
- 載せる情報: 店名・住所・電話番号・営業時間・メニューと値段など、実際の情報を渡します。渡さない情報は、AIがもっともらしい仮の内容で埋めてしまいます。
- ページの構成: 「上から順に、お店の紹介・メニュー・アクセス・お問い合わせ」のように並び順を伝えます。
- 雰囲気: 「木のぬくもりがある、落ち着いた色合い」のように言葉で伝えます。参考にしたいサイトの雰囲気を説明するのも効果的です。
- 作りの条件: 「1つのHTMLファイルで」「スマホで見やすく」「外部のJavaScriptは使わないで」と添えると、公開しやすい形で作ってくれます。
- まず確認したいときは、そう伝える: AI連携（MCP）で公開するときは「まずパスワード付きのプレビューで見せて」と頼むと、関係者だけが見られる状態で確かめてから公開できます。
例えば、次のように頼みます。
依頼文を一から考えるのが難しいときは、AIで簡単ホームページデザイン！のプロンプト作成ツールを使ってください。ホームページの目的・載せる情報・内容・色のイメージを入れると、そのままAIに貼り付けられる依頼文ができます。
写真は、AIに説明して作ってもらうよりも、実際のお店や商品の写真を使うほうが伝わります。AIで画像を作る方法はAIで簡単画像作成！で紹介しています。
8. 公開する前に確かめること
AIが作ったページは見た目が整っていても、中身に思わぬ間違いが混ざることがあります。公開する前に、次の点を確かめてください。
- 情報が正しいか: 住所・電話番号・営業時間・値段を、一文字ずつ確認します。AIは渡していない情報を作って書くことがあり、「○○」のような仮の文字が残っていることもあります。
- お問い合わせフォームが動くか: AIが作るフォームは見た目だけで、送信しても誰にも届かないことがよくあります。HTMLだけのサイトでフォームを使うには、フォーム送信サービスを使うか、メールソフトが開くリンク（mailto）にします。
- ほかのサイトからプログラムを読み込んでいないか: 見覚えのない外部のJavaScriptが入っていたら、何のためのものかAIに聞き、不要なら外してもらいます。
- 画像の権利: ほかのサイトの画像のURLが入っていないか確認します。使う写真は、自分で撮ったものか、使ってよいと確認できたものにします。
- 見られて困る情報を書いていないか: HTMLのソースは誰でも見られます。個人のメールアドレスやパスワードなどを書かないでください。
- スマホで見やすいか: 公開したURLをスマホで開き、文字が小さすぎないか、横にはみ出していないかを確認します。
まだ人に見せる段階でないときは、パスワードをかけて関係者だけに見せられるサービスを選ぶと安心です。
9. すぐサイトについて
最後に、この記事を書いている私たちのサービス、すぐサイトのアピールをさせてください。
すぐサイトは、HTMLファイルをアップロードするだけでホームページを公開できる、日本のホスティングサービスです。自分で作ったHTMLやAIに作ってもらったページをそのまま公開できるほか、文章と写真を入れるだけで作れる飲食店向けのテンプレートや、今のサイトをURLから取り込む機能もあります。料金は1サイト月額220円（税込）で、お店や会社のサイトなど商用にも使えます。初回30日間は無料で、クレジットカードを登録せずに試せます。
AIとの会話だけで公開・更新できる
すぐサイトはAI連携（MCP）に対応しています。ClaudeやChatGPTに「作って公開して」と話しかけるだけで、HTMLの作成からアップロード、公開設定まで進みます。HTMLを保存したり、管理画面を開いたりする必要はありません。あとから直したいときも、会話で頼むだけです。
AIがすぐサイトの決まりを知っている
つないだAIは、すぐサイトの使い方（URLの決まり方、画像の容量、お問い合わせフォームの作り方など）と、あなたのアカウントやサイトの状態を確かめてから作業します。「フォームを付けたい」と頼めば、HTMLだけで動く方法を提案します。
公開前の確認がしやすい
ファイルやフォルダごとにパスワードをかけられるので、できたページをまず関係者だけに見てもらい、確認が済んでから公開する、という進め方ができます。
パスワードはAIに渡らない
接続はブラウザでのログインと許可で行い、AIにパスワードを教える必要はありません。パスワードの変更やカードの登録、プランの変更など大切な操作は、AIからはできないようにしています。
詳しくはAIに話しかけるだけでホームページを公開のページをご覧ください。