ChatGPTでウェブサイトを作る方法：効果のある3つのやり方

ChatGPTでウェブサイトを作るには、次の3つの方法があります。HTMLとCSSを書いてもらい、自分でホスティングサービスに置く方法。ウェブサイトビルダーで作る前に、ページの構成と文章を考えてもらう方法。そして、MythexのようなAIビルダーをChatGPTに接続し、同じチャットからサイトの構築・ホスティング・公開までを任せる方法です。1つ目は無料で、1ページのサイトなら十分です。3つ目は、データを保存するフォーム、ログイン、定期的な更新が必要になったときに向いています。このガイドでは、それぞれの方法をプロンプト付きで紹介し、どこで限界が来るかも明記します。

ChatGPT単体でできることとできないこと

ChatGPTは、コード、見出し、ページの文章、計画の作成がとても得意です。ただし、そのままでは、ホスティング会社ではありません。サイトに公開用のアドレスを割り当てることはなく、データベースを動かすこともなく、ビルダーのようにプロジェクト間でサイトのファイルを保持することもありません。以下の各方法は、このギャップをどう埋めるかの違いです。

方法1：ChatGPTがコードを書き、自分でホスティングする

これは昔ながらの方法で、ポートフォリオ、ランディングページ、結婚式の案内ページなど、シンプルな静的サイトに向いています。

ステップ1：完結した1ファイルのページを依頼する

内容とレイアウトを具体的に伝えます。

アマンで活動するフリーランスのイラストレーター、マヤ・ハッダード向けに、CSSをstyleタグ内に含めた1ファイルのHTMLで完結したシングルページのウェブサイトを書いてください。セクションは、名前と「書籍とブランドのためのイラスト」というキャッチコピーを含むヘッダー、6枚のポートフォリオ画像のグリッド（差し替え可能なプレースホルダーの画像パスを使用）、短い自己紹介の段落、開始価格付きのサービスリスト3つ、メールアドレスをmailtoリンクにした問い合わせセクションです。すっきりとしたモダンなデザインで余白を十分に取り、スマートフォンでも見やすくしてください。JavaScriptフレームワークは使わないでください。

1ファイルにしておくと、保存とアップロードが簡単です。

ステップ2：保存して開く

コードをテキストエディタにコピーし、index.htmlという名前で保存して、ブラウザで開きます。表示がおかしければ、ChatGPTに説明します。例：「デスクトップで画像グリッドが1列になっています。幅900px以上では3列にしてください。」

ステップ3：プレースホルダーを置き換える

プレースホルダーの画像は自分のものに差し替え、ChatGPTが作った文章は自分の内容に置き換えます。価格、メールアドレス、名前は特に注意して確認してください。AIは空白を自信満々に埋めてしまいます。

ステップ4：公開する

GitHub Pagesのような無料の静的ホスティング、または既に契約しているウェブホストにファイルをアップロードします。公開用のアドレスが発行されます。独自ドメインを使う場合は、ホスティングサービスの手順に従ってください。DNSの設定については、独自ドメインの接続に関するガイドで説明しています。

方法1の限界

• データを保存するフォーム。 問い合わせフォームには、送信内容を受け取る場所が必要です。フォームサービスかサーバーが必要になります。
• ログインと会員エリア。 バックエンドとデータベースが必要です。
• ページ数が多い場合。 10枚の手作業で貼り付けたファイルで、ヘッダーやメニューを統一し続けるのは面倒です。
• 更新。 変更するたびに、新しいコードを頼み、貼り付けて、再アップロードする必要があります。

方法2：ChatGPTが計画し、ビルダーが作る

この方法では、考えることと文章を書くことはChatGPTが担当し、構築とホスティングはウェブサイトビルダーが担当します。

ステップ1：ChatGPTとサイトの計画を立てる

マンチェスターで家族経営のパン屋をしていて、ケーキの注文を受けています。ウェブサイトに必要なページ、各ページで伝えるべき内容、各ページで訪問者にしてほしい行動を1つずつ提案してください。ページは5枚以下にしてください。

ステップ2：文章を書く

各ページの文章を依頼し、自分の言葉で書き直します。ChatGPTには分からない実際の情報を加えてください。営業時間、価格、配達エリア、自分のケーキの特徴などです。

