ChatGPT Sitesでは、文章で説明するだけで、HTML、CSS、JavaScriptを書かずにWebサイトを作成し、公開ページまで仕上げられます。ただし、完成しているように見えるページを生成することと、実際に機能するサイトを公開することは別です。デザインを確認し、問い合わせフォームにはメッセージを保存するよう明示的に指示し、完成したサイトには適切な共有設定を行う必要があります。
ページ構成とブランド素材から始める
ChatGPTでサイドバーの「More」メニューを開き、「Sites」を選んで「Create Site」を選択します。プロンプト欄に@Sitesが入力された状態でWorkモードが開きます。このコマンドは、ChatGPTにWebサイト作成機能を使うよう指示するものです。@を入力してから「Sites」を選ぶこともできます。今回の作成例では、使用中のモデルはGPT-5.6 Sol Lightでした。
最初のプロンプトには、サイトの種類、主なセクション、希望する見た目を盛り込むとよいでしょう。ベーカリーの作成例では、ホームページ、クッキーのメニュー、店舗紹介、問い合わせ手段、温かみのあるデザインを指定しました。生成前にPNG形式のロゴも添付しました。ChatGPT Sitesはそのロゴを参考に、金色、クリーム色、茶色の配色を採用しました。
最初の指示で視覚的な細部をすべて指定する必要はありません。このサイトの初期版は生成に約3分57秒かかり、その後、内容を確認して追加のプロンプトで修正できました。これは今回の作成例にかかった時間であり、ほかのサイトでも同じ時間で完成するという意味ではありません。
修正を依頼する前に初稿を確認する
生成されたページは、チャットの横にプレビュー表示されました。境界線をドラッグすると、会話かサイトのどちらかの表示領域を広げられます。全画面表示では、レイアウトをより確認しやすくなりました。初稿には、ヘッダー内のロゴとナビゲーション、目立つ冒頭セクション、3枚のクッキー商品カード、店舗紹介、問い合わせフォームが含まれていました。表示されていたクッキーの価格はいずれも$4でした。
▲ チャットとサイトのプレビュー
この段階では、依頼したセクションがすべてあるかだけでなく、ページが実際に何を伝えているかを見ます。冒頭セクションのバランス、セクション間の余白、ナビゲーションの項目名、画像が店の商品を伝えるのに役立っているかを確認しましょう。全画面で確認すると、ベーカリーのロゴがヘッダー以外にも表示され、使われすぎていることが分かりました。また、問い合わせフォームは表示されていたものの、送信内容の保存にはまだ対応していませんでした。
追加のプロンプトでデザインを絞って修正する
次の依頼では、ロゴを上部のナビゲーションに残し、それ以外の重複したロゴを削除するよう指示しました。さらに、商品に合った焼きたてのクッキーの写実的な写真を求めました。ChatGPT Sitesは冒頭セクションのロゴバッジをクッキーの写真に差し替え、商品カードにはそれぞれ異なる画像を追加し、店舗のストーリーを伝えるセクションにも製菓の写真を配置しました。画像は手作業で探し、サイズを調整して配置するのではなく、依頼に基づいて選ばれ、配置されました。
商品を前面に出すページでは、ブランドロゴを繰り返し表示するより、こうした変更を加えたほうが、何を提供している店なのかが伝わりやすくなるでしょう。実践上のポイントは、具体的なフィードバックを伝えることです。残すもの、削除するもの、代わりに入れるものを指定します。そのうえで、修正によってレイアウト上の問題がすべて解決したと思い込まず、新しい版を確認します。
問い合わせフォームを機能させ、動作を確かめる
フォームが見えていても、メッセージを受け取れるとは限りません。今回の作成例では、問い合わせフォームを機能させ、送信内容を後から確認できるよう保存することを、別のプロンプトでChatGPT Sitesに依頼しました。更新には約37秒かかり、入力内容の検証、エラー処理、送信成功の通知、永続的な保存機能が追加されました。永続的な保存とは、送信された情報をサイトの所有者が後から閲覧できる状態に保つことです。
続いて、Webサイトのプレビューを別のブラウザーウィンドウで開き、フォームを確認しました。試しに問い合わせを送ると、送信成功の確認メッセージが表示されました。管理画面に戻って「View saved submissions」を開くと、送信内容、その日時、送信者の詳細、メッセージを含む一覧が表示されました。ページに送信ボタンがあることを確かめるだけでなく、ここまで一通り確認することが重要です。メッセージが、所有者の想定する場所に届くことを確認できるためです。
アクセス設定とアドレスを決める
デザインとフォームの準備ができたら、チャット画面の「Share」、またはSitesダッシュボードにあるサイトのメニューから共有設定を開けます。共有設定は初期状態で「Only those invited」です。公開リンクからほかの人がサイトを開けるようにするには、「Anyone with the link」に変更します。通常のブラウザータブでそのリンクを開き、編集画面の外から公開ページを確認します。
サイトの設定では、名前とURLのパスも指定できます。割り当てられるアドレスの末尾は.chatgpt.siteで、サブドメインは変更できます。また、「Add Custom Domain」を使えば、所有者が登録済みの独自ドメインを接続できます。サービス側からは、ドメインをサイトに向けるための設定であるDNSレコードと、接続手順が提示されます。ドメイン登録事業者側で必要な変更は異なる場合があるため、この部分は所有者が利用中の事業者向けの手順に従う必要があります。
公開後にアクセス状況を確認する
Sitesダッシュボードでは、サイトのメニューから「Analytics」を開けます。ユニーク訪問者数、総ページビュー数、アクセスの推移、閲覧数の多いページが表示され、7日間や30日間などの期間を選べます。作成例のダッシュボードには、ユニーク訪問者1人、ページビュー51回と表示されていました。これはそのサイトの数値であり、新しいサイトのアクセス数を予測するものではありません。アクセス解析機能は基本的なものとみられますが、外部の計測スクリプトを設定せずに利用状況を手早く確認できます。
▲ 問い合わせ内容とアクセス指標
次にすること
個人のプロジェクトや小規模事業のページなら、簡潔な説明と、手元にあればロゴを用意するところから始めましょう。生成されたサイトは初稿として扱い、内容を確認して具体的な修正を依頼します。フォームを使う場合は保存機能を明示的に有効にして動作を試し、それから公開リンクや接続したドメインを通じてアクセスできるようにします。公開後は、組み込みのアクセス解析で人がサイトを訪れているか確認します。