group-related-elements

スキル：関連要素をグループ化する

目的

近接と余白を活用して、関連する要素を視覚的にまとめ、関連のないグループを分けます。

種類

生成＋評価

入力

• 要素の一覧
• 関係性のマッピング（どの要素が関連するか）
• 要素間の現在の余白

出力

• 関係性を示すための余白に関する推奨事項
• 現在のグループ化の合格／不合格評価

実行する変換

ゲシュタルトの近接の原則を用いて、異なるグループ内の要素間よりも、同じグループ内の要素間の余白が小さくなるよう調整します。

判定基準

合格（適切なグループ化）

• 関連する要素間の余白が小さい（8～16px）
• 関連のないグループ間の余白が大きい（24～48px）
• フォームのラベルが入力欄に近い（4～8px）
• セクションが明確に分かれている
• 余白に階層がある：コンポーネント内が最も狭く、コンポーネント間はより広く、セクション間が最も広い

不合格（不適切なグループ化）

• どこも同じ余白
• ラベルが入力欄から離れすぎている
• 関連する要素が視覚的に分断されている
• 関連のない要素が近すぎる
• 余白の代わりに境界線を使ってグループ化している

近接の原則

近くにある要素ほど、離れている要素よりも関連性が高いと認識されます。

余白の階層

Within component (label + input): 4-8px
Between related components: 16-24px
Between sections: 32-64px
Between major page areas: 64-96px

一般的なグループ化パターン

パターン	構造	余白
フォームフィールド	ラベル → 入力欄	間は4～8px、後は16～24px
カード	ヘッダー → コンテンツ → フッター	内側のパディングは16～24px
リスト項目	項目1 / 項目2 / 項目3	項目間は8～12px
ボタングループ	プライマリ＋セカンダリ	間は8～12px
セクション	セクションA（余白）セクションB	間は48～64px

よくある失敗パターン

失敗	説明	修正方法
大きな隔たり	どこも同じ余白	グループ内の余白を狭め、グループ間を広げます
ラベルのずれ	ラベルが入力欄から20px以上離れている	4～8pxに縮めます
セクションの密着	セクション間の余白がほとんどない	主要なセクション間に48px以上追加します
境界線への依存	あらゆるものをボックスで囲む	境界線ではなく余白を使います
カードの密集	カード同士が接している	カード間に16～24pxの余白を追加します

前提条件

• 余白のシステムが定義されている
• コンテンツが論理的にグループ化されている

依存関係

• apply-consistent-spacing（余白スケールを使用）

Refactoring UI の参考項目

• 「関連情報をグループ化する」
• 「余白を使って関係性を作る」
• 「近接は類似性に勝る」

評価例

入力： タイトル（マージン24px）、ラベル（マージン8px）、入力欄、ラベル（8px）、入力欄、セクション見出し（マージン16px）、ラベル（8px）、入力欄があるフォーム

評価： 一部合格

• ラベルと入力欄の間隔が指定されていない
• セクション見出しが前のセクションに近すぎる
• 8pxで統一されているが、階層が作られていない

推奨事項：

• ラベルと入力欄の間：4px（密接な関係）
• 入力グループの後：24px
• セクション見出しの上マージン：48px（明確な区切り）
• セクション内：フィールド間は16px