ステップ3：ビルダーで作る

計画と文章をウェブサイトビルダーに貼り付けます。ドラッグ＆ドロップ式のツールなら、テンプレートに文章を配置していきます。AIビルダーなら、計画全体を1つのメッセージで渡せば、ページを構築してくれます。例えば、Mythexのウェブサイトビルダーでは次のように依頼します。

この計画と文章を使って、マンチェスターの家族経営のパン屋のウェブサイトを作ってください：[ここに貼り付け]。注文リクエストフォームを追加し、名前、電話番号、ケーキの種類、必要な日付、メッセージを保存して、自分だけがログインできる管理ページで確認できるようにしてください。温かみのある家庭的なデザインで、スマートフォンにも対応させてください。

ここでの注文フォームは実際のデータベースに保存されます。貼り付けたHTMLファイルではこれはできません。この方法の詳細については、AIでウェブサイトを作る方法をご覧ください。

方法3：ChatGPT内から構築して公開する

最新の方法は、ChatGPTにビルダーを接続し、ChatGPTがビルダーのツールを直接使えるようにすることです。ChatGPTの会話から離れずに、プロジェクト、プレビュー、データベース、ホスティングをビルダーが提供します。

MythexはMythexのChatGPTアプリ（MCPコネクタ）を通じてこの方法に対応しています。Mythexのアカウント設定から接続でき、接続はどのプランでも可能ですが、プロジェクトのサンドボックスを動かすツールはProプランが必要です。接続後は、ChatGPTに次のように頼めます。

Mythexを使って、パン屋の新しいウェブサイトを作ってください。ホームページ、ケーキと価格を載せたメニューページ、データベースに保存される注文リクエストフォームを含めてください。プレビューを見せて、良さそうだと言ったら公開してください。

その後、ChatGPTがプロジェクトを作成し、コードを書き、動作を確認し、承認すると公開URLで公開します。変更も、同じチャットに追加のメッセージを送るだけです。同じコネクタの仕組みは、Claude、Cursor、Codexからも使えます。この仕組みの背景や対応しているビルダーについては、MCPに対応したAIアプリビルダーをご覧ください。

どの方法を選ぶべきか

どの方法にも使えるプロンプトのコツ

• 最初に実際の情報を伝える。 名前、所在地、サービス、価格、連絡先などです。作り話の情報が少ないほど、後の修正が少なくなります。
• 訪問者とゴールを説明する。 「誕生日のケーキを探している親が、最終的に注文リクエストを送ってくれること」といった形です。
• スマートフォン優先のレイアウトを頼む。 多くの訪問者はスマートフォンから見ます。
• 最初のバージョンができたら、1メッセージにつき変更は1つだけにする。
• SEOの基本を明示的に頼む。 ページごとに固有のタイトルと説明文、本物の見出し、画像の代替テキストです。AIで作ったウェブサイトのSEOをご覧ください。

AIアプリビルダー向けのプロンプトの書き方のガイドには、さらに多くのパターンがあります。

よくある問題と対処法

• デザインが一般的すぎる。 参考になるイメージを伝えます。例：「落ち着いたスカンジナビアンカフェのような雰囲気で、白を基調に、差し色は抑えめの緑」。
• コードが途中で切れた。 最後の行から続けるように頼むか、ページをセクションに分けて1つずつ出してもらいます。
• ChatGPTが感想や統計を作り上げた。 削除してください。偽のレビューは信頼を損ない、多くの地域では消費者保護の規則に違反します。
• 変更後にサイトが壊れた。 新しいコードを貼り付ける前に、最後に動いていたバージョンを保存しておきましょう。Mythexのようなビルダーにはチェックポイントがあり、元に戻せます。

公開前の確認

すべてのページの文章を読み直してください。連絡先が正しく機能するか確認します。スマートフォンでサイトを開いてみます。画像は自分のものか、正式に利用許可を得たものかを確認します。そのうえで公開し、訪問者がいる場所でサイトを紹介しましょう。費用をかけずに済ませたい場合は、無料でウェブサイトを作る方法で、無料のホスティングの選択肢を詳しく解説しています。

よくある質問