ChatGPT・ClaudeにHTMLを書かせてホームページを作る｜無料サーバーで公開まで

01AIにHTMLを書かせる方法が向く人・向かない人

この方法は、AIが書いたファイルを自分で保存し、公開先に置く手作りのホームページです。月額料金がかからず、ファイルを自分で管理できる反面、表示の確認や不具合の切り分けも自分で行います。

ビルダーと比べてから決めたい人はAIホームページ作成ツールの比較を、無料プランだけで済ませたい人は無料のAIホームページ自動生成ツールと無料の落とし穴を確認してください。更新やフォームが多いと分かっているなら、最初からWordPress×AIでホームページを作る方法を選ぶ方が手戻りがありません。

02ChatGPT・Claude・GeminiでHTMLを作るときの違い

どのAIでも、チャットで依頼すればHTMLとCSSのコードを出力できます。違いが出るのは、プレビュー、書き出し、共有・公開の機能と料金です。機能名や対象プランは短い間隔で変わっているため、2026年10月16日に各社の料金ページとヘルプで確認した内容を整理します。

ChatGPT：canvasからチャット内のコードブロックへ

OpenAIのリリースノートでは、2026年5月28日にGPT-5.5系のモデルではcanvasを使えず、文章やコードはチャット内のブロックで扱うと案内されました。2月にはチャット内でコードを編集・プレビューできる機能も案内されていますが、対象プランの記載はありません。この記事では、画面の機能名に左右されない「チャットでHTMLを出力させ、コピーしてファイルに保存する」方法で説明します。

有料のPlus・Proでは「ChatGPT Sites」で作成から公開まで進められ、独自ドメインも提供されている場合は接続できます。ただし作成・編集はCodexの使用量に数えられ、公開後のトラフィックやストレージにも上限があります。月額料金を払ってChatGPTの中で完結させる、別の選択肢と考えてください。

Claude：2026年9月16日にArtifactsの作り方が変わった

Claudeのヘルプによると、2026年9月16日より前にチャットで作ったArtifactは「レガシーArtifact」として使い続けられますが、新しくは作れません。現在はDocs・Slides・Designのテンプレートから作り、Designはランディングページなどを.zipやスタンドアロンHTMLで書き出せます。ヘルプでは、これらのテンプレートは全プランで使えるとされ、書き出しにプランの制限は書かれていません。新しい方式のArtifactは、リンクを開く人にもClaudeアカウントが必要なため、誰でも見られるホームページには使えません。書き出したHTMLやコピーしたコードを、後述の公開先に置くのが基本の流れです。

どのAIを選ぶか

数ページのHTMLなら、まず無料プランで始め、上限に当たってから有料化を考えれば十分です。編集部としては、使い慣れたAIを1つに決め、同じ会話の中で修正を重ねる方法を勧めます。会話を分けると、伝えた条件やデザインの前提がずれやすいためです。

03作り始める前にページ構成・素材・URLを決める

AIは構成も文章も提案できますが、所在地、営業時間、料金、資格、実績といった事業の事実は知りません。先に人が決めて渡すほど、やり直しが減ります。

ファイル名はそのままURLになります。公開後に名前を変えると、外部からのリンクや検索結果のURLが切れるため、半角英数字の短い名前を公開前に決めておきます。考え方はURL構造とSEOに強い設計で説明しています。写真は自分で撮影したものか利用条件を確認した素材だけを使い、次のような1つのフォルダにまとめます（説明用の例）。

my-site/
├── index.html
├── service.html
├── about.html
├── contact.html
├── privacy.html
├── 404.html
├── css/style.css
└── images/shop.jpg

04AIへの頼み方：プロンプト例

一度に全ページを頼むより、共通のデザインとトップページを先に作り、ほかのページは「先ほどの css/style.css と同じヘッダー・フッターで about.html を作って」と頼む方が、ページ間のずれを抑えられます。以下は説明用の例です。〈 〉を自分の情報に置き換えてください。

例1：条件を伝えてトップページを作る

あなたはWeb制作者です。次の条件で、日本語のホームページのトップページを作ってください。
・業種と地域：〈〇〇市の整体院〉
・目的：〈電話とフォームからの予約〉
・ページ構成：トップ、サービス・料金、プロフィール、問い合わせ、プライバシーポリシー
・掲載する事実：〈営業時間、住所、料金表〉。この情報にない実績・口コミ・数字は作らない
・技術条件：HTMLとCSSだけを使い、JavaScriptと外部サービスの読み込みは使わない。
　CSSは css/style.css に分け、リンクは相対パスで書く。html要素に lang="ja"、
　viewportのmeta、ページ固有のtitleとmeta descriptionを入れ、画像にはaltを付ける
・分からない情報は【要確認】と書く

