apply-consistent-spacing

スキル：一貫性のあるスペーシングを適用する

目的

体系的なスペーシングスケールを使用してリズムを作り、関連する要素をまとめ、異なるセクションを区切ります。まずは余白を広めに取り、必要に応じて減らします。

種類

生成＋評価

入力

• UI レイアウトまたはコンポーネント構造
• コンテンツのグループ分け（何をまとめるか）
• 希望する密度（コンパクトか、ゆったりか）
• 基本単位（デフォルト：16px）

出力

• スペーシングスケールの仕様
• 各要素のマージン／パディング値
• 既存のスペーシングの合格／不合格判定

実行する変換

空間的な関係を体系的なスペーシングスケールに割り当て、値の間に最低25％の差を設けることで、明確なグループ分けと十分な余白を確保します。

判定基準

合格（良好なスペーシング）

• 値の間に最低25％の差を設けた体系的なスケールを使用している（12px → 16px → 24px → 32px）
• 関連する要素間の間隔が狭い（グループ内は4～16px）
• 関連しないセクション間の間隔が広い（グループ間は24～64px）
• グループ内よりもグループの周囲に広い余白がある（曖昧なスペーシングを避ける）
• 内部パディングに一貫性がある（カード、ボタン、入力欄）
• 余白によってゆとりが生まれている（画面幅全体を埋めていない）
• 区切りにボーダーではなく余白を使用している

不合格（不適切なスペーシング）

• 体系的なルールのない任意の値を使用している（13px、27px、41px）
• 値が近すぎる（差が25％未満で、見分けがつかない）
• 関連する要素が離れすぎている（まとまりが弱くなる）
• 関連しない要素が近すぎる（関係が曖昧になる）
• どこでも間隔が同じ（グループ内とグループ間が同じ）
• 広いキャンバスを埋めるためにコンテンツを不必要に引き伸ばしている
• 余白で十分な箇所にボーダーを使用している

スペーシングスケール

体系的なスケール（最小25％の差）

基本単位：16px（ブラウザーのデフォルト）

4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px

この値を使用する理由：

• 4px → 8px ＝ 100％の差（小さい値では、より大きな差が必要です）
• 8px → 12px ＝ 50％の差
• 12px → 16px ＝ 33％の差
• 16px → 24px ＝ 50％の差
• 24px → 32px ＝ 33％の差
• 32px → 48px ＝ 50％の差
• 48px → 64px ＝ 33％の差
• 64px → 96px ＝ 50％の差

よくある使用パターン

スペーシング	用途
4px	アイコン間のすき間、狭い内部パディング
8px	小さなコンポーネント間のすき間、狭いボタンのパディング
12px	入力欄のパディング、コンポーネント内部のスペーシング
16px	標準的なすき間、カードのパディング
24px	セクション内のパディング、広めのすき間
32px	大きなセクション間の区切り
48-64px	ページ内セクションの区切り
96px	ヒーローセクション、ページ内の大きな区切り

近接の原則

• 近くにある要素は、関連しているように見えます
• 離れている要素は、関連していないように見えます
• グループ内よりもグループの周囲に広い余白を設けます
• ボーダーを使わず、スペーシングで関係性を示します

主な原則

1. 余白を取りすぎるところから始める

見た目がよくなるまで余白を追加するのではなく、まず余白を大きく取り、適切になるまで減らします。

理由： 最低限のゆとりしかない要素は、「積極的に悪くはない」ものの、優れた見た目にはなりません。余白を多めに取るところから始めると、最終的なデザインに十分な余白を確保できます。

2. 曖昧なスペーシングを避ける

グループ全体の周囲の余白をグループ内の余白よりも広くします。

例 — フォームのラベル：

• ❌ ラベルの下マージン：12px、入力欄の下マージン：12px（同じ値だと関係が曖昧）
• ✅ ラベルの下マージン：4px、入力欄の下マージン：24px（グループ内より周囲のほうが広く、関係が明確）

3. 画面全体を埋めない

キャンバスに1200～1400pxの幅があるからといって、コンテンツをその幅いっぱいに広げる必要はありません。

• 要素には必要な分だけスペースを与えます
• 余裕があれば、余白として残します
• ナビゲーションが1200pxでも、段落の最大幅を600pxにしてかまいません
• 小さなインターフェースをデザインする場合は、キャンバスを小さくします

4. ボーダーより余白

要素を区切る際にボーダーを使う代わりに、次の方法を使用します。

• グループ間のスペーシングを広げる
• 背景色を変える
• さりげないボックスシャドウを使う（ボーダーより目立ちにくい）

使用するビジュアル／UXのシグナル

1. 近接性：要素が近いほど、関連性が高くなります
2. 曖昧さのギャップ：グループ内よりグループ間の余白を大きくします
3. 呼吸できる余白：ゆとりのある余白で、すっきりと洗練された印象になります
4. キャンバスの活用：画面いっぱいに引き伸ばさず、必要なスペースだけを使います

よくある失敗例

失敗	説明	修正方法
場当たり的な値	ここでは15px、あちらでは17px	一貫したスケールだけを使います
グループ分けが不明確	グループ内とグループ間の余白が同じ	グループ間の余白を大幅に広くします
曖昧な余白	ラベルと入力欄のマージンが同じ	グループ内の余白を減らし、グループ間の余白を増やします
ボーダーへの依存	余白の代わりにボーダーを使う	間隔を広げ、ボーダーを削除します
キャンバスを埋める	コンテンツを不必要に1200pxまで引き伸ばす	必要なスペースだけを使い、残りは余白にします
余白が足りない	見栄えが悪くならない程度の余白だけを加える	まず多めに設け、適切な状態になるまで減らします
パディングが不統一	ボタンによって8pxだったり12pxだったりする	スケールの値を1つ選び、すべてに適用します

前提条件

• 関連性に基づいてコンテンツがグループ化されている
• 視覚的な階層が確立されている

依存関係

• establish-visual-hierarchy（余白によって階層を強調します）
• group-related-elements（近接性によって関連性を示します）

Refactoring UIの参考資料

• 「まずは余白を多めに設ける」
• 「余白とサイズのシステムを確立する」（最低25％の差をつける）
• 「曖昧な余白を避ける」
• 「画面全体を埋めない」
• 「ボーダーを減らす」
• 「余白は加えるのではなく、取り除くもの」

評価例

入力： タイトル（margin-bottom: 16px）、ラベル（margin-bottom: 12px）、入力欄（margin-bottom: 12px）、次のラベル（margin-top: 12px）があるフォーム

評価： 不合格 — 余白が曖昧です

• ラベルから入力欄まで：12px
• 入力欄から次のラベルまで：12px
• グループ分けが明確でないため、どのラベルがどの入力欄に対応するのかユーザーには分かりません

推奨事項：

• タイトルのmargin-bottom：24px（セクションを分けます）
• ラベルのmargin-bottom：4px（入力欄と密接に結び付けます）
• 入力欄のmargin-bottom：24px（次のグループとの間を明確に分けます）
• 結果：グループ内（4px）≪ グループ間（24px）＝ 関連性が明確になります

変更前：

Label A
[Input A]
Label B    <- Ambiguous: belongs to A or B?
[Input B]

変更後：

Label A
[Input A]

Label B    <- Clearly belongs to B
[Input B]