ステージ2: デザイン
目標: オーナーがスマートフォンとラップトップで確認し承認したルックを得ること。そのルックはトークンとして記述され、コピーによってWordPressスキンにでき、後で機能を失うことなく置き換えられます。
ステップ
- 方向性の決定。 プロジェクトの
docs/DESIGN_DIRECTION.mdを記入：北極星、ターゲットオーディエンス、似てはいけないもの（競合、テンプレート）、および譲れない条件。方向性は最大2～3つ提示し、小さなムードボードまたはヒーローモックアップとして提示します（フルサイトは不要）。 static/でのプロトタイプ作成。 プレーンなHTMLとCSSを使用。css/tokens.cssはテーマのskins/default/tokens.cssと同じ名前を使用します。コンポーネントはトークンのみを使用。実際の構造（ヘッダー、ヒーロー、カード、フォーム、フッター）、プレースホルダーのコピー、価格やポリシーテキストは含めません。- アクセシビリティを最初から考慮：
- テキストのコントラスト比は4.5:1以上；
- フォーカスが可視であること；
- H1は1つ；
- スキップリンク；
- キーボード操作経路；
prefers-reduced-motionに対応。 表示前にaxe（ブラウザ拡張機能）でプロトタイプをチェックします。
- オーナーレビュー。 すべてのページについて、スマートフォン幅（375px）とラップトップ幅（1440px）のスクリーンショットを撮影。承認日を
DESIGN_DIRECTION.mdに記録し、スクリーンショットをdocs/design/に保存します。 - フォント：
.woff2ファイルをセルフホストし、必要な言語にサブセット化し、ライセンスを確認し、最初の画面に表示される1～2種類のフェイスをプリロードします（ファイル名は*-preload.woff2とします）。Google Fontsへのリクエストは一切行いません。 - WordPressへの移植（
references/design-system.md）：- トークンをスキンにコピー；
- コンポーネントCSSを
skin.cssに移動； - コアのレンダリング関数を使用してテンプレートをレイアウト；
- マークアップが異なる必要がある場合にのみ、スキンパーツのオーバーライドを追加。 見た目は変わりますが、コアのデータとマークアップの契約は変わりません。
- その後のリデザイン は新しいスキンとして行います：
skins/defaultをskins/<名前>にコピーし、トークンを変更し、?skin=<名前>でプレビュー（管理者のみ）、承認後に<プレフィックス>_skinオプションで切り替えます。
ゲート（SITE_STATUS.md でチェック）
-
DESIGN_DIRECTION.md作成済み；スクリーンショット付きのオーナー承認を記録済み - トークンが定義済み；コンポーネントはトークンのみを使用
- フォントはセルフホスト済み；Google Fontsへのリクエスト0
教訓
- ロックされたデザインは、ビジネスパートナーが独自のリデザインを送ってきたときに変更されました。ルックがスキンであったため、切り替えによってすべての機能が維持されました。最初のデザインも含め、すべてのデザインをスキンとして構築しましょう。
- 競合のパレット、タイプペアリング、レイアウトをコピーしないでください。オーナーは気づきますし、訪問者はあなたを覚えてくれません。
- アイデアを試すためのテスト専用スキン（
dev-*）は、本番環境では決して表示されません。 frontend-designまたはdesign-motion-principlesスキルがインストールされている場合、方向性とモーションにそれらを使用します。