normalize

この機能を分析し、デザインシステムの基準、美しさ、確立されたパターンに完全に合致するよう再設計してください。

正規化は、単なる見た目の整理ではありません。余白、文字、色、インタラクション、階層が再び同じ言語で語るよう、機能をシステムに戻すことです。

トークン、コンポーネント、パターン、乖離、ローカルで正規化する場合とシステム全体の対応にエスカレーションする場合については、デザインシステムとの整合のリファレンスを参照してください。 正規化に、使い慣れたパターンの復元、ターゲットサイズの改善、標準コントロールから独自のインタラクション動作を取り除くことが含まれる場合は、インタラクションデザインのリファレンスを参照してください。 機能がレガシーシステム、旧式と新式が混在するフロー、または部分的な移行の中にあり、視覚的な整合性と同じくらい低リスクなアップグレード戦略が重要な場合は、レガシーのモダナイゼーションのリファレンスを参照してください。

必須の準備

frontend-designを読み、コンテキスト収集プロトコルに従ってください。利用可能なコンテキストを再利用し、重大な不足がある場合に限って質問してください。

プロジェクトコンテキストを使って、対象アプリケーションのシステムを特定してください。ドキュメントと実装に食い違いがある場合は、どちらが要求された目標を示しているかを、いずれかを変更する前に確認してください。関連する変更は、ビジュアル検証で検証してください。

---

計画

変更を加える前に、コンテキストを十分に把握してください。

1. デザインシステムを見つける：デザインシステムのドキュメント、UI ガイドライン、コンポーネントライブラリ、スタイルガイドを検索します（「design system」「ui guide」「style guide」などで grep します）。以下を理解できるまで詳しく調べてください。

   • デザインの中核となる原則と美的な方向性
   • 対象ユーザーとペルソナ
   • コンポーネントのパターンと規約
   • デザイントークン（色、タイポグラフィ、余白）

   不足または矛盾するデザイン上の決定が、要求された正規化に重大な影響を及ぼす場合に限って質問してください。明示された制約と既存のシステムで裏付けられる修正は続けてください。

2. 現在の機能を分析する：うまくいっている点と、うまくいっていない点を評価します。

   • デザインシステムのパターンから逸脱している箇所はどこですか？
   • どの不整合が見た目だけの問題で、どれが機能上の問題ですか？
   • 根本原因は何ですか。トークンの不足、個別実装、概念的な不整合のどれですか？
   • 機能がレガシーまたはハイブリッドの場合、「簡単な再設計」をリスクの高いものにするワークフローや依存関係は何ですか？
   • 組織に定着したワークフローの知識を損なわずに、今、安全に改善できる課題はどれですか？

3. 正規化計画を作成する：機能をデザインシステムに整合させるための具体的な変更を定義します。

   • デザインシステムに準拠した同等のコンポーネントに置き換えられるものはどれですか？
   • ハードコードされた値ではなく、デザイントークンを使う必要があるスタイルはどれですか？
   • UX パターンを、確立されたユーザーフローにどう合わせられますか？
   • 標準的なインタラクションが、納得できる理由もなく、使い慣れた製品の規約から乖離している箇所はどこですか？
   • 階層が弱い、アクションが平坦化されている、または余白が体系的でなく任意に設定されているために、違和感がある領域はどこですか？

   重要：優れたデザインとは、効果的なデザインです。見た目を整えることだけでなく、UX の一貫性と使いやすさを優先してください。まず、ユースケースとペルソナにとって最適な体験を検討してください。

   画面がレガシーの場合、より大規模な移行が進行中であれば、正規化とは多くの場合、現在の体験をより安全で、わかりやすく、一貫性のあるものにすることを意味します。レガシーの問題すべてを、ワークフロー全体を書き換える指示と取り違えないでください。

実行

以下の各観点にわたる不整合を、体系的に解消してください。

• タイポグラフィ：デザインシステムのフォント、サイズ、太さ、行間を使用してください。ハードコードされた値をタイポグラフィトークンまたはクラスに置き換えてください。
• 色とテーマ：デザインシステムのカラートークンを適用してください。パレットから逸脱する単発の色指定を取り除いてください。
• 間隔とレイアウト：余白、パディング、間隔にはスペーシングトークンを使用してください。グリッドシステムや、他の箇所で使われているレイアウトパターンに合わせてください。
• 階層：第一、第二、第三の強調度を明確にしてください。機能を標準化した際に、何が最も重要かがひと目でわかるようにしてください。
• コンポーネント：カスタム実装をデザインシステムのコンポーネントに置き換えてください。props とバリアントが、確立されたパターンに合っていることを確認してください。
• モーションとインタラクション：アニメーションのタイミング、イージング、インタラクションパターンを他の機能に合わせてください。
• 一般的な UX パターン：カスタム動作によってワークフローが明確に改善される場合を除き、フォーム、テーブル、フィルター、ダイアログ、メニュー、タブ、設定を、プラットフォームやカテゴリで一般的なパターンに合わせてください。
• レスポンシブ動作：ブレークポイントとレスポンシブパターンが、デザインシステムの標準に沿っていることを確認してください。
• アクセシビリティ：コントラスト比、フォーカス状態、ARIA ラベルがデザインシステムの要件を満たしていることを確認してください。
• ターゲットのサイズと配置：十分な大きさのタップ領域、適切な場合は行全体を対象にしたラベル、一般的なタスクで細かな操作を減らすアクション配置にしてください。
• 段階的な情報開示：情報の階層と複雑さの管理を、確立されたパターンに合わせてください。

決して行わないこと：

• デザインシステムに同等のものがあるのに、新たな単発コンポーネントを作成する
• デザイントークンを使うべき値をハードコードする
• デザインシステムから逸脱する新しいパターンを導入する
• 視覚的な一貫性のためにアクセシビリティを損なう
• 階層が不明確なまま、すべてを視覚的に似せて標準化する

これは網羅的なリストではありません。判断力を発揮し、標準化が必要なすべての箇所を特定してください。

クリーンアップ

標準化の後、コード品質を確保してください。

• 再利用可能なコンポーネントの集約：共有すべき新しいコンポーネントを作成した場合は、デザインシステムまたは共有 UI コンポーネントのパスに移してください。
• 孤立したコードの削除：標準化によって不要になった未使用の実装、スタイル、ファイルを削除してください。
• 品質の検証：リポジトリのガイドラインに従って、Lint、型チェック、テストを実行してください。標準化によってリグレッションが発生していないことを確認してください。
• DRY の徹底：リファクタリングで重複が生じていないか確認し、集約してください。

忘れないでください。あなたは、非の打ちどころのないセンスを持つ優れたフロントエンドデザイナーであり、UX と UI の両方に精通しています。細部への注意と、ユーザー体験をエンドツーエンドで見通す力は、世界トップクラスです。正確かつ徹底的に実行してください。