ウェブページまたはフローのデザイン
最初にweb-craftを読んでください。既存のDESIGN.mdやデザインシステムが権威です。それに従い、既存製品に対して新しい方向性を発明しないでください。
1. コードの前の方向性（新製品および新しい大規模画面）
以下を簡潔に決定し、書き留めてください。:
| 決定事項 | 回答 |
|---|---|
| ユーザーとジョブ | この画面は誰のタスクを容易にしますか？ |
| 優先順位 | 最初に何を見て、何をすべきですか？ |
| 構成 | 編集フロー、分割レイアウト、高密度ワークスペース、製品ショーケース、またはその他 |
| タイポグラフィ | 文字の特性、スケール、行長、計画されたすべての言語のスクリプトカバレッジ |
| ビジュアル素材 | 実際の製品画像、写真、イラスト、図、またはタイポ主導 |
| 画面と密度 | 境界線、トーン、ホワイトスペース、データ密度、ページリズム |
| モーション | 機能的なフィードバック、および製品が必要とする場合のみのナラティブモーション |
| シグネチャーの詳細 | ブランドをサポートする一貫した詳細を1つまたは2つ |
リファレンス：既存のブランドを最優先し、次にユーザーが提供したものを使用します。新しい方向性の場合は、適切なソースをいくつか選び、それぞれが何をもたらすか（密度、写真、リズム、インタラクション、タイプ）を述べてください。「モダン」や「クリーン」のような形容詞は決定ではありません。ロゴ、テキスト、または構成全体をコピーしないでください。新製品のオプションは、色だけでなく、構成と優先順位が異なる必要があります。詳細：references/direction-and-references.md、references/composition.md、references/typography.md。
2. トークン
色（セマンティック、ライトおよびダーク）、タイプスケール、スペーシング、半径、エレベーション、モーションは一箇所にトークンとして存在し、キットのテーマにマッピングされます。エレベーションは制限されています：最初に境界線とサーフェストーン、浮遊レイヤー用のいくつかの単層低透明度シャドウトークン、ダークモードではシャドウの代わりに明るいサーフェス、そしてアニメーション化されたbox-shadowはありません。詳細：references/tokens-color-elevation.md。
3. コピーと階層
すべてのテキストは1つの役割を担います。デフォルトでは見出しの上にアイブローはありません（進行状況、日付、親オブジェクト、法的コンテキストのみ。階層ラベル「プレミアム」などは機能のバッジになります）。サブタイトルは、スコープ、結果、リスク、または具体的な事実のためにのみ残します。見出しレベルは構造に従い、フォントサイズではありません。プレースホルダーがラベルを置き換えることはありません。ボタンは何が起こるかを示します。詳細：references/copy-hierarchy.md。
4. 状態
すべてのデータ画面とフォームに対して状態マトリックスを構築します：初期ロード（レイアウトに一致したスケルトン、フラッシュを避けるために遅延、動きの軽減下では静的）、空（初回使用と結果なし）、エラー（リトライと保持データあり）、リフレッシュ中、ページングエラー、送信中、成功、禁止、未検出、オフライン。詳細：references/states.md。
5. フォーム
ブラーでバリデーション、エラーが表示されたら変更時に再バリデーション、非同期チェックはデバウンス。エラーがある状態で送信時：最初の無効なフィールドにフォーカス、固定ヘッダーの下にスクロールして表示、それを保持する折りたたまれたセクションまたはステップを開き、長いフォームではエラーサマリーを表示。メッセージは何が間違っていて、どう修正するかを示し、フィールドの隣に配置され、aria-describedbyでリンクされます。送信ボタンは送信中のみ無効化。サーバーフィールドエラーは、同じスクロールとフォーカスで該当フィールドに配置されます。詳細：references/forms.md。
6. モーション
ライブラリを選ぶ前に、モーションマトリックス（references/motion-matrix.md）を埋めてください。
- ボタンとリンク：ホバーが存在する場所でのホバー、押下、フォーカス可視、ローディング、無効。
- ダイアログ、シート、メニュー、ポップオーバー、トースト：常にエントリーとイグジットアニメーション（不透明度と小さなスケールまたはトランスレート、イグジットはアンマウント前に終了）、フォーカストラップとリターン、却下。詳細：
references/overlays.md。 - リスト：挿入、削除、並び替えが理解可能。
- チャート：初回表示での短い描画、データ変更時のトランジション、測定されたデータサイズを超える場合はなし、動きの軽減下ではなし。ツールチップはキーボードで到達可能、テーブル代替あり。詳細：
references/charts.md。 - マーケティングナラティブ：限定的、製品固有、アニメーションの背後にコンテンツを隠さない。
持続時間、イージング、距離はトークンから取得します。すべてのページが同じフェードアップスタッガーになるわけではありません。フォームやデータ画面での人工的な遅延はなし。動きの軽減は中央で処理され、CSS、ライブラリ、ビデオをカバーします。
7. レスポンシブ
ブレークポイントはコンテンツに従います。狭い画面でナビゲーション、フィルター、テーブル、固定アクション、ダイアログ、ポップオーバーがどう動作するかを定義してください。320 px、長い翻訳テキスト、200%ズーム、タッチとキーボードを確認してください。ウェブダイアログがデフォルトでReact Nativeのボトムシートになることはありません。詳細：references/responsive.md。
8. 結果を確認する
モバイルとデスクトップの両方の幅、両方のテーマ、両方の言語、キーボードのみ、動きの軽減をオンにして、ブラウザで確認してください。静的なスクリーンショットではモーションをレビューできません。インタラクティブに操作してください。
キットが非常に異なる製品間で再利用される場合、references/pilot-divergence.mdの発散テストを実行してください。