ChatGPTでホームページ作成は本当にできる？3つのアプローチとプロンプト10選【2026年最新】
この記事の要点
- ChatGPTを使ったホームページ作成には3つのアプローチがあり、目的によって最適解が大きく異なる
- 「コード生成」だけが選択肢ではなく、構成案・テキスト生成のみでも工数は1/4〜1/8に短縮できる
- 2026年現在のChatGPTは Canvas でHTMLプレビュー や GPT-4oマルチモーダル が標準装備され、コード反復編集が画面内で完結する
- そのまま公開した場合 SEOで不利になりやすい4つの理由 があり、回避には専用プロンプトの併用が必須
- ChatGPTで20〜40時間かけて自作するより、ヒアリング応答だけで進められる AIホームページ作成ツール の方が事業の実務では合うケースが多い（実時間は業種・ヒアリング量により変動）
結論：ChatGPTでHP作成は「3つのアプローチ」のうち最適解を選ぶことから始まる
ChatGPTでホームページを作るときに最も多い失敗は、「ChatGPTでHTMLとCSSを生成して公開する」という1パターンしか想定しないまま始めてしまうことです。実際には、ChatGPTをホームページ作成にどう関わらせるかで以下の3つのアプローチに分かれ、適性・工数・必要スキルが大きく異なります。
アプローチA：フルコード生成（学習・ポートフォリオ向け）
ChatGPTにHTML・CSS・JavaScriptをすべて書いてもらい、生成されたコードを自分でホスティング先（GitHub Pages や レンタルサーバー）にアップロードして公開する方法です。プログラミング学習や、特殊な動きのある個人ポートフォリオを作りたい場合に向きます。完成までに20〜40時間程度を見込む必要があり、HTML/CSSの最低限の読解力と、FTPまたはGit操作の経験が前提になります。
アプローチB：制作支援（中小企業の実務最適解）
ChatGPTには構成案・本文・キャッチコピー・FAQだけを書かせ、サイトそのものは ノーコードのホームページ作成ツール で構築する方法です。コーディングを一切せずに済むため、5〜10時間で開業や告知に十分使えるサイトが完成します。「中小企業の社長が片手間で進める」という条件下では、現実的にこのアプローチが最も時間対効果が高いケースが多いです。
アプローチC：AIホームページ作成ツール（最短・最少工数）
ChatGPT相当の生成AIを内蔵した AIホームページ作成ツール に対し、業種・目的・トーンなどのヒアリングに回答するだけでサイト全体が自動生成される方法です。プロンプト設計もコーディングも不要で、必要なのはヒアリングへの回答のみ。シンプルなサイトであれば1〜3時間程度から始められますが、実際の時間はサイト規模・業種・ヒアリング項目数により変動します。本記事のシタミも、このカテゴリーに属します。
3アプローチROI比較表
| アプローチ | 内容 | 完成までの工数 | 必要スキル | 月額ランニング | 適性 |
|---|---|---|---|---|---|
| A: フルコード生成 | ChatGPTでHTML/CSS/JSを書かせ自分で公開 | 20〜40時間 | HTML/CSS基礎、FTP/Git | 0〜1,500円 | 学習目的・ポートフォリオ |
| B: 制作支援 | ChatGPTで構成・コピーだけ生成しノーコードで構築 | 5〜10時間 | ツール操作のみ | 1,000〜3,000円 | 中小企業の実務 |
| C: AIホームページ作成ツール | ヒアリング回答だけでAIがサイト全体を生成 | 1〜5時間 | ヒアリング応答のみ | 1,000〜3,000円 | 急ぎ・予算最少 |
「ChatGPT ホームページ作成」と検索する人の多くは無意識にアプローチAを想定していますが、実際の目的が「事業のためのサイトを早く欲しい」のであれば、アプローチBやCの方が成果に直結します。本記事は3つのアプローチすべてを解説しますが、まずは自分の目的がどれに該当するかを意識して読み進めてください。
ChatGPTでHP作成ができる範囲と限界（2026年最新）
ChatGPTとは、OpenAIが提供する対話型生成AIで、自然言語の指示から文章・コード・構造化データ・画像（GPT-4o）などを出力できます。ホームページ作成の文脈では「コードを書くアシスタント」と捉えがちですが、実際にはコード以外の領域でも大きな力を発揮します。一方で、ChatGPT単体では完結しない作業も明確に存在します。
ChatGPTで「できる」こと7項目
- ホームページ全体の構成案を提案する：業種・目的を伝えると、必要なページ一覧・各ページの見出し・コンテンツ要素までを構造的に提示できます
- キャッチコピー・本文の生成：トーン・読み手のペルソナを指定すれば、ブログ的な本文も営業色のあるLPコピーも書き分けられます
- HTML/CSS/JavaScriptコードの生成：単一ページのコード、共通コンポーネント、簡単なフォームバリデーションまで生成可能です
- WordPressのテンプレート断片の生成：
functions.phpや個別のテンプレートファイルなど、既存テーマに組み込むコード片を作るのは得意領域です - FAQ・メタディスクリプション・構造化データ（JSON-LD）の生成：SEO関連のメタ情報を一括で出力できます
- 競合サイトの内容分析：ChatGPTのWeb検索機能（ブラウジング）を有効にした上でURLを与えると、競合の見出し構成や訴求ポイントを要約してくれます
- 画像のアイデアスケッチ生成：DALL·E統合により、ヘッダー用イメージや業種紹介の挿絵を簡易的に作成できます
ChatGPTで「できない」こと7項目
- 本番品質のデザイン：ChatGPTが直接出力するCSSは「整っているが平凡」になりがちで、視覚的なブランド差別化は別途デザイナーや専用ツールが必要です
- 大規模サイトの全体設計：数十ページのサイトを矛盾なく一気に作るには、コンテキスト長と一貫性の両面で限界があります
- 実機での動作検証：レスポンシブの実機表示確認、表示速度の実測、フォーム送信テストなどブラウザ操作はChatGPT単体ではできません
- 画像・動画の本番品質生成：生成画像の解像度・人物の正確性は、ストック画像や撮影画像に比べると不向きな用途が残ります
- 公開作業そのもの：サーバー契約・ドメイン取得・DNS設定・FTP転送は、ChatGPTが手取り足取りはしますが、最終的な操作は人間が行います
- SEO効果の測定と改善：検索順位の取得、Search Consoleのデータ分析などは外部ツール連携が必要です
- 法務・規約面のチェック：プライバシーポリシーや特商法表記の最終チェックは、専門家確認を前提とすべき領域です
2026年のアップデート：GPT-4o / Canvas / Code Interpreter
2024年後半から2026年にかけてのアップデートで、ChatGPTのホームページ作成での実用性は大きく変わりました。
GPT-4o（オムニ）：テキストに加え、画像・音声・コードを統合的に扱える主力モデルです。デザインスケッチを画像で渡し、それを参考にHTMLの初稿を起こす試みが可能になりました。ただし出力品質は入力画像と指示の具体性に大きく依存するため、最終的には人間の手による調整が前提となります。
Canvas：ChatGPT画面内に右側にエディタペインが立ち上がり、コードや長文ドキュメントを インラインで反復編集 できる機能です。2025年初頭のアップデートで「プレビューする」ボタンが追加され、HTMLやReactのコードを即座にレンダリングして確認できるようになりました。詳細は OpenAI公式のCanvasヘルプ を参照してください。
Code Interpreter（Advanced Data Analysis）：Python実行環境内で画像のリサイズ・WebP変換・CSVから構造化データ生成まで完結します。ホームページ向けの画像最適化が、別ソフトを開かずに完了するようになりました。
これらにより、「コードを書かせる→自分のエディタにコピー→ブラウザで開いて確認→修正点を再質問」という従来のフローが、ChatGPT画面内で完結するようになっています。本記事のアプローチAの手順は、すべてこのCanvasの存在を前提に書いています。
アプローチA：ChatGPTでフルコード生成する完全手順
最も時間がかかるアプローチですが、生成過程を通じてWebの仕組みを体系的に学べる利点があります。ここでは、コーディング初学者でも6ステップでサイトを公開できる手順を、プロンプト付きで解説します。
Step 1: コンセプト設計プロンプト
最初に作るべきは「サイトの目的・読み手・差別化軸」の言語化です。ChatGPTに以下の形式で依頼します。
あなたは中小企業向けのホームページ戦略コンサルタントです。
以下の事業情報をもとに、ホームページのコンセプト設計を行ってください。
【事業情報】
- 業種：[業種]
- ターゲット顧客：[顧客像]
- 提供価値の一言要約：[要約]
- 主要競合3社：[競合名]
【出力フォーマット】
1. サイトのコンセプト（1文）
2. メインターゲットのペルソナ（年齢・職業・課題）
3. 訴求すべき3つの差別化ポイント
4. サイト訪問者に取ってほしい最終アクション
事業情報を埋めて投げるだけで、サイト構成の前提となる「軸」が言語化されます。この出力は次のStep以降のプロンプトに引用していくので、保存しておいてください。
Step 2: サイトマップ生成プロンプト
コンセプトをもとに、サイト全体の構造を設計します。詳しい考え方は サイトマップの作り方 と ホームページの構成設計 も併せて参照してください。
先ほどのコンセプト設計をもとに、ホームページのサイトマップを作成してください。
【条件】
- ページ総数：5〜8ページ
- 各ページの目的を1文で明記
- 各ページのURL構造案を /english-slug 形式で提案
- 階層構造を箇条書きで表現
【出力フォーマット】
- トップページ /
- 目的：...
- サービス紹介 /service
- 目的：...
（以下同様）
サイトマップが固まると、後続のページ別コード生成の指示が一気に楽になります。
Step 3: ページ別コード生成プロンプト
ページごとにHTMLとCSSを生成してもらいます。ポイントは「ペルソナ→トーン→構成→制約条件」の4層構造でプロンプトを組むことです。
あなたは小規模ビジネス向けのWebデザイナーです。
以下の条件で、[ページ名]のHTMLとCSSを生成してください。
【ペルソナ】[Step 1で生成したペルソナ]
【トーン】信頼感重視 / 親しみやすい / プロフェッショナル のいずれか
【構成】
1. ヒーローセクション（キャッチコピー + サブコピー + CTA）
2. 提供価値3つ（アイコン+見出し+説明文）
3. 実績または事例
4. お問い合わせCTA
【制約条件】
- レスポンシブ対応（モバイルファースト）
- CSSはインラインではなく <style> タグまたは別ファイル
- セマンティックなHTMLタグ（header / main / section / footer）を使用
- ボタンとリンクはアクセシビリティを意識（フォーカススタイル付き）
このプロンプト形式を全ページで使い回せば、サイト全体の統一感が保たれます。
Step 4: Canvas で反復編集する手順
生成されたコードに「ヒーロー画像の余白を増やして」「ボタンの角丸を強めて」のような微調整を加える際には、Canvas機能を使うのが2026年版の最適解です。具体的な手順は次の通りです。
- ChatGPT画面でコード出力後に表示される 「Canvasで開く」 ボタンをクリックします
- 右側にエディタペインが立ち上がり、コードがインラインで編集できる状態になります
- エディタ右上の 「プレビューする」 ボタンで、HTMLをそのままレンダリングして確認できます
- 修正したい箇所をテキスト選択し、ChatGPTに指示するとピンポイントで書き換えてくれます
- 完成したら、コードをコピーするか、Canvas右上のメニューから内容を保存します
エディタ→ブラウザ→ChatGPTを行き来していた従来フローと比べ、修正サイクルが大幅に短縮されます。
Step 5: GitHub Pages で公開する具体手順
無料でホームページを公開する最短ルートはGitHub Pagesです。FTPソフトもサーバー契約も不要で、Gitの基本操作だけで公開できます。
- GitHub でアカウントを作成し、ログインします
- 「New repository」で新規リポジトリを作成（リポジトリ名は
username.github.ioの形式が最もシンプル） - 作成したリポジトリに
index.htmlをアップロード（Webブラウザでドラッグ&ドロップ可能） - リポジトリの Settings → Pages を開く
- Source を
mainブランチに設定して Save - 数分後、
https://username.github.io/でサイトが公開されます
GitHub Pagesは無料で使えますが、いくつかの制限があります。GitHub Docsの公式仕様 によると、リポジトリのソースは推奨1GBまで、月の帯域は約100GBまでが目安（ソフトリミット）です。商用利用については「オンラインビジネスやSaaSなどEコマース・決済を主目的としたサイトは想定されていない」と明記されています。会社案内・ポートフォリオ等の静的な紹介サイトであれば許容範囲ですが、決済や有料コンテンツ提供を伴うコアな商業活動を含むサイトは別途、後述のレンタルサーバーやVercel Proの利用を早めに検討すべきです。
Step 6: 独自ドメインを適用する
「username.github.io」ではブランドの信頼性に欠ける場合、独自ドメイン（例：example.com）を適用します。
- お名前.com・ムームードメイン・Xserverドメイン・Cloudflare Registrarなどでドメインを取得（年間1,000〜3,000円程度）
- ドメイン管理画面でDNSのCNAMEレコードを
username.github.io.に向ける（または A レコードで GitHub の IP に向ける） - GitHubリポジトリの Settings → Pages で「Custom domain」に独自ドメインを入力
- 「Enforce HTTPS」にチェックを入れる（証明書は数分〜数時間で自動発行）
ここまでで、独自ドメインで公開されたホームページが完成します。
GitHub Pages 以外の選択肢（Vercel / レンタルサーバー）
GitHub Pagesに収まらない場合の代替を2つ紹介します。
Vercel：静的サイトに加えてサーバーレス関数も使えるため、フォーム送信や認証など動的処理を含むサイトに向きます。GitHubリポジトリと連携してPushで自動デプロイされます。ただし Vercelの無料枠（Hobbyプラン）は個人・非営利目的に限定されており、事業用ホームページとして運用する場合は商用利用が認められたProプラン（月20米ドル〜）が必要です。事業サイトであれば、最初からProプランかレンタルサーバーで構築するのが安全です。
レンタルサーバー（エックスサーバー・さくらインターネット・ロリポップ等）：商用利用が明確に許可されており、PHPやデータベースが必要なサイトでも安心して使えます。月額500〜1,500円程度のコストはかかりますが、メールアドレスの発行や運用サポートが付くため、事業用なら選択肢に入れる価値があります。
アプローチB：ChatGPT × ノーコードツール連携プレイブック
実務的にはこのアプローチBが最も時間対効果が高くなります。ChatGPTには「文章とアイデア」だけを担わせ、視覚化と公開はノーコードツールに任せる分業です。
ChatGPT × シタミ：ヒアリング回答テンプレを5社分一括生成
シタミは事業情報をヒアリング形式で答えるだけでAIがホームページを生成するサービスです。ChatGPTを併用すると、ヒアリング回答の質と速度が一気に上がります。手順は次の通りです。
- ChatGPTに「以下の業種・店舗のホームページを作るとき、シタミ風のヒアリングに回答する形式で、信頼感のあるトーンで5パターンの回答案を出してください」と依頼
- 業種・地域・店名・強み・ターゲットを箇条書きで渡す
- 出力された5パターンから最も自社らしい1案を選んでシタミに貼り付ける
複数店舗を運営する場合、1回の生成で5サイト分の元データを作れるため、店舗展開時の立ち上げ工数を一気に圧縮できます。シタミ自身のAI生成能力と、ChatGPTのコピーライティング能力を組み合わせることで、ヒアリング回答の質が単独利用より明確に上がります。
ChatGPT × STUDIO：構成案＋本文をテキストで先に作る
STUDIOはノーコードでデザインの自由度が高いツールですが、空のキャンバスから始めると本文をその場で考えながら作業することになり、時間がかかります。手順は次の通りです。
- ChatGPTに「STUDIOで作るデザイナー向けポートフォリオのトップページ本文を、見出しと段落で書き出してください」と依頼
- 出力されたテキストをそのままSTUDIOのテキストブロックに貼り付け
- デザインだけを集中して作業する
「文章作業」と「デザイン作業」を分離することで、両方の品質が上がります。
ChatGPT × ペライチ：LP1枚を最速で書き上げる
ペライチは1枚LPに特化したノーコードツールです。テンプレートにはセクションが既に用意されているため、ChatGPTにはセクション別の本文だけを書かせます。「ペライチのLPテンプレートにある『ファーストビュー／お悩み／解決策／お客様の声／料金／FAQ／お問い合わせ』の7セクションに入れる本文を書き分けてください」と指示すれば、テンプレート構成と完全に整合した本文が一気に作れます。Wixやペライチをはじめとした主要ツールの比較は Wix vs ペライチ 比較 も参考になります。
ChatGPT × Wix ADI：英語UIを日本語コピーで埋める
Wix ADIは英語ベースの自動生成ツールのため、生成されたコピーが直訳調になりがちです。ChatGPTに「Wix ADIで生成された以下の英語コピーを、日本の中小企業向けに自然な日本語にローカライズしてください」と依頼すると、ぎこちなさが解消されます。
アプローチC：AIホームページ作成ツールという選択
最後のアプローチは、ChatGPTを直接触らずに、ChatGPT相当のAIを内蔵したホームページ作成ツールを使う方法です。プロンプト設計の経験がない人でも、ヒアリングに答えるだけで成果が出る形になっています。
ChatGPT単体 vs 専用AIツール の決定的な違い
ChatGPT単体（アプローチA）と、AIホームページ作成ツール（アプローチC）の決定的な違いは「ホームページのための専用設計があるかどうか」です。
| 観点 | ChatGPT単体 | AIホームページ作成ツール |
|---|---|---|
| 起点 | 白紙からプロンプトで指示 | ヒアリングへの回答 |
| 出力 | テキスト・コード | 完成形のサイト |
| デザイン制約 | プロンプトに依存し変動 | テンプレートで品質一定 |
| 公開作業 | 自分でホスティング設定 | ボタン1つで公開 |
| 必要スキル | プロンプト設計・コード読解 | ヒアリング応答 |
| 反復改善 | 都度プロンプトで指示 | 編集UIで直接修正 |
ChatGPTは万能ですが、ホームページ作成という1つの目的に特化したツールには、専用UIとテンプレート品質保証で勝てない領域があります。詳しくは AIホームページ作成ツールおすすめ8選 を参照してください。
「シタミ」のようなツールが向いている人・向かない人
向いている人:
- 事業を始めたばかりで、サイト作りに使える時間が少ない
- プログラミングを学ぶこと自体が目的ではない
- 業種に合った構成・コピーを「ゼロから考える時間」を削りたい
- 月額の維持費を可能な限り抑えたい
向かない人:
- ホームページ作成自体を学習目的で行いたい
- デザインを1ピクセル単位で調整したい
- 既存テーマや既存サイトに細かい改修を加えたい
向かない人に該当する場合は、本記事のアプローチAやBの方が満足度が高い傾向にあります。詳しくは AIでホームページを自動生成する方法 で全体像を確認すると判断しやすいです。
プロンプトテンプレート集10選（コピペ可）
ここからは、3つのアプローチすべてで使い回せる実用プロンプトを10個まとめます。[ ] で囲まれた箇所だけを自社情報に書き換えてください。
1. 業種別「最初の1プロンプト」
業種ごとに「最初の1回」だけで、サイトの骨組みが手に入るテンプレートです。
飲食店向け（詳細は 飲食店のホームページ作成）:
あなたは飲食店専門のWebコンサルタントです。
[店名]（業態：[業態]、立地：[エリア]、客単価：[円]）の
集客に効果的なホームページの構成案を、
ファーストビュー・メニュー紹介・店内雰囲気・予約導線・アクセスの
5パートで提案してください。
美容室向け（詳細は 美容室のホームページ作成）:
あなたは美容室専門のWeb集客アドバイザーです。
[店名]（コンセプト：[コンセプト]、客層：[年代・性別]、メニュー単価帯：[円]）の
新規顧客獲得を目的としたホームページの構成案を、
スタイル写真・スタッフ紹介・メニュー＋料金・口コミ・予約導線で提案してください。
整体院向け（詳細は 整体院のホームページ制作）:
あなたは整体院・治療院のWebマーケターです。
[院名]（施術内容：[内容]、ターゲット症状：[症状]、料金体系：[料金]）の
信頼性を重視したホームページの構成案を、
代表挨拶・症状別解説・施術の流れ・料金・お客様の声・アクセスで提案してください。
士業向け（詳細は 士業のホームページ制作）:
あなたは士業（[業種]）専門のWebコンサルタントです。
[事務所名]（取扱業務：[業務内容]、ターゲット顧客：[顧客像]）の
相談予約を増やすホームページの構成案を、
強み・対応分野・料金体系・代表プロフィール・解決事例・問い合わせフォームで提案してください。
工務店向け（詳細は 工務店のホームページ制作）:
あなたは工務店・建設業専門のWebマーケターです。
[社名]（事業内容：[内容]、施工エリア：[地域]、得意分野：[分野]）の
新築・リフォーム相談を増やすホームページの構成案を、
施工事例ギャラリー・家づくりの流れ・お客様の声・スタッフ紹介・問い合わせで提案してください。
2. 構成案生成プロンプト
業種を問わず使える汎用テンプレートです。
[業種]のホームページ構成案を作成してください。
ターゲット：[顧客像]、目的：[目的]
含めるページ：[必要ページの一覧]
各ページの目的・主要セクション・想定文字数を表形式で出力してください。
3. キャッチコピー生成プロンプト
あなたはコピーライターです。
[業種]の[サービス名]を訴求するヒーローセクションのキャッチコピーを、
1. 共感型（顧客の悩みに寄り添う）
2. 約束型（具体的な成果を約束）
3. 差別化型（独自性を強調）
の3パターンで、それぞれ20文字以内のメインコピーと60文字以内のサブコピーで提案してください。
4. メタディスクリプション生成プロンプト
以下のページの内容をもとに、Google検索結果に表示される
メタディスクリプションを80〜120文字で3案作成してください。
- 主要KW：[KW]
- ページ内容の要約：[要約]
- 訴求したいCTA：[CTA]
5. FAQ生成プロンプト
[業種]の[サービス]に関するホームページのFAQセクション用に、
顧客が「サービス申込前に必ず気になる」質問を10個と、
誠実な回答案をペアで作成してください。
JSON-LDのFAQPage構造化データ形式でも併記してください。
6. CSSデザイン調整プロンプト
以下のCSSを、より [トーン] な印象に調整してください。
- カラーパレットを [メインカラー] 系に変更
- ボタンの角丸を [強め/弱め] に
- 余白を [広め/詰め気味] に
- フォントは [ゴシック/明朝/丸ゴシック] 系に
[元のCSSを貼り付け]
7. レスポンシブ対応プロンプト
以下のHTML/CSSをモバイルファーストでレスポンシブ対応してください。
ブレークポイントは480px / 768px / 1024px の3段階。
モバイルでは「上から下に1カラム」、
タブレットでは「2カラムグリッド」、
デスクトップでは「3カラム + サイドバー」のレイアウトに最適化してください。
[元のHTML/CSSを貼り付け]
8. SEO最適化プロンプト（メタ・alt・JSON-LDを一発）
ChatGPTで作ったホームページがSEOで負ける4つの原因を一発で解消するためのプロンプトです。詳しくは ホームページSEO対策の初心者ガイド も参照してください。
以下のHTMLに対して、SEO最適化のために
1. <head> 内のmetaタグ（description / og:title / og:description / og:image / twitter:card）を追加
2. すべての <img> タグに、内容を反映した固有のalt属性を追加
3. ページの主題（業種・サービス名）に応じた JSON-LD 構造化データ（LocalBusiness または Organization と FAQPage）を <script type="application/ld+json"> として追加
4. hタグの階層（h1→h2→h3）に飛びや重複がないか検証し、必要なら修正
を一度に行ったHTMLを出力してください。
[元のHTMLを貼り付け]
9. WordPressテーマカスタマイズプロンプト
WordPress既存テーマ「[テーマ名]」をベースに、
以下の機能を追加する子テーマのコードを書いてください。
- 機能：[追加したい機能]
- 必要なファイル：functions.php / style.css / 必要なテンプレートファイル
- WordPress 6.x 互換、PHP 8.x 互換
10. 公開前チェックリスト生成プロンプト
公開作業を進める際の最終チェックを自動生成します。詳細項目の体系的な解説は Webサイト品質チェックリスト も参考になります。
[業種]のホームページを公開する直前に確認すべきチェックリストを、
1. コンテンツ品質（誤字脱字・画像のalt・本文の重複）
2. SEO（メタ情報・構造化データ・サイトマップXML・robots.txt）
3. アクセシビリティ（コントラスト・キーボード操作・フォーカス表示）
4. 表示速度（画像サイズ・遅延読み込み・PageSpeed Insights）
5. 法務（特商法・プライバシーポリシー・利用規約）
の5カテゴリで、合計30項目作成してください。
ChatGPTでHP作成時の実勢コスト（5年TCO比較）
「ChatGPTを使うと無料でホームページが作れる」と語られがちですが、公開・運用・保守を含めた現実コストはアプローチによって大きく異なります。比較対象として制作会社外注の費用も並べます。
初期費用 vs 5年TCO比較表
| 手段 | 初期費用 | 月額 | 完成までの時間 | 5年TCO（概算） | 備考 |
|---|---|---|---|---|---|
| ChatGPT無料版 + GitHub Pages | 0円 | 0円（ドメイン約1,500円/年） | 30〜60時間 | 約7,500円 | EC・SaaSなど商業活動主体の運用には不向き |
| ChatGPT無料版 + レンタルサーバー | 約3,000円（ドメイン） | 1,000〜1,500円 | 30〜60時間 | 6万〜9万円 | 商用利用OK |
| ChatGPT Plus + Vercel Pro + 独自ドメイン | 約1,500円（ドメイン） | 約3,000円（Plus）+ 約3,000円（Pro） | 20〜40時間 | 約36万円 | 事業用Vercel構成・アプローチA推奨 |
| ChatGPT Plus + AIホームページ作成ツール | 数万円〜 | 約3,000円（Plus分）+ ツール月額 | 3〜10時間 | 18万円〜 | アプローチB・C |
| 制作会社外注（中小規模） | 30〜100万円 | 1〜3万円 | 1〜3ヶ月 | 90〜250万円 | 出典：Web幹事 |
※ 5年TCOの計算式：「初期費用 + 月額 × 60ヶ月」で算出した概算です。ChatGPT Plusは月20米ドル（1ドル150円換算・税別の概算）、Vercel Proは月20米ドル（同上）として試算しています。為替・税率・契約内容により実際の金額は変動します。
5年TCOで見ると、ChatGPT中心の構成は制作会社外注の 1/5〜1/15 に収まります。一方、「自分の時間コスト」を時給換算で乗せると、アプローチAの20〜40時間は無視できないコストになる点も認識しておくべきです。維持費の詳しい内訳は ホームページの維持費、外注時の費用感は ホームページ制作費用の相場 で比較してください。
ChatGPT Plus は必要か：無料版でできること・できないこと
OpenAI公式のPricingページ によれば、ChatGPT Plus の月額は20米ドル（執筆時点の為替で日本円換算すると概ね3,000円台前半に相当、別途消費税相当が掛かる場合があります。為替・税率の変動により実額は変動）です。無料版と有料版の差は次の通りです。
無料版でできること:
- OpenAIが無料版に提供する標準モデルでのテキスト生成・基本的なコード生成
- 1日あたり一定回数までの利用
- 基本的なファイルアップロード
Plus（有料版）で追加されること:
- 最新の上位モデル（GPT-4oや推論モデル系列）への優先アクセス
- Canvas / Code Interpreter / DALL·E画像生成 のフル機能
- 利用回数の上限が大きく緩和
- GPTs（カスタムGPT）の作成と利用
無料版に含まれる標準モデルは、OpenAI側のアップデートで順次入れ替わります。利用前に OpenAI公式 で最新の提供内容を確認してください。
判断基準： アプローチBの「テキスト生成だけ」なら無料版で十分に進められます。アプローチAでCanvas を活用したい・画像生成も合わせて行いたい場合は、Plusが実質必須です。
ChatGPTで作ったHPがSEOで負ける4大原因と回避策
ChatGPTで作ったホームページが検索順位を取りにくいのは、「コンテンツ品質」よりも、技術的な詰めの甘さに起因します。代表的な失敗パターンと、それを潰すための単一プロンプトを示します。
失敗パターン1：重複コンテンツ問題
複数ページを同じプロンプト・同じ文体で量産すると、表現や構成が似通い、検索エンジンから「実質的に同じ内容」と判定されるリスクがあります。ページごとにペルソナ・トーン・盛り込む情報を変えるよう、Step 3のプロンプトで個別指定することが対策になります。
失敗パターン2：メタ情報・構造化データの欠如
ChatGPTにHTMLを生成してもらうと、<head> 内のmetaタグや構造化データ（JSON-LD）が抜け落ちることが頻繁にあります。FAQページ・店舗情報ページ・サービスページなどはJSON-LDの有無で検索結果のリッチリザルト表示有無が分かれるため、必ず追加します。
失敗パターン3：hタグの階層エラー
h2の前にh3が登場する、複数のh1がある、見出しの抜けがあるなど、hタグの階層が乱れたHTMLは検索エンジンの解析を妨げます。生成後に必ずh1→h2→h3の順序で並んでいるかを確認してください。
失敗パターン4：alt属性の欠如
画像にalt属性が無い・テンプレ的に「image1」「画像」などで埋められていると、検索エンジンが画像の文脈を理解できず、Google画像検索やリッチリザルトでも不利になります。生成された<img>タグ全てに、画像の意味を反映した固有のalt属性を必ず付与してください。
4つの失敗を同時に解消する単一プロンプト
上記の4つの失敗を、1つのプロンプトで一気に直すテンプレートです。前述のテンプレート8（SEO最適化プロンプト）を本セクションの「4大原因対応」に特化した形に強化し、差分サマリーの出力指示を加えてあります。
以下のHTMLに対して、SEO最適化を一括で行ってください。
1. <head> 内のmeta description / og:title / og:description / og:image / twitter:card の追加
2. すべての <img> タグに、内容を反映した固有のalt属性を追加
3. ページの主題に合った JSON-LD（LocalBusiness または Organization + FAQPage）を追加
4. hタグ階層（h1→h2→h3）の抜け・重複を検証し修正
変更箇所はコメントで明示し、最後に「変更前後の差分サマリー」をつけてください。
[元のHTMLを貼り付け]
このプロンプトは、ChatGPTで作ったホームページのSEO技術的負債を、一度の指示で解消するために設計しています。
ChatGPT × WordPress連携で「できること・できないこと」
「ChatGPTでWordPressサイトを作れる」と聞いて期待しすぎると失望します。実態は「特定のコード片の生成支援」レベルに留まります。
テーマ全体は無理、特定ファイルなら可能
WordPressのテーマは、functions.php・header.php・footer.php・single.php・page.php・archive.php・style.css など多数のファイルが連動して動きます。これらをChatGPTに「テーマ一式」として一度に書かせると、ファイル間の参照関係・WordPressのフック関数・テンプレート階層のすべてを矛盾なく揃えるのは現実的に困難です。
実用的なのは、既存テーマをベースに「特定のファイル」だけを書かせる 方法です。たとえば「カスタム投稿タイプを追加する functions.php の追記」「お知らせ一覧の archive-news.php」のように、目的を絞ったコード片の生成は得意領域です。
functions.php / single.php を書かせるプロンプト例
WordPress 6.x で動作する子テーマの functions.php に、
以下のカスタム投稿タイプを登録するコードを追加してください。
- 投稿タイプ：works
- ラベル：施工事例
- アーカイブ：有効
- カスタムタクソノミー：works-category
コード冒頭に変更履歴コメントを入れ、
既存の functions.php に追記する形で出力してください。
このような目的を絞ったプロンプトであれば、ChatGPTは安定して使えるコードを出してくれます。
失敗パターン10選と回避策
ChatGPTでホームページを作る人が陥りやすい失敗を、回避策とセットで一覧化しました。
| # | 失敗パターン | 何が起きる | 回避策 |
|---|---|---|---|
| 1 | プロンプトを「短く」入れる | 凡庸な構成・コピーが出る | 4層プロンプト（ペルソナ→トーン→構成→制約）で具体的に指示する |
| 2 | 1度の出力で完成と思い込む | 微調整できず低品質のまま公開 | Canvasで反復編集する前提でフローを設計する |
| 3 | コードをそのまま公開する | metaタグ・alt・JSON-LDが抜けてSEOで不利 | 公開前にSEO最適化プロンプト（テンプレート8）を必ず通す |
| 4 | 生成コード内のAPIキー・認証情報を見落とす | GitHubなどに .env ごと公開して漏洩 | コードを公開リポジトリへ上げる前に .env・APIキー・トークンの混入を必ず目視確認し、gitignore を設定する |
| 5 | フォーム送信・認証など機微処理を無検証で本番投入 | XSS・SQLインジェクションなど脆弱性混入 | 入力サニタイズ、CSRF対策、認可チェックを人間が必ずレビュー。古いライブラリ依存も確認 |
| 6 | DALL-E生成画像をそのまま流用 | 実在人物・商標・既存キャラクター類似で権利侵害リスク | OpenAI規約上、DALL-E画像の商用利用自体は許可されているが、人物・ロゴが必要な場面はストック写真・自社撮影・商用利用許諾済み素材を併用する |
| 7 | レスポンシブ確認を怠る | スマホで崩れて気付かれない | 公開前に実機3サイズで必ず確認 |
| 8 | ChatGPTに法務文書を任せきり | 特商法・プライバシーポリシー（個人情報保護法のCookie同意・越境移転対応含む）に不備 | テンプレ生成までは可、最終確認は弁護士監修済みテンプレか専門家チェック |
| 9 | GitHub Pages・Vercel Hobbyで本格商用運用する | 規約で想定されていない用途のためサービス停止リスク | EC・SaaSなど商業活動主体ならレンタルサーバーかVercel Proへ早めに移行 |
| 10 | 全ページ似た文体で大量生成 / 更新計画を立てない | 重複コンテンツ判定リスク・公開後の鮮度低下 | ページごとにペルソナとトーンを切り替え、月1更新の枠を確保。公開前は Webサイト品質チェックリスト で他者視点を担保 |
ChatGPT vs AIホームページ作成ツール vs 制作会社外注 — 最終判断フローチャート
最後に、3つの選択肢のどれを選ぶべきかを判断するためのフローを示します。
Q1：プログラミングを学ぶこと自体が目的ですか？
- はい → アプローチAでChatGPTフルコード生成へ。学習過程を楽しめます
- いいえ → Q2へ
Q2：完成までに使える時間はどのくらいですか？
- 20時間以上確保できる → アプローチB（ノーコードツール + ChatGPTで構成・本文）が有力
- 5時間以内に終わらせたい → アプローチC（AIホームページ作成ツール）が最適
Q3：デザインの自由度・独自性をどこまで求めますか？
- 完全オリジナルでブランド差別化したい → 制作会社外注の検討（費用相場 参照）
- テンプレートベースで十分 → アプローチB・Cで進める
- ピクセル単位で調整したい → アプローチAまたはアプローチB（STUDIOやWebflowで自分で詰める）
Q4：5年スパンで運用コストをどう考えますか？
- できる限り抑えたい → アプローチB・C（5年TCO 18〜25万円台）
- 中規模以上の運用を見越す → 制作会社外注（5年TCO 90〜250万円）
このフローを通せば、自分にとって最適な選択肢が見えてきます。多くの中小企業はQ1で「いいえ」、Q2で「5時間以内」、Q3で「テンプレートで十分」となり、アプローチCのAIホームページ作成ツールに着地するのが現実的です。
よくある質問（FAQ）
Q1. ChatGPTでホームページは無料で作れますか？
A. ChatGPT無料版とGitHub Pagesの組み合わせで、技術的には費用ゼロで作って公開できます。 ただし GitHub Docsの公式仕様 によりGitHub Pagesは「オンラインビジネス・SaaS等の本格的な商用利用は想定されていない」と明記されています。会社案内やポートフォリオなら許容範囲ですが、EC・決済・有料コンテンツを扱う事業サイトには、レンタルサーバーやVercel Proなど商用利用が認められたサービスを選ぶ必要があります。独自ドメインを取る場合は年1,000〜3,000円も加わります。
Q2. ChatGPTで作ったホームページはそのまま公開できますか？
A. コード自体は生成できますが、そのままでは公開・運用に不十分です。 具体的には、metaタグや構造化データの欠落・hタグの階層エラー・alt属性の欠如・レスポンシブ崩れなどが頻繁に起きます。公開前に本記事のテンプレート8「SEO最適化プロンプト」と、テンプレート10「公開前チェックリスト」を必ず通してください。
Q3. ChatGPTでHP作成に必要なものは何ですか？
A. アプローチによって必要なものは大きく異なります。
- アプローチA（フルコード）：ChatGPTアカウント、HTML/CSSの読解力、GitHubアカウントまたはレンタルサーバー、独自ドメイン（任意）
- アプローチB（制作支援）：ChatGPTアカウント、ノーコードホームページ作成ツール
- アプローチC（専用AIツール）：AIホームページ作成ツールのアカウントのみ
Q4. ChatGPTとAIホームページ作成ツールの違いは？
A. ChatGPTは汎用AIで「白紙からプロンプトで指示」する必要があり、AIホームページ作成ツールは「ヒアリング応答だけ」で完成形のサイトが手に入ります。 ChatGPTは自由度が高い反面、プロンプト設計と公開作業を自分で行う必要があります。一方、専用ツールはテンプレート品質と公開フローが固められている分、デザインの自由度はテンプレート範囲内に収まります。詳しい比較は AIホームページ作成ツールおすすめ8選 で確認できます。
Q5. ChatGPTで作ったホームページはSEOに強いですか？
A. 何もせず公開した場合は、競合サイトに比べて不利になりやすいです。 主な原因は、メタ情報・構造化データの欠落、hタグ階層の乱れ、複数ページを同じプロンプトで生成した際の重複コンテンツリスクです。本記事のテンプレート8（SEO最適化プロンプト）を必ず通し、加えて ホームページSEO対策の初心者ガイド で全体の対策フレームを把握しておくのが安全です。
Q6. ChatGPTでWordPressのテーマは作れますか？
A. 「テーマ一式をゼロから一度に作る」のは現実的に困難ですが、既存テーマに対する追加コード（functions.phpへの追記、カスタム投稿タイプの作成、特定テンプレートファイルの生成）は安定してこなせます。 WordPress運用中の方は、本記事の「ChatGPT × WordPress 連携の現実」セクションのプロンプト例を参照してください。
Q7. ChatGPT無料版と有料版（Plus）どちらが良いですか？
A. テキスト生成だけなら無料版で十分、Canvasや画像生成も使いたいならPlusが実質必須です。 OpenAI公式 によるとChatGPT Plusは月20米ドル（日本では為替により概ね3,000円台前半に相当）です。アプローチBで「構成案と本文だけ」を作るなら無料版で十分に進められます。アプローチAでフルコード生成とCanvas反復編集を活用したい場合はPlusの価値が出ます。
Q8. ChatGPTのCanvas機能でホームページは作れますか？
A. はい、HTML/CSS/JSの生成と即時プレビューがChatGPT画面内で完結します。 OpenAI公式のCanvasヘルプ によると、Canvasは長文ドキュメントとコードを編集するための専用ペインで、HTMLやReactのレンダリングプレビューも可能です。本記事のアプローチAでは、Step 4にこのCanvasを組み込んだ反復編集フローを紹介しています。
まとめ：ChatGPTは「相棒」、最終判断はあなたの目的次第
ChatGPTでホームページを作るという選択肢は、2026年の現在では「コードを書かせる」だけにとどまらず、構成案・本文・SEOメタ情報・WordPressコード片まで広がっています。一方で、ホームページを「事業の道具」として早く・確実に運用したいなら、ChatGPT単体に頼り切るより、AIホームページ作成ツールやノーコードツールと役割を分けた方が現実的です。
最後に、本記事の選び方を一行ずつまとめます。
- 学習・ポートフォリオが目的 → アプローチA：ChatGPT + Canvas + GitHub Pages
- 中小企業の集客サイトを最少工数で → アプローチB：ChatGPTで原稿、ノーコードツール で構築
- 時間がなく今すぐ公開したい → アプローチC：AIホームページ作成ツール でヒアリング応答だけ
- 大規模・ブランド重視 → 制作会社外注（費用相場 を確認の上で判断）
ChatGPTは万能ですが「ホームページのための専用ツール」ではありません。シタミのように 業務向けAIホームページ作成ツール はホームページ作成というゴールに特化して設計されており、ヒアリングに答えるだけで業種別の構成・コピー・公開までが完結します。本記事のフローチャートを使って自分の最適解を見極め、ChatGPTを「相棒」として最大限活用しながら、目的に合った道筋を選んでください。
ChatGPTで原稿、専用AIで構築。シタミならヒアリング3分で完成プレビュー
ChatGPTを補助に使いつつ、HP制作の本流はホームページ専用AIに任せるのが最短ルートです。