まず、どんなサイトを作りたいかを ChatGPT または Codex に伝えます。最初のバージョンができたら、実際に使って確かめながら改善していきます。
Sites の使い始め方
Web 版またはデスクトップアプリで ChatGPT を開きます。プロンプトに「website」という単語を含めるか、@Sites をメンションすると、Sites でのサイト作成が始まります。たとえば、運用チーム向けにプロジェクトの依頼を管理するダッシュボードを作成できます。
ChatGPT Enterprise をご利用の方へ： サイトを作成するには、ワークスペース管理者が、お使いのワークスペースまたはロールで Sites を有効にする必要があります。Sites が表示されない場合は、利用権限について管理者にお問い合わせください。詳しくは Sites 管理ガイドをご覧ください。
ダッシュボードは一例です。以下の手順は、作成したいサイトに合わせて応用できます。
-
サイトの要件の説明
誰がサイトを使い、そこで何をできるようにしたいかを ChatGPT に伝えます。サイトに必要なドキュメントやデータも共有します。依頼管理ダッシュボードなら、依頼のサンプルや担当者、ステータスのラベルなどを提示します。
-
サイトの確認
依頼した操作を試し、表示内容や操作結果を元の資料と照合します。ダッシュボードなら、依頼の登録、ステータスの変更、担当者による絞り込みなどを試します。サイトが情報をどのように利用し、保存するかも確認します。
-
サイトの改善
変更したい点を ChatGPT に伝えます。説明に役立つ場合は、スクリーンショットや参考サイトも共有します。ダッシュボードなら、「担当者とステータスのフィルターを依頼一覧の上に配置してください」のように依頼できます。
-
サイトの管理と共有
Sites に戻ると、サイトを再度開いたり編集したりできます。公開前に、レビューと共有のチェック項目に沿って確認します。アクセスできるユーザーを選び、公開したリンクを対象ユーザーと同じ権限で開いて確認します。
作成したサイトの探し方とプレビューでの編集
ChatGPT のデスクトップアプリで Sites を開きます。プロンプトまたは互換性のあるローカルプロジェクトからサイトの作成を始められます。作成後は Sites の画面に戻って管理できます。
Web 版で作成済みのサイトを探すには、その他 > Sites の順に選択するか、ChatGPT の Sites を直接開きます。 プレビューで編集を選択します。ウェブサイトの変更内容を入力の欄に、変更したい点を入力します。補足資料があると伝わりやすい場合は、スクリーンショットまたはファイルの追加などを使用します。
Codex CLI や IDE 拡張機能には、Sites 専用の管理画面はありません。サイトの作成、保存、デプロイ、管理には、ChatGPT の Web 版またはデスクトップアプリを使用します。公開前にローカルプロジェクトを編集してテストする際は、CLI や IDE 拡張機能も使用できます。
Sites が発行するデプロイ URL はすべて本番環境を指します。ビルドを公開前に確認したい場合は、デプロイせずにバージョンを保存するよう ChatGPT に依頼してください。
レコードと進捗の保存
サイトのバージョンを保存すると、コンテンツ、デザイン、動作が保持されます。訪問者が登録した依頼、ステータスの更新内容、アップロードしたファイル、個人の進捗を保存するには、別途ストレージが必要です。何を保存するか、誰に閲覧や変更を許可するかを ChatGPT または Codex に伝えます。
共有用または個人用のレコードには、アクセスルールをサーバー側で適用するよう依頼します。再読み込みしても更新内容が保持されることを確かめ、別々のアカウントで各ユーザーのアクセス権を確認します。ボタンを非表示にするだけでは、対象のレコードは保護されません。
提供したファイルについては、サイトでコピーを使うのか、元のファイルから情報を更新するのかを指定します。情報の最終更新日時も確認します。
ストレージとサインインの選択肢については、データと接続をご覧ください。
サイト作成のヒント
- 元の資料の活用 サイトで使用するファイル、リンク、定義、数式を添付します。情報が不足している場合は、推測で補わず、不足箇所を指摘するよう ChatGPT または Codex に依頼します。
- データがない場合やエラー時の表示 検索結果がないとき、フォームに未入力の項目があるとき、接続先のアプリを利用できないときに何を表示するかを伝えます。訪問者が操作をやり直したり、問題を修正したりできるようにします。
- デザインの参考例の共有 スクリーンショットやページへのリンクを添付し、コンパクトなカードや検索欄の位置など、取り入れたい点を示します。ブランドカラー、フォント、文章のガイドラインがあれば、それらも共有します。
- スマートフォンへの対応 幅の狭い画面にカード、表、フォームをどう収めるかを伝えます。横にスクロールしなくても、ナビゲーション、フィルター、フォームの各項目を操作できることを確認します。
- サンプルデータの明示 本番用のコンテンツがまだ用意できていない場合は、サンプルと明記したレコードを用意するよう依頼します。サイトを共有する前に本番用のデータに差し替えます。
- 変更範囲の限定 変更は一度に一つずつ依頼し、維持したい点も伝えます。たとえば、フィルターを移動する際は、保存済みのレコード、アクセスルール、既存の操作を維持するよう指定します。変更するたびに、影響を受ける操作を試します。
Sites のショーケースでは、Sites で作成できるウェブアプリの例を紹介しています。
プロンプトの例
資料を集約するサイトなら、まずは短いプロンプトで依頼できます。
訪問者が行う操作、検索ルール、デザインの希望を加えると、より具体的に依頼できます。
既存のプロジェクトなら、互換性を確認して公開の準備を整えるよう ChatGPT に依頼します。
サイトでレコードやアップロードされたファイルを保持する必要がある場合は、その要件も依頼に含めます。