ChatGPT Sitesを使ってWebサイトを制作～公開する
はじめに
ChatGPTに新しく「Sites」というWebサイト制作機能が追加されたので、実際に試してみました。
Sitesは、作りたいWebサイトの内容を自然言語で伝えることで、サイトの制作から公開まで進められる機能です。
今回、Sitesを使って個人サイトを制作し、Cloudflareで取得した独自ドメインを接続しました。
実際に作成したサイトはこちらです。
ツール置き場として、以下のページも作成しています。
この記事では、ChatGPT Sitesを使ってみて感じたメリットと、現時点での注意点をまとめます。
※本記事は2026年8月時点の利用体験をもとにしています。Sitesはパブリックベータのため、今後仕様が変わる可能性があります。
ChatGPT Sitesとは
ChatGPT Sitesは、プロンプトからWebサイトやWebアプリを制作し、そのまま公開できる機能です。
公式ドキュメントでは、Sitesについて次のように説明されています。
- Webサイト、Webアプリ、ゲームなどを制作できる
- ChatGPT上でサイトを修正・管理できる
- 制作したサイトをホスティングして公開できる
- 独自ドメインを接続できる
- D1やR2を利用したデータ保存にも対応している
公式ドキュメント：
従来、Webサイトを公開するには、コードの作成だけでなく、サーバーやホスティング環境の用意、デプロイなどが必要でした。
Sitesでは、これらの工程をかなりまとめてChatGPTに任せられます。
自然言語で指示するだけでサイトの骨子を作れる
Sitesの便利なところは、作りたいものを自然言語で説明すれば、ある程度の骨子を作ってくれることです。
例えば、次のような形で指示できます。
SEO担当者向けの無料ツールを掲載するWebサイトを作成してください。
トップページにはツールの一覧を掲載し、それぞれのツールの詳細ページへ移動できるようにしてください。
デザインは白を基調として、シンプルで信頼感のある雰囲気にしてください。
このように指示すると、トップページの構成、ナビゲーション、ツール一覧、各ページのレイアウトなどをまとめて作ってくれます。
最初から細かい仕様をすべて決める必要はありません。
まず大まかなサイトを作ってもらい、完成したものを見ながら、次のように追加で指示していきます。
ツール一覧をカード形式にしてください。
スマートフォンでは1列で表示してください。
このツールを一覧ページの一番下へ移動してください。
見出しの文言を○○へ変更してください。
ChatGPTと会話しながらサイトを作っていく感覚です。
コードをほとんど書かなくても形になるため、Webサイト制作のハードルはかなり低くなったと感じました。
簡単なWebツールも作れる
Sitesでは、情報を掲載するだけのWebサイトに加えて、簡単なWebツールも作れます。
私のサイトでは、SEOやLLMOに関連するツールを少しずつ追加しています。
例えば、以下のようなツールです。
- 無料SEO診断ツール
- 無料LLMO診断ツール
- AI・検索クローラーのブロック・アクセス制御状況確認ツール
- cats.txtチェッカー
- エンティティ情報の確認ツール
- 画像URL・alt属性の抽出ツール
- XMLサイトマップ関連ツール
外部APIや環境変数が必要な機能についても、Sitesの設定画面からSecretを登録することで実装できます。
もちろん、複雑なサービスをすべてSitesだけで作れるわけではありません。しかし、URLを入力して情報を取得するツールや、入力内容を加工して結果を表示するツールなどであれば、かなり幅広く作れそうです。
「こんなツールが欲しい」と思ったときに、まず試作品を作ってみる場所として便利です。
Cloudflareで取得した独自ドメインを接続
今回は、Cloudflare Registrarで独自ドメインを取得しました。
取得したドメインは以下です。
sotaro-matsushita.com
その後、Sites側で独自ドメインを追加し、表示されたDNSレコードをCloudflare側へ設定しました。
大まかな流れは次のとおりです。
- Cloudflare Registrarでドメインを取得する
- ChatGPTのSites設定画面を開く
- 「Add domain」から使用するドメインを入力する
- Sitesに表示されたDNSレコードをCloudflareへ登録する
- Sites側でドメインの接続状態を確認する
- サイトを公開する
ここで重要なのは、Cloudflareはドメインの取得とDNS管理に使用しているという点です。
サイト自体はChatGPT Sitesによってホスティングされています。
DNSの反映には少し時間がかかる場合がありますが、接続自体はそれほど難しくありませんでした。
「自分のドメインにツールを貯める」運用と相性がよい
以前Xで、次のような趣旨の投稿を見かけました。
自分のドメインを一つ持っておき、作った小さなツールをその配下へ少しずつ追加していくとよい。
実際にSitesを使ってみると、まさにそのような運用ができています。
私の場合は、以下のページをツール置き場にしています。
思いついたツールを一つずつ制作し、同じドメインの配下へ追加しています。
個別のツールを作るたびに、新しいサーバーや新しいドメインを用意する必要はありません。
例えば、次のようなサイクルで運用できます。
- 日々の業務で不便なことを見つける
- ChatGPTにツールの仕様を伝える
- Sitesで試作品を作る
- 実際に操作して修正する
- ツール一覧へ追加する
- 必要に応じて機能を拡張する
小さなツールであっても、同じドメインに積み上げていけば、徐々にまとまったツールサイトになります。
個人の実験場所としても、業務効率化ツールの置き場としても面白い使い方だと思います。
実際に使って感じたメリット
Webサイト制作の初速が速い
作りたいものを文章で説明すれば、まず動くものを作ってくれます。
デザインやページ構成をゼロから考える必要がないため、試作品を作るまでの時間を大幅に短縮できます。
制作から公開までChatGPT上で進められる
コードの作成だけでなく、ビルドやデプロイも含めて進められます。
Webサイト制作に慣れていない人にとって、公開作業はハードルになりやすい部分です。Sitesでは、その工程も会話形式で進められます。
アイデアをすぐ試せる
「このようなツールがあったら便利かもしれない」と思ったとき、その日のうちに形にできることがあります。
本格的に開発する価値があるか分からないアイデアでも、まずSitesで簡易版を作って反応を確認できます。
独自ドメインで資産を積み上げられる
作ったツールを独自ドメインの配下へ集約できます。
単発の試作品として終わらせず、自分のサイトのコンテンツとして蓄積できる点は大きなメリットです。
注意点：細かい調整が難しい
一方で、現時点では不便に感じる部分もあります。
私がWeb版で利用した範囲では、HTMLやCSSなどのソースコードを自分で直接編集するのではなく、基本的にChatGPTへの指示を通じて修正する形でした。
例えば、数値やスタイルを少しだけ変更したい場合でも、次のように文章で伝える必要があります。
ツール一覧のカード間の余白をもう少し狭くしてください。
ところが、「もう少し」という表現がChatGPTの解釈に依存するため、期待した結果になるとは限りません。
修正をお願いした結果、変更してほしくなかった場所まで変わってしまうこともあります。
人間がコードを直接触れる環境であれば数分で終わるような修正でも、指示と確認を何度か繰り返さなければならない場合があります。
大枠を作るのは非常に速い一方で、細部を詰める段階になると、かゆいところに手が届かない印象です。
なお、公式ドキュメントでは、対応するローカルプロジェクトからSitesへ公開する方法も案内されています。コードを細かく管理したい場合は、ChatGPT上だけで完結させず、ローカルプロジェクトと組み合わせる方法も検討したほうがよさそうです。
注意点：プレビューがうまく機能しないことがある
今回、最も不便に感じたのがプレビューです。
個別ページや追加したツールを確認したいと伝えても、プレビュー画面には何度もトップページが表示されました。
「○○のページをプレビューしてください」と指摘しても、期待したページを確認できないことがありました。
結局、私の環境では次のような流れになることが多かったです。
- 修正を依頼する
- プレビューを開く
- 確認したいページではなく、トップページが表示される
- プレビューでの確認を諦める
- 本番へ公開する
- 公開URLから対象ページを確認する
- 問題があれば再度修正する
つまり、本番公開後に細かい表示を確認して調整することになります。
公式ドキュメント上は、「バージョンの保存」と「デプロイ」が分かれており、保存したバージョンを公開前の候補として扱う仕組みが案内されています。
ただし、少なくとも今回の利用では、意図した個別ページをプレビューする部分で不安定さがありました。
本番公開前の厳密な検証が必要なサイトでは、現時点では用途が限られると感じます。
特に、以下のようなサイトを作る場合は注意が必要です。
- 企業の公式サイト
- 多数のページを持つメディア
- 表示崩れが許容されないサイト
- 個人情報を取り扱うサイト
- コンバージョンに直結するページ
- 公開前の承認フローが必要なサイト
逆に、小規模な個人サイトや実験的なツールであれば、多少の試行錯誤を許容しやすいため、Sitesの良さを生かしやすいと思います。
どのような用途に向いているか
実際に使ってみた範囲では、Sitesは次のような用途に向いていると感じました。
- 個人のポートフォリオ
- 小規模な情報サイト
- ランディングページの試作品
- 社内向けの簡易ツール
- 入力内容を加工するツール
- APIを利用した小規模な検索ツール
- SEOやマーケティング業務の補助ツール
- アイデア検証用のWebアプリ
- ゲームや診断コンテンツ
一方で、細かいデザイン調整や厳密な公開前確認が必要なサイトは、現時点では通常の開発環境と組み合わせたほうがよいでしょう。
まとめ
ChatGPT Sitesを使うことで、自然言語による指示からWebサイトを制作し、独自ドメインで公開するところまで進められました。
特に便利だと感じたのは、次の点です。
- 自然言語からサイトの骨子を作れる
- 簡単なWebツールも実装できる
- 制作から公開までChatGPT上で進められる
- Cloudflareなどで管理している独自ドメインを接続できる
- 作ったツールを自分のドメインへ少しずつ蓄積できる
一方で、次のような課題もあります。
- 細かい調整を自然言語で指示する必要がある
- 意図していない部分まで変更されることがある
- プレビューで確認したいページが表示されないことがある
- 本番公開後に表示確認が必要になる場合がある
完成度の高いサイトを一度で作るというよりも、小さなサイトやツールを素早く作り、少しずつ育てていく使い方に向いています。
まだパブリックベータということもあり、不便な部分はあります。しかし、思いついたアイデアをすぐWeb上に公開できる点は非常に面白いです。
今後も、日々のSEO業務やWebマーケティング業務で「あったら便利」と感じたツールを、以下のページへ少しずつ追加していく予定です。