サイトを作成する

まず、ChatGPT または Codex に作りたいものを説明します。その後、最初のバージョンを確認し、少しずつ改善していきます。

sites を使い始める

ウェブまたはデスクトップアプリで ChatGPT を開きます。プロンプトに「website」という単語を含めるか、@Sites を指定して、sites のワークフローを開始します。たとえば、運用チーム向けのプロジェクト依頼ダッシュボードを作成するよう依頼できます。

プロンプト:

Build a project request dashboard website for my operations team. Let team members submit requests, see who owns each one, update the status, and filter the list. Require people to sign in with their workspace account, and keep the request data saved between visits.

ダッシュボードは一例です。以下の流れは、作成したいサイトに合わせて調整できます。

1. サイトの要件を説明する

   サイトの対象者と、利用者に何をしてほしいかを ChatGPT に伝えます。必要なドキュメントやデータを共有します。依頼ダッシュボードの場合は、依頼のサンプル、担当者、ステータスラベルなどを含めるとよいでしょう。

2. サイトを確認する

   依頼した操作を試し、コンテンツと結果を元の資料と照らし合わせて確認します。ダッシュボードの場合は、依頼の送信、ステータスの変更、担当者による絞り込みなどを試します。サイトが情報をどのように使用し、保存するかを確認してください。

3. サイトを改善する

   変更したい点を ChatGPT に伝え、必要に応じてスクリーンショットや参考サイトを共有します。ダッシュボードの場合は、「担当者とステータスのフィルターを依頼一覧の上に配置してください」のように依頼できます。

4. サイトを管理して共有する

   sites に戻ると、サイトを再度開いたり編集したりできます。公開する前に、レビューと共有のチェック項目を確認してください。閲覧できるユーザーを選び、想定する閲覧者として公開リンクを確認します。

レコードと進捗を保存する

サイトのバージョンを保存すると、そのコンテンツ、デザイン、動作が保持されます。閲覧者の依頼、ステータスの更新、アップロードされたファイル、個人の進捗には、それぞれ保存先が必要です。何を保存し、誰が読み取りや変更をできるようにするかを ChatGPT または Codex に伝えてください。

共有レコードや個人のレコードについては、サーバー側で適用されるアクセスルールを依頼してください。再読み込み後も更新内容が保存されていることを確認し、別々のアカウントを使って各ユーザーのアクセス権を確認します。ボタンを非表示にするだけでは、その背後にあるレコードは保護されません。

提供するファイルについては、コピーを使用するか、元のファイルから情報を更新するかを指定します。情報の最終更新日時を確認してください。

ストレージとサインインのオプションについては、データと接続をご覧ください。

サイト構築のヒント

• 元の資料を活用する。 サイトで使用するファイル、リンク、定義、数式を添付します。不足している情報は補完せず、その旨を指摘するよう ChatGPT または Codex に依頼してください。
• 空の状態やエラー時の表示を説明する。 検索結果がない場合、フォームが未入力の場合、接続先のアプリを利用できない場合に、閲覧者に何を表示するかを説明します。再試行や問題の修正を行う方法も用意してください。
• 見た目の参考資料を共有する。 スクリーンショットやページへのリンクを添付し、コンパクトなカードや検索欄の配置など、取り入れたい点を示します。ブランドカラー、フォント、文章のガイドラインがあれば、それらも含めてください。
• スマートフォンでの利用を考慮する。 カード、表、フォームを狭い画面にどのように収めるかを説明します。横スクロールせずに、ナビゲーション、フィルター、フォームの操作部品を使えることを確認してください。
• サンプルデータであることを明示する。 最終的なコンテンツが用意できていない場合は、サンプルと明示したレコードを依頼します。サイトを共有する前に置き換えてください。
• 変更を一つに絞る。 一度に一つの変更を依頼し、維持する内容も伝えます。たとえば、保存済みのレコード、アクセスルール、既存の操作は変更せずにフィルターを移動するよう依頼します。変更するたびに、影響を受ける操作を試してください。

Sites ショーケースでは、Sites で構築できるウェブアプリの例を紹介しています。

プロンプトの例

リソースハブを作る場合は、短いプロンプトから始めます。

プロンプト:

Build a resource hub website where project leads can search our kickoff resources by task. Use the resource list I attach. Save a version without deploying it so I can review it.

閲覧者が行う操作、検索ルール、デザインの希望を加えて、依頼を詳しくすることもできます。

プロンプト:

Build a resource hub website for project leads preparing a kickoff. Use the resource list I attach, with its titles, descriptions, task labels, and source links.

Visitor actions:

- Choose a task, such as preparing an agenda.
- Search within that task's resources.
- Select a result to open its source link.

Search rules:

- When the search is empty, show all resources for the selected task.
- If no task is selected, show the full list.
- If there are no matches, offer a way to clear the filters and show the help contact from my list.
- Flag entries with missing titles or links for my review.
- Search filters can reset when the visitor returns.

Design preferences:

- Use a white background and dark text. Keep descriptions to one sentence, with a layout that works on a phone.
- If I provide a reference screenshot, use it for the search placement and compact resource cards.
- If I provide a brand guide, use its accent color.

Save a version without deploying it so I can review the layout and try the search.

既存のプロジェクトについては、互換性を確認し、公開の準備をするよう ChatGPT に依頼します。

プロンプト:

Deploy this project with sites. Check whether it is compatible, make any required changes, and give me the deployment URL.

レコードやアップロードされたファイルをサイトで保持する必要がある場合は、その点を依頼に含めます。

プロンプト:

Add player scores and avatar uploads to this game. Keep the scores and uploaded avatars between visits.