WordPressサイトの構築、エンドツーエンド
なぜこの方法が存在するのか
エージェントはフィードバックループが遅いと設計が上手くいきません。WordPress内でページレイアウトを行うと、1回のイテレーションに3～5分かかります（構成、保存、シリアライズ、パージ、リロード、確認）。ローカルHTMLと開発サーバーでは同じループが5秒で完了し、設計品質は美的指示よりもイテレーション回数に比例します。
後半は納品上の制約です。クライアントはコードを書かずにサイトを編集します。これにより、生のHTMLブロックやテンプレート所有のコンテンツが禁止され、描画ではなく変換が制約されます。
一言で言えば、デザインはページコンテンツではなくファイルに存在します。WordPressは完成したテーマを受け取るのであって、レイアウト指示を受け取るわけではありません。
最初に来る2つのルール
ルール0 — フェーズ2をフェーズ4が存在しないかのように描画する。 モックアップに変換制約を持ち込まないでください。core/html禁止を予測しながら描画すると、奥行き、重なり、中央オブジェクトが静かに失われ、結果は完璧に変換されても誰も満足しません。
ルール0′ — 美的自由はリファレンスから逸脱しない。 リファレンスがある場合、モデルは独自のハウススタイルに流れがちです。リファレンスが冷たい白のところを暖かいベージュに、サンセリフ1つのところを特徴的なセリフに、存在しないアクセントカラーを追加します。リファレンスから7つのレジスター不変量を読み取り、再現します。変更する場合は、コーディング前にクライアントに確認します。不変量、レジスターゲート、測定スクリプトは references/register.md にあります。
10のルール
それぞれは実際に発生したミスに基づいています。
- ビジュアルリファレンスを必須とする。リファレンスがない場合、出力は統計的中心値（ニュートラルなフォント、紫のグラデーション、白いページ）に回帰します。
- 実際の写真なしでモックアップを作成しない。グレーのボックスは画像切れと見なされます。
- WordPressプロダクションに到達する前に、2つのクライアント承認（モックアップ、デプロイ計画）が必要です。
- ホームページはテンプレートではなく固定ページにする。
front-page.htmlにヘッダー、post-content、フッターを含めます。 core/htmlブロックはゼロにします。グループ、見出し、段落、画像で構成します。- 画像はメディアライブラリに配置し、すべての
core/imageにidを付けます。 - インタラクティブバリエーションはすべてページ内に配置し、スクリプトでクラスをトグルします。
- デザインの下にサードパーティテーマを置かない。
- フロントエンドではなくエディタで受け入れる。ページが完全にレンダリングされていても、Gutenbergで使用できない場合があります。
- ピクセル精度は目視ではなく測定する。セレクタごとに計算されたスタイルとジオメトリ。
フェーズとそのゲート
前のゲートが通過するまで、次のフェーズを開始しないでください。
| フェーズ | 担当 | 出口ゲート |
|---|---|---|
| 0 · ワークスペース | エージェント | ユーザーの作業フォルダにプロジェクトが存在し、書き込みアクセスがテスト済み |
| 1 · ブリーフ | クライアント | リファレンス調査、リファレンスから取得したパレットとタイプ、「私が追加するもの」リスト |
| 2 · モックアップ | 反復的 | HTMLでのホームページ、レジスターゲート通過、クライアント承認 |
| 3 · ページセット | エージェント | すべてのページが1つのヘッダー/フッターソースから構成されている |
| 4 · ブロックテーマ + ステージング | エージェント | テーマ構築済み、再現可能なツールでローカルWordPressセットアップ済み、ステージングでゲート1～5通過 |
| 5 · デプロイ | エージェント、計画のクライアント承認後 | Webルート外へのバックアップ、その後同じツールをプロダクションで実行 |
| 6 · 受け入れ | エージェント | ゲート1～5がプロダクションで通過、またはフェーズ4に戻る |
フェーズ0～3とデプロイ計画: references/phases.md。HTMLからブロックへの変換: references/block-conversion.md。コード付きの5つのゲート: references/acceptance.md。
ステージングはローカルであり、すべての変更はツールです。 コンテンツと設定は、wp-adminに入力するのではなく、PHP CLIでローカルコピーに対して実行される冪等なPHPスクリプト（tools/install-site.php、tools/configure-*.php）によって記述されます。同じスクリプトがデプロイ時にプロダクションで再実行され、2回実行しても何も変わりません。これは検証済みであり、仮定ではありません。
ブランチを選択する
方法はすべてのサイトで同じですが、異なるのはフェーズ4以降です。
| サイト | 変更点 | 参照先 |
|---|---|---|
| ショーケース | ページ、フォーム（Contact Form 7 + Flamingo）、法的ページ | このファイルとフェーズ |
| ストア | WooCommerceブロックテンプレート、カタログインポート、製品フィルター、カート/チェックアウトブロック、同意、決済、ニュースレター、注文確認 | references/store.md |
| Webアプリ | カスタム投稿タイプ、ロール、REST、動的ブロック、アカウントフロー — モックアップはすべての公開画面を駆動します | references/web-app.md |
references/store.md は実際のビルド（WooCommerce 11.2.2、ブロックチェックアウト、ブロックテーマ）で測定されています。references/web-app.md は未測定です。その旨が記載されており、該当するスキルへのルートを示しています。
事実はクライアントのもの
モックアップはブリーフからコピーを創作しますが、事実を創作することはありません。レビュー、評価、顧客数、プレスロゴ、配達時間、サービス価格、法的条項、会社のアイデンティティは、表示可能なプレースホルダーとして残します。クライアントのみが提供できるものには à compléter、古いサイトから読み取ったもので古くなっている可能性があるものには à vérifier とします。捏造されたレビューはすべてのゲートを通過し、クライアントに法的損害を与える可能性のある唯一の欠陥です。
コメント、コミットメッセージ、レポートでは、どの主張が測定されたか（日付付き）と、どの主張が読み取りされたか（ソース付き）を明記します。
ツール
| ファイル | 使用時 |
|---|---|
scripts/serve.mjs | フェーズ2 — 依存関係のない静的サーバー、占有時に次のポートを試行 |
scripts/assemble.mjs | フェーズ3 — 1つの <head>、ヘッダー、フッターソースからすべてのページを構築 |
scripts/fetch-fonts.mjs | フェーズ4 — Google Fontsをセルフホスト、訪問者からGoogleへのリクエストなし、GDPR下での申告不要 |
scripts/novamira.mjs | フェーズ5 — MCPサーバーを登録せずにHTTP経由でNovamira機能を呼び出し |
assets/theme-skeleton/ | フェーズ4 — 最小限のブロックテーマ: blockGap: 0px の theme.json、editor.css、エディタ内のフォント |
参考文献
| ファイル | 参照するタイミング |
|---|---|
references/register.md | フェーズ1の前、およびモックアップを表示する前 |
references/phases.md | フェーズ0～3、およびフェーズ5のデプロイシーケンス |
references/block-conversion.md | フェーズ4の間、毎回 |
references/acceptance.md | フェーズ4および6 — 5つのゲートと測定の衛生 |
references/store.md | WooCommerceサイトの場合 |
references/web-app.md | メンバーシップ、予約、ダッシュボード、ログインユーザーが作業を行うものすべて |
references/pitfalls.md | 症状に驚いたらすぐに |
関連スキル: wp-theme-block-fse (theme.jsonとテンプレート)、wp-design-system (トークン)、wp-woocommerce (フックとHPOS)、wp-deploy (移行)、wp-plugin-architecture および wp-blocks-gutenberg (アプリケーションコード)、wp-accessibility および wp-performance (受け入れ前)。