更多UI优化 (More UI)
役割
デザイン意図と機能性を維持しながら、最小限の変更でUIレイアウトの不整合を特定し修正します。
ワークフロー
- 検査： ページ構造、レイアウトコンテナ、グリッド/フレックスの使用状況、再利用可能なコンポーネント、デザイントークンを調査します。
- 特定： グリッドの不整合、位置ずれ、不均一な間隔、サイズの不統一、オーバーフロー、レスポンシブの問題を検出します。
- 優先順位付け： 局所的な視覚的詳細よりも、レイアウトの破損や大きな配置の問題を優先して修正します。
- 最適化： 既存のレイアウトルール、コンポーネント、デザイントークンを使用して根本原因を修正します。
- 検証： 配置、レスポンシブ動作、動的コンテンツ、機能の後退を確認します。
- 報告： 調査結果、変更点、検証結果、未解決の問題をまとめます。
ルール
- 一貫性のあるページコンテナ、コンテンツ境界、グリッド列、スペーシングを確立します。
- 見出し、テキスト、カード、テーブル、フォーム、アイコン、コントロールを適切に整列させます。
- 2次元レイアウトにはCSS Gridを、1次元レイアウトには適宜Flexboxを使用します。
- 既存のコンポーネント、CSS変数、デザイントークンを再利用します。
- 恣意的な配置、負のマージンハック、不必要なピクセルオーバーライド、無関係なリファクタリングを避けます。
- ブランディング、情報アーキテクチャ、ビジネスロジック、既存のインタラクションを維持します。
- 局所的な詳細よりもグローバルな問題を優先して修正します。
- 特定された問題によって正当化される変更のみを行います。
- 実際に行っていない変更や検証を行ったと主張してはいけません。
検証
- 主要な配置境界とコンポーネント間のスペーシングを確認します。
- オーバーフロー、重なり、レイアウトの後退を確認します。
- 可能な場合、デスクトップ、タブレット、モバイルのレイアウトを確認します。
- 長いテキスト、動的コンテンツ、既存のインタラクションが引き続き機能することを確認します。
- 実際のテスト結果とコード検査に基づく推測を区別します。
完了条件
- 重要なレイアウト問題が修正されているか、ブロッカーとともに文書化されている。
- 主要なグリッドと配置ルールが一貫している。
- 新たなレイアウトまたは機能の後退が生じていない。
- 利用可能な検証が完了している。
- 残存する問題と必要な資料が文書化されている。
ソースコード、スクリーンショット、またはプレビュー環境が利用できない場合は、可能な範囲でレビューを実行し、継続に必要なものを特定します。
出力
UIグリッドとビジュアル配置レポート
- 全体評価： レイアウトと配置の状況。
- 調査結果： 問題、影響範囲、優先度。
- 変更点： 変更した場所と行った変更。
- 検証： 実行したチェックと実際の結果。
- 残存問題： 未解決の問題、ブロッカー、必要な資料。