例2：一部だけ直す

service.html の料金表だけを修正します。〈施術A 60分〉の料金を〈〇〇円（税込）〉に変えてください。
ほかの部分は変えず、変更した箇所が分かるように示してください。

例3：公開前に点検させる

次のHTMLを公開前に点検してください。スマートフォン表示、lang属性、titleとmeta description、
画像のalt、リンク切れの可能性、外部から読み込んでいるファイルを一覧にし、直したコード全体を示してください。
〈HTMLを貼り付け〉

AIの点検にも見落としや誤りがあるため、例3の結果は参考にとどめ、次の章の項目は自分の目で確認します。あわせて、次の3点を習慣にしておくと安全です。

• コードはファイルごとにテキストエディターへ貼り付け、文字コードUTF-8で保存する
• 修正前のファイルを別のフォルダに残し、うまくいかなければ戻せるようにする
• AIが書き足した「地域で一番」「満足度〇〇%」のような根拠のない表現は削除する

05生成されたHTMLを公開前に確認する

AIが出力したHTMLは、見た目が整っていても、スマートフォン表示や検索に必要な記述が抜けていることがあります。次の骨組み（説明用に短くした例）と表を使って、最低限の項目がそろっているかを照らし合わせます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>〇〇整体院｜〇〇駅から徒歩5分</title>
  <meta name="description" content="〇〇市の整体院です。営業時間、料金、予約方法を掲載しています。">
  <link rel="icon" href="favicon.png">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main>
    <h1>〇〇整体院</h1>
    <img src="images/shop.jpg" alt="〇〇整体院の施術室">
  </main>
</body>
</html>

パソコンで表示を確かめる

保存した index.html をダブルクリックすると、ブラウザで表示できます。全ページにリンクからたどり着けるか、画像とCSSが読み込まれるか、開発者ツールでスマートフォンの画面幅にしても横にはみ出さないかを確かめます。「/css/style.css」のようにスラッシュから始まるパスは、公開後に参照先が変わることがあります。特にGitHub Pagesのプロジェクトサイトは「https://ユーザー名.github.io/リポジトリ名/」の階層で公開されるため、相対パスで書いておくと崩れにくくなります。スマートフォンでの確認方法はモバイルフレンドリーの実装・検証手順で詳しく説明しています。

06公開先を選ぶ：無料の静的ホスティングと国内の無料サーバー

HTMLファイルだけのサイトは、PHPやデータベースが要らないため、静的サイト向けの無料ホスティングに置けます。選ぶときは、容量より先に「商用利用の扱い」と「上限を超えたときにどうなるか」を確認してください。

Cloudflareは、新しいプロジェクトはPagesではなくWorkersで始めるよう案内しています。Workersでも静的ファイルへのリクエストは無料・無制限ですが、公式の手順はnpm（Node.js）のコマンドが前提です。GoogleのFirebase Hostingにも無料枠がありますが、無料の転送量の表記が公式の料金ページと使用量のドキュメントで異なっていたため、使う場合はコンソールで上限を確認してください。

国内の無料レンタルサーバーの状況（2026年10月16日、タダサーバーの申込み画面は10月17日に公式サイトで確認）

サービス	無料プランの主な条件	新しく使う場合の注意
XREA Freeレビュー	Web容量10GB、転送量の上限は1日5GB。独自ドメインと独自SSL（SNI）に対応。商用利用可（アダルトサイト・再販は不可）	ページ上部に広告が自動で表示され、Freeのまま広告をなくすことはできない
シンフリーサーバー	ディスク10GB、広告なし、無料独自SSL。利用期限を3か月ごとに無料で更新する	他社サーバーからの移転以外は申込みを受け付けていない
タダサーバー	5GB、独自ドメイン1個（サブドメインは不可）、広告なし、独自SSL	申込み画面に新規の申込みは終了していると表示

確認日時点で、初めてサイトを作る人が国内の無料サーバーで新しく始められるのは、この中ではXREA Freeです。シンフリーサーバーは、公式の申込みフォームに「現在は他社サーバーからの移転以外の申し込み受付はおこなっておりません。」と表示されており、新規のサイトには使えません。詳しくはシンフリーサーバーの無料条件と申込み制限、XREAの料金・広告・WordPress導入、タダサーバーの新規受付状況で確認できます。

事業用なら有料のレンタルサーバーも比べる

独自ドメインのメールアドレス、サポート、自動バックアップが必要なら、有料のレンタルサーバーが向きます。エックスサーバー、ConoHa WING、ロリポップ！は、Claude CodeやCursorなどのAIコーディングエージェントから契約中のサーバーへサイトを公開するための公式の「スキル」（手順を書いたファイル）を提供しています。いずれもWeb版のAIチャットやスマートフォンからは使えないと案内されており、パソコンでAIエージェントを動かせる人向けです。仕組みはレンタルサーバーとは、料金や更新費の比較は個人向けレンタルサーバーの比較で確認できます。

