Webサイト制作プレイブックとは
「Webサイト制作プレイブック（Website Playbook）」は、AIによるWebサイト制作アシスタント向けの作業方法です。現在のバージョンは2.0.1で、主にCodex環境で検証されています。Webサイトのフレームワーク、CMS、ホスティングプラットフォームではなく、Agentが要件を正しく理解し、参考実装を確認し、既存プロジェクトを保護しながら、検証と引き継ぎまで完了するための実行ルールをまとめたものです。
個人サイト、ポートフォリオ、研究・組織サイト、コンテンツサイトに利用できるほか、既存サイトの改修や部分修正にも使用できます。中核となるワークフローに加え、匿名化された16件の経験、プロジェクト概要とWebサイト引き継ぎの2種類のテンプレートも提供しています。
中核となる機能と作業原則
要件の範囲を守る
Webサイト制作プレイブックでは、情報を3種類に分けて扱います。ユーザーが明確に提示した要件、タスク完了に必要な実装の詳細、そして提案できるものの未確認のアイデアです。これにより、AIが独断でセクション、機能、コピーを追加する問題を減らせます。
まず参考実装を確認する
Awwwardsでデザインの着想を得た後、作品の実サイトにアクセスし、閲覧可能なソースコードと実際のインタラクションを確認できます。ビジュアルの参考はスクリーンショットだけにとどめず、メニュー、スクロール、アニメーション、レスポンシブ動作がどのように機能するかも確認してください。
承認済みのバージョンを保護する
既存サイトを変更する前に、正しいプロジェクトと基準状態を特定し、保持すべき内容と未コミットの変更を確認します。確認なしに、ユーザーがすでに承認したバージョンを直接上書きしてはいけません。
実際の利用体験を検証する
検証はページが開けることの確認だけではありません。タスクの範囲に応じて、モバイル表示、キーボード操作、メニューの状態、アニメーションの過程、エラー状態を確認し、実際にテストした項目と未検証の項目を明確に記録します。
保守の道筋を残す
Webサイトを引き渡す際は、コンテンツの更新場所、変更の反映タイミング、公開方法、問題発生時のロールバック方法を説明します。これにより、納品物を現在の作業者だけでなく、引き続き保守できる状態にできます。
インストール前の準備
このSkillを使用するには、Skillを利用できるローカル環境が必要です。具体的なWebサイトプロジェクトには、対応するコンテンツ、開発環境、ツールの権限、検証条件も必要になります。プロジェクトは主にCodexで検証されているため、READMEではすべてのAIプラットフォームとの完全な互換性を保証していません。
v2.0.1のリリースノートを確認するか、v2.0.1の完全なSkillパッケージを直接ダウンロードできます。
方法1：CodexにSkillをインストールさせる
以下の指示をCodexに渡します。同名のバージョンが存在する場合は、既存の内容を直接上書きせず、まずカスタム変更を確認するよう明示しています。
skill-installerを使用して、https://github.com/7-an/website-playbook/tree/v2.0.1/skills/build-websites-v2 からこのSkillをインストールしてください。
同名のバージョンがすでに存在する場合は、まず確認し、私のカスタム変更を保持してください。直接上書きしないでください。インストール後は、以前の会話のコンテキストが要件の範囲に影響しないよう、新しいタスクを開始してからSkillを呼び出すことをおすすめします。
方法2：ZIPを手動でインストールする
- v2.0.1の完全なSkillパッケージをダウンロードします。
- ダウンロードしたZIPファイルを解凍します。
- 完全な
build-websites-v2フォルダを見つけます。 - フォルダ全体を、このPCでサポートされているSkillディレクトリに配置します。
- すべてのサブディレクトリとファイルが保持されていることを確認します。
SKILL.mdだけをコピーしないでください。このSkillはREADME、呼び出しメタデータ、参考資料、テンプレートリソースにも依存しています。
Skillのインストールと検出の仕組みについては、公式ドキュメントを参照してください。
プロジェクトのファイル構成
skills/build-websites-v2/
├── SKILL.md # Agentの実行エントリ
├── README.md # インストール、例、対応範囲
├── agents/openai.yaml # 呼び出しメタデータ
├── references/ # 必要に応じて使う5つの参考資料。匿名化された経験台帳を含む
└── assets/ # プロジェクト概要、Webサイト引き継ぎテンプレートSKILL.mdはAgentの実行エントリですが、完全な作業方法は他のディレクトリにも依存します。referencesには必要に応じて使用する参考資料が保存され、assetsにはプロジェクト概要とWebサイト引き継ぎテンプレートが含まれています。
初めてWebサイト制作プレイブックを呼び出す
プロジェクトの公開名称は「Webサイト制作プレイブック」ですが、既存ユーザーとの互換性のため、現在の呼び出し名はbuild-websites-v2のままです。インストール後、新しいタスクで次の形式を使用できます。
$build-websites-v2を使用して、Webサイトを制作または修正してください。
目的：……
既存資料とプロジェクトパス：……
参考サイトと取り入れたい部分：……
必ず保持するもの：……
今回の範囲：分析 / ローカル実装 / 公開。この入力構造のポイントは、目的、プロジェクトの場所、参考対象、保護対象、実行範囲を分けることです。「もっと見栄えよくして」とだけ伝えるのではなく、具体的なページ、期待する効果、変更してはいけない領域を示してください。
例：ポートフォリオサイトを制作する
$build-websites-v2を使用して、Webサイトを制作してください。
目的：研究プロジェクトとデザイン作品を紹介する個人ポートフォリオサイトを制作する。
既存資料とプロジェクトパス：プロジェクトは指定したローカルディレクトリにあり、コピーと作品資料は整理済みです。
参考サイトと取り入れたい部分：指定サイトのトップページのリズムとプロジェクト一覧のレイアウトを参考にします。画像、フォント、コードはコピーしません。
必ず保持するもの：既存の自己紹介とプロジェクト名。
今回の範囲：まず分析し、その後ローカル実装を行う。公開はしない。例：既存サイトを修正する
$build-websites-v2を使用して、Webサイトを修正してください。
目的：モバイルでメニューを正常に閉じられない問題を修正する。
既存資料とプロジェクトパス：プロジェクトは指定したローカルディレクトリにあります。
参考サイトと取り入れたい部分：なし。
必ず保持するもの：トップページの内容、デスクトップ版のナビゲーションスタイル、現在の未コミット変更。
今回の範囲：ローカル実装と関連する検証。公開はしない。2つ目の例では、タスクをメニューの修正に限定し、サイト全体の再設計を求めていません。Webサイト制作プレイブックはこのような部分的なタスクにも対応しており、毎回サイト制作の全工程を実行する必要はありません。
タスクに応じて実行範囲を選ぶ
呼び出し時に、今回の範囲を分析、ローカル実装、公開のいずれかとして明確に指定できます。複数の段階を組み合わせることも可能です。
- 分析のみ：参考サイトの調査、要件の整理、既存プロジェクトの確認に使用します。コードは直接変更しません。
- ローカル実装：プロジェクトと基準状態を確認したうえでWebサイトを修正し、タスクに関連するローカルチェックを行います。
- 公開：適切な権限が必要です。公開前に納品内容とリスクを確認します。
- 部分修正：メニュー、インタラクション、指定された問題だけを扱い、変更範囲の拡大を避けます。
- バージョン復元：復元するバージョンまたは基準状態を明確にし、他の既存変更を保護します。
応用的な使い方
「何を参考にするか」を明確にする
参考サイトを提示するときは、URLだけを渡さないでください。レイアウト、情報階層、メニューの動作、アニメーションのリズムなど、どの具体的な部分を参考にしたいのかを説明します。一般公開されているソースコードだからといって、コード、フォント、画像を自由にコピーできるわけではありません。再利用する前に、該当するライセンスを守る必要があります。
保護対象をプロンプトに書く
プロジェクトに承認済みのバージョンがある場合は、保持必須のページ、コピー、インタラクション、未コミット変更を明確に列挙します。同名のSkillバージョンをインストールするときも同じ原則を適用し、直接上書きするのではなく、まず差分を確認してから更新方法を決めます。
検証記録を求める
完了後に、Agentが実際にテストした項目を列挙するよう求められます。たとえば、モバイルレイアウト、キーボード操作、メニューの開閉、アニメーション全体、エラー状態を確認したかどうかです。ブラウザ、参考ソース、外部リソースにアクセスできない場合は、すでに合格したと仮定せず、未検証として記録してください。
引き継ぎをタスクの一部にする
プロンプトに引き継ぎの要件を加え、最終結果にコンテンツの更新場所、反映条件、公開手順、ロールバック方法を記載させます。プロジェクト内の引き継ぎテンプレートを使うと、これらの情報を整理しやすくなります。
まず分析し、その後実装を許可する
参考内容が複雑な場合、既存プロジェクトに不慣れな場合、変更リスクが高い場合は、まず「分析のみ」に限定できます。分析結果と範囲を確認してから、ローカル実装または公開のタスクを開始します。この段階的な方法は、誤った変更のリスクを抑えるのに役立ちます。
対応範囲と注意事項
- このプロジェクトが提供するのは作業方法と実行ルールであり、Webサイトのコンテンツ、開発環境、必要な権限を代替するものではありません。
- 特定のフレームワーク、CMS、ホスティングプラットフォームを強制しません。
- Skillをインストールしても、Webサイトのデプロイ権限が得られるわけではありません。公開は実際の権限に左右されます。
- 参考ソースやブラウザにアクセスできない場合は、未検証の項目として記録してください。
- 公開コンテンツには一般的な方法、匿名化された経験、空白のテンプレートのみが含まれ、元のチャット、顧客素材、個人アカウント、内部監査記録は含まれていません。
- プロジェクトは主にCodex環境で検証されており、すべてのプラットフォームとの互換性検証は完了していません。
まとめ
Webサイト制作プレイブックの価値は、技術スタックを代わりに選ぶことではなく、AIによるWebサイト制作のプロセスを整えることにあります。まず要件と範囲を正しく理解し、参考実装を確認し、既存バージョンを保護し、タスクに合った実際の利用体験を検証し、最後に保守・公開・ロールバックが可能な引き継ぎの道筋を残します。build-websites-v2をインストールしたら、まずは目的が明確な小さなタスクから始めるほうが、AIにサイト全体の作り直しを直接求めるより、通常は確実です。