ChatGPTでホームページの作り方【初心者向け】公開までの手順と限界を正直に解説
「ChatGPTだけでホームページが作れるらしい」。そんな動画やSNSを見て、期待半分・不安半分でこのページに来た方、多いと思います。無料で、しかも数分で？本当に自分にできる？——大丈夫、順番に見ていきましょう。
先に結論から。ChatGPTは「ホームページの中身づくり（構成・文章・たたき台コード）」がとても得意。でも“ネットに公開できる完成品”までは1人で運んでくれません。公開作業やスマホの微調整は別のスキルなんです。ここを勘違いすると途中で「あれ、動かない…」と固まってしまいます。逆に役割が分かっていれば、これまで数日かかっていた下準備が数時間まで縮みます。この記事では、実際の作り方の手順と、無料で公開する方法、そして正直な限界まで一気にお伝えします。
ChatGPTでホームページ、実際どこまでできるの？
ChatGPTが得意なのは、ざっくり言うと「考える・書く・コードのたたき台を出す」の3つです。
- 構成を考える：どんなページが必要か、何を載せるかを一緒に整理してくれる
- 文章を書く：お店紹介、サービス説明、よくある質問などの下書きを一瞬で
- HTML/CSSのたたき台を出す：指示すれば、見た目の骨組みになるコードを生成
海外のツール会社の解説（Elfsight）では、シンプルなサイトならChatGPTが使えるコードの多くを生成できるが、複雑な機能になると精度が下がると言われています。つまり「シンプルなお店・会社の紹介サイト」ほどAIと相性がいい、ということですね。逆に予約システムや会員登録のような凝った仕組みは、まだ人の手が必要です。
ちなみに「HTML」は文章や見出しの骨組み、「CSS」は色や余白などの見た目の指示書、くらいのイメージでOK。今は意味が分からなくても大丈夫です。
一方で正直にお伝えしたいこと。ChatGPTが出したコードは、そのままでは公開できる品質にならないのが実情です。手直しが前提。ここは動画では省かれがちな“落とし穴”なので、後半でちゃんと触れます。
初心者向け・ChatGPTでホームページを作る5ステップ
いきなり「コード書いて」と頼むのは、実はいちばん失敗しやすいパターン。料理と同じで、メニューを決めてから作り始めると迷いません。おすすめの順番はこちらです。
ステップ1：まず「誰に・何を」を決める
ここを飛ばすと、AIは無難で薄っぺらい文章しか返しません。「誰向けの、何のサイトか」を先に言葉にしましょう。たとえばこんな聞き方です。
「地元のお客さん向けに、予約につなげたい美容室のホームページを作ります。強みは『子連れOK』『駅から徒歩3分』。載せるべき内容を提案して。」
条件を具体的にするほど、返ってくる提案の解像度が上がります。
ステップ2：サイトマップ（ページの地図）を出す
次に「必要なページを一覧にして」とお願いします。よくある小さなお店なら、トップ・サービス（メニュー）・料金・アクセス・お問い合わせ、あたりに落ち着きます。多すぎると更新が大変なので、最初は5ページ前後で十分です。
ステップ3：ページごとに文章を書いてもらう
ページが決まったら、1枚ずつ文章の下書きを。「トップページのキャッチコピーを5案」「よくある質問を5つ、質問と回答つきで」のように小分けに頼むのがコツです。まとめて頼むと、どれも浅くなります。
ステップ4：HTML/CSSのたたき台をもらう
ここでコードの出番。指示文（プロンプト）は、羅列よりも区切って書くと精度が上がります。
#依頼
上の構成でトップページのHTMLとCSSを作って
#条件
・スマホでも崩れないレスポンシブ対応（viewport指定を入れる）
・CSSは styles.css という別ファイルに分ける
・画像にはすべて代替テキスト（altタグ）を入れる
・配色はベージュ系で落ち着いた雰囲気
「レスポンシブ」はスマホでも表示が崩れない仕組みのこと。日本でもお店探しの多くはスマホなので、ここは必ず頼んでおくと安心です。生成された文章の1行目に <!DOCTYPE html> があれば、それがHTMLの本体。index.html（トップページ）と styles.css の2つのファイル名で保存するのが基本形です。
制作の相場やもっと安く済ませる方法が気になってきた方は、ホームページ制作の費用相場もあわせて読むと、AIで作るか依頼するかの判断がしやすくなります。なるべく安く始めたい方は、まず費用感をつかんでおくと安心です。
ステップ5：手直しして公開する（ここが本当の山場）
ここが最大の山場です。動画で「一瞬で完成」と見えるのは、たいていこの地味な工程が編集でカットされているから。具体的には、こんな流れになります。
- ChatGPTのコードを index.html と styles.css という名前でパソコンに保存する（メモ帳でも作れますが、無料の「VS Code」というエディタを使うと色分けされて見やすいです）
- 画像は images というフォルダを作ってまとめ、HTML側は
images/logo.jpgのように書く - index.html をダブルクリックすると、ブラウザでローカルプレビュー（自分のパソコン内で見た目確認）ができる
- ネットに公開するには、無料の置き場所を使う。代表格が GitHub Pages や Netlify。Netlifyなら、ファイルの入ったフォルダを画面にドラッグ＆ドロップするだけで公開URLが発行されます
- 独自ドメイン（自分だけの住所）を使いたい場合は、ドメインを取得して Aレコード か CNAME という設定を、公開サービスの指示どおりに入力する
「コードを触るのはやっぱり不安…」という方は、無理せず別ルートもあります。Wixやペライチのようなコード不要ツールの無料枠で土台を公開しておき、そこにChatGPTで作った文章だけを流し込む“二刀流”です。これなら公開でつまずかず、文章づくりのラクさだけAIに任せられます。
正直な話：ChatGPTだけで“公開”までは険しい
ここは編集部としていちばん正直にお伝えしたいところ。ChatGPTでコードは出せても、次のような壁が残ります。
- 公開作業：ファイル管理、置き場所の設定、ドメイン設定。ここで手が止まる人がとても多いです
- スマホの微調整：「PCではきれいなのにスマホで文字がはみ出す」は定番のつまずき
- セキュリティ：AIは、パスワードをそのまま丸見えで保存するような“危ないコード”を出すことがあります。問い合わせフォームなど個人情報を扱う部分は、自前でコードを書かず外部サービスに任せるのが安全です
- 読み込み速度：表示が遅いと訪問者は離れます。海外のページ速度の研究でも、読み込みがコンマ数秒改善するだけで問い合わせ率が上がった例が報告されています。逆に遅いと、せっかくの訪問者が離れてしまうんですね
スマホ崩れの“あるある”と直し方
スマホで崩れたら、ChatGPTに「この部分がスマホで崩れる、直して」と貼って聞くのが早いですが、よくある原因はこの3つです。
- 画像がはみ出す → CSSで
img { max-width: 100%; }を入れると画面幅に収まる - そもそもスマホ表示になっていない → HTMLの <head> 内に
<meta name="viewport" content="width=device-width, initial-scale=1">があるか確認 - 長いURLや英単語で横スクロールが出る → その要素のCSSに
word-break: break-all;を足す
公開前チェックリスト（コピーして使ってOK）
公開ボタンを押す前に、ここだけは見ておくと安心です。難しく考えず、上から順に潰していきましょう。
- スマホ実機で開いて、はみ出し・文字の重なりがないか確認した
- Googleの無料ツール「PageSpeed Insights」で表示速度を測った（遅ければ画像を軽くする）
- 写真は大きすぎないサイズにし、可能ならWebP形式など軽い形式にした
- 各ページに title（タブに出る名前）と description（検索結果の説明文）を入れた
- SNSでシェアされたときの画像・説明（OGP設定）とファビコン（タブの小さいアイコン）を入れた
- 問い合わせフォームは自作せず、GoogleフォームやFormspreeなど外部サービスを使い、実際に自分宛にテスト送信して届くか確認した
- URLが https://（鍵マーク）で始まっているか確認した
「チェックはできても直し方が分からない」——それが普通です。自分で作りかけて止まっている方は、つまずいた箇所だけプロに相談することもできます。無料で相談できますので、気軽に状況を教えてください。
ChatGPTの料金はどれくらい？無料でどこまで？
「有料じゃないと作れないの？」という疑問もよく聞きます。結論、構成づくりや文章の下書きなら無料プランでも十分試せます。無料プランは1日あたりの利用回数や、高性能モデル・画像生成に上限があるので、使い込んで制限にあたったら有料を検討すればOKです。
| プラン | 料金の目安 | 向いている人 |
|---|---|---|
| 無料（Free） | 0円（回数・機能に上限あり） | まず試したい・下書き中心 |
| Plus | 月20ドル（およそ3,000円前後） | 本格的に使い込み、上限を気にせず進めたい |
料金はドル建てなので、為替で日本円の支払額は上下します。上の金額は目安として見てくださいね。まずは無料で始めて、足りなくなってから上げるのがムダのないやり方です。
よくある質問
次の一歩
ChatGPTは、これまで「何を書けばいいか分からない」で止まっていた人の背中を、しっかり押してくれる相棒です。まずは無料プランで、あなたのお店やサービスの構成と文章の下書きから始めてみてください。そこまで進めば、ホームページ完成の半分は見えてきます。
残りの半分——公開・スマホ最適化・仕上げでつまずきそうなら、そこだけ手を借りるのも賢い選び方。自分で作る時間がない方も、AIで作りかけて止まっている方も、あなたに合ったやり方できっと形にできます。焦らず、一歩ずついきましょう。
AIでホームページ、次の一歩はどちらですか？