arrange-ui

arrange-ui

準備（MANDATORY PREPARATION）

ui-design-grounding スキルを呼び出し、以下のリファレンスを読み込む:

• ui-design-grounding/reference/spatial-layout.md
• ui-design-grounding/reference/typography.md
• ui-design-grounding/reference/responsive-design.md
• ui-design-grounding/reference/anti-patterns.md

手順

0. 基準の確認（DESIGN.md の検証）

DESIGN.md のスペーシングスケール・コントロール最小サイズ・コンテナ幅ルールが具体値で定義されているかを確認する。

未定義の項目がある場合は、改善の前に基準の定義を提案する。基準なしで「問題なし」と判断してはならない。

1. 現在のレイアウトを診断

• グリッド/フレックス: 使い分けが適切か（1D=Flex、2D=Grid）
• スペーシング: 4ptグリッドに準拠しているか、一貫性があるか
• 視覚階層: スクイントテスト（目をぼやかして主要素・副要素・グルーピングが識別できるか）
• カード使用: 必要性があるか、ネストしていないか
• アラインメント: 要素の揃い、光学的調整

2. 問題の特定

• 均一スペーシング（密集と開放のリズムがない）
• 視覚階層の不明確さ（何が重要か一目で分からない）
• カードの過剰使用・ネスト
• 全中央揃え（左揃え+非対称の方がデザインされた印象）
• 固定幅レイアウト
• gap ではなく margin で間隔を管理
• 同一行内の要素で高さ・ベースラインが不揃い
• コンテナ幅の不統一による整列ずれ
• 操作対象とアクションの距離が遠い（近接の法則違反）

3. 改善の実施

グリッドシステム:

• 4pt ベースグリッド: 4, 8, 12, 16, 24, 32, 48, 64, 96px
• セマンティックトークン: space.xs(4) → space.xl(48) 等
• gap プロパティでの間隔管理
• 自己調整グリッド: repeat(auto-fit, minmax(280px, 1fr))

スペーシングリズム:

• 関連要素を密集、グループ間を開放
• セクション間の余白を大きく、要素間を小さく
• 意図的な対比で視覚的リズムを作る

視覚階層:

• 2-3次元を同時に使用（サイズ + ウェイト + 色）
• サイズ比率 3:1 以上（重要 vs 補助）
• プライマリアクションを最も目立たせる

カード整理:

• 不要なカードの除去（スペーシングで十分な場合）
• ネストのフラット化
• カードが適切な場合: 明確なアフォーダンス、グリッド比較、インタラクション境界

コンテナクエリ:

• コンポーネントレベルのレスポンシブ（@container）
• ビューポートではなくコンテナ幅に応答

4. タッチターゲットの確認

• インタラクティブ要素が 44px 以上のタップ領域を持つか
• 見た目が小さくても疑似要素で拡張されているか

5. レスポンシブ確認

• 主要ブレイクポイントでレイアウトが適切に変化するか
• オーバーフローが発生していないか
• 横スクロールが不要か

推奨される次のステップ

レイアウト修正後、以下のコマンドスキルの実行を検討する:

• /adapt-ui — レイアウト変更のマルチデバイス適応を確認
• /audit-ui — 変更後の技術品質を監査