用途別の選び方（編集部の判断）

07ファイルをアップロードして公開する手順

画面の名前はサービスごとに違いますが、作業の順番は共通です。

1. 01

   公開用のフォルダを整える

   トップページを index.html にし、ほかのファイル名も半角英数字の小文字にそろえます。下書きや個人的なメモは公開用のフォルダに入れません。

2. 02

   公開先にファイルを置く

   GitHub Pagesなら、リポジトリにファイルを置き、設定画面（Settings の Pages）で公開元のブランチとフォルダを選びます。XREA Freeなどのレンタルサーバーでは、公開用のディレクトリへFTPなどでアップロードします。具体的な操作は各サービスの公式マニュアルで確認してください。

3. 03

   仮のURLで全ページを確かめる

   サービスが用意するURLで全ページを開き、画像、CSS、リンク、スマートフォン表示を確認します。

4. 04

   修正は手元で直してから上げ直す

   公開中のファイルを直接書き換えず、手元のファイルをAIで修正し、ブラウザで確認してから上書きします。上書き前のファイルは日付付きのフォルダに残すか、Gitの履歴から戻せるようにします。

08独自ドメインとHTTPSを設定する

独自ドメインは、example.jp のような自分専用のインターネット上の住所です。事業用なら独自ドメインにしておくと、公開先を変えてもURLを維持できます。仕組みはドメインとはで、ドメインと公開先を結び付けるDNS（ドメイン名とサーバーの対応を管理する仕組み）の設定はDNSの仕組みと設定変更の方法で説明しています。

公開先ごとの独自ドメインとHTTPSの設定（2026年10月16日に公式ドキュメントで確認）

公開先	独自ドメインの設定	HTTPS
GitHub Pages	サブドメインはCNAME、ルートドメインはAレコードなどで設定。追加前にドメインの検証を推奨	設定画面で「Enforce HTTPS」を有効にする。証明書の発行に時間がかかることがある
Cloudflare Pages	ダッシュボードの「Custom domains」から追加（CNAMEを手動で作るだけでは522エラー）。ルートドメインはネームサーバーの変更が必要	Workersのカスタムドメインは証明書の自動発行が明記されている。Pagesでの扱いは公式で要確認
Netlify	無料プランでも独自ドメインを追加できる	Let's Encryptの証明書を自動で発行・更新
XREA Freeレビュー	独自ドメインを追加して使える	共用SSLと独自SSL（SNI）に対応

HTTPSは通信を暗号化する仕組みで、SSL/TLSという技術で実現します（基礎はSSL/TLSとは）。HTTPSにした後は、HTMLの中に http:// で始まる画像やCSSの読み込みが残っていないか確認してください。混在コンテンツと呼ばれ、警告や表示崩れの原因になります。直し方はHTTPS移行手順が参考になります。ドメインの費用は種類（.com、.jp、.co.jp など）と登録事業者で違い、毎年の更新費がかかるため、取得前に2年目以降の料金と取得の条件も確認しておきます。

09公開後に設定する：404ページ・サイトマップ・Search Console

404ページを用意する

GitHub PagesとFirebase Hostingは、公開フォルダに 404.html を置くと表示されると公式に案内しています。Googleは404などの4xxを返すURLをインデックスしませんが、エラーの内容なのに正常（200）を返すページは「ソフト404」として扱います。存在しないURLで404が返っているか、ブラウザの開発者ツールで確認しておくと安心です。

サイトマップを作ってSearch Consoleに送る

サイトマップ（sitemap.xml）は、サイト内のURLを検索エンジンに伝えるファイルで、数ページならURLの一覧を渡してAIに書かせることもできます。Google Search Consoleにサイトを登録して送信すると、インデックスの状況やエラーを確認できます。送信は掲載や順位を保証するものではありません。

AI検索での見え方も意識する

ChatGPTなどのAI検索で紹介されることを保証する方法はありませんが、内容の分かりやすさや構造化データ、クローラーの設定で整えられることはあります。考え方はAI検索時代のホームページ対策で整理しています。

10問い合わせフォームは外部サービスで用意する

HTMLだけのサイトには、送信された内容を受け取る仕組みがありません。フォームを置く場合は外部サービスを埋め込みます。

フォームで名前やメールアドレスを受け取るなら、利用目的と管理方法を書いたプライバシーポリシーも用意します。予約、決済、会員機能まで必要になった場合は、静的サイトで無理に作らず、WordPressとAIで作る方法やAIビルダーへの切り替えを検討してください。