ux-layout-spacing-grids について
ux-layout-spacing-gridsは、インターフェースのレイアウトを作成するAIアシスタント向けの生成型デザインスキルです。プラットフォームやコンテンツの条件を整理してから、スペーシング尺度、グリッド、整列、空間による階層化を適用します。
主な機能
- 01プラットフォーム・密度・コンテンツの前提整理
- 02基準単位とスペーシング尺度の設定
- 03グリッド・整列・余白による構成
- 04ブレークポイントに応じた列と間隔の調整
- 05美観・アクセシビリティ・モバイル監査への引き継ぎ
活用シーン
- 01デスクトップやモバイル画面のレイアウト設計
- 02間隔とサイズのトークンの統一
- 03カード・テーブル・長文コンテンツの配置
- 04レスポンシブ画面の空間的な階層の確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/ux-layout-spacing-gridsを入力して読み込まれたか確認します。
詳細
レイアウト、スペーシング、グリッドのスキル
このスキルの動作(最初にお読みください)
これは生成型の基盤スキルです。レイアウトは、AI アシスタントの出力が密かに素人っぽくなる領域です。Claude は場当たり的なスペーシング(ここでは 13px、そこでは 27px)に手を伸ばし、目分量で余白を付け、配置を混在させ、グリッドなしでコンテンツをキャンバスに放り込み、すべての要素に同じ視覚的な重みを与えるため、何もより重要には読めません。修正は表面的ではなく体系的です — ベース単位、スケール、グリッド、一貫した配置、そしてグループ化と順位付けのために意図的に使われる余白です。
したがって、このスキルは以下をゲートします:
- コンテキストを確立する — プラットフォーム/密度、コンテンツの種類、そしてレイアウトがレスポンシブである必要があるかどうか(これらがベース単位、グリッドの種類、カラムモデルを設定します)。
- 常に真であるコアを適用する — 1 つのベース単位とスペーシング/サイジングのスケール、グリッドへの整列、近接性と余白によるグループ化、そして空間を使った階層の構築。
- コンテキスト依存の判断(ベース単位、グリッドの種類、カラムモデル、サイジングのアプローチ、黄金比/三分割法、トークン層、グリッド破り)をトレードオフとともに提示し、ユーザーに選ばせます。
その後、ux-aesthetics-audit(構成/スペーシング/階層のレビュー)と ux-accessibility-audit(タッチターゲット、テキストの拡大縮小、リフロー)、さらにレイアウトがレスポンシブ/モバイルの場合は ux-mobile-responsiveness-audit に引き継ぎます。
このスキルはまた、空間的な視覚階層、配置、構成の基礎(廃止された visual-hierarchy の生成コンテンツを吸収しました)を担います: サイズ、位置、空間によって生み出される階層、配置と近接性、余白、三分割法/黄金比の配置。タイプスケール/可読性は ux-typography に、強調のための色/コントラストは ux-color に、評価的な構成レビューは ux-aesthetics-audit に委ねます。
ステップ 0 — レイアウトする前にコンテキストを確立する
不明な場合は尋ねてください。回答なしで進める場合は前提を明示してください:
- プラットフォームと密度 — モバイルかデスクトップか、そして UI がどれほど高密度か。高密度/コンパクトなツールは 4px ベースを求めるかもしれませんが、ほとんどのプロダクト UI は 8px を使います。モバイルはマージンを切り詰め、タッチターゲットの間隔を維持しなければなりません。
- コンテンツの種類 — 均一な項目(ギャラリー、ダッシュボードカード)、長文テキスト、混合メディア、または表形式のデータ。これがグリッドの選択(カラムか、モジュラーか、マニュスクリプトか、階層的か)を左右します。
- レスポンシブか固定コンテキストか — ブレークポイントをまたいで適応するのか、制御された環境(キオスク、サイネージ)で動作するのか。レスポンシブにはカラムモデルとブレークポイントが必要です。固定は例外であり、デフォルトではありません。
常に適用するコア(ほぼすべてのレイアウトに当てはまる)
1 つのベース単位とスケールの上に構築する
- 単一のベース単位を選び、すべてのスペーシング/サイジング値をその倍数にします。 8px がデフォルトです(半分/四分の一にきれいに分割できます。Material は 8dp に整列し、Apple は 8/16/32-pt 刻みを使います)。高密度インターフェースには 4px。場当たり的な値は使わない — 13px や 27px の間隔は、非体系的レイアウトの証拠です。
- スケールは単発の値ではなくトークンとして表現します。 数値スケール(
spacing-01…、例えば 4、8、16、24、32、48、64)、任意でセマンティック層(xs/sm/md/lg)を伴います。一貫性があれば 1 つの変更が全体に流れ、当て推量もなくなります。 - スペーシングとサイジングを同じベース単位で統一し、ガター、カラム、コンポーネントサイズがかみ合い、ページが 1 つのシステムとして読めるようにします。
- スケール外の値はフラグ付きの例外として扱います。 どうしてもステップ間の値が必要な場合は、機能的な名前(
card-media-height)または不規則な数値を与え、スケールの一部でないことが明らかになるようにします — 例外が頻発するとシステムは腐敗します。
スペースを使ってグループ化し、順位づけ（階層）する
- 近接によるグループ化。 小さな間隔は関連する要素を結びつけ、大きな間隔はグループを分離します。ユーザーは近くにある項目をひとまとまりとして読み取ります（ゲシュタルトの近接性）。
- ❌ ラベル、そのフィールド、そして次のフィールドの間に均等な間隔を置く — フォームが一枚岩の区別のない積み重ねとして読まれてしまいます。✅ ラベル↔フィールドは詰めて、フィールド間は広めの間隔にします。
- 外部の間隔 ≥ 内部の間隔。 コンポーネントの周囲のスペースが、その内部のスペースより小さいと、無関係な要素が視覚的に融合してしまいます。外側 ≥ 内側を保ちましょう。
- スペースが階層を生みます。 より多くのスペースと目立つ位置（読み順に沿った上部／先頭）は、要素を重要に感じさせます。主要なコンテンツには息をつかせる余地を与え、二次的なコンテンツは切り離して配置します。サイズと組み合わせましょう — ただしスペースだけでもすでに順位づけになります。
- ホワイトスペースは能動的であり、無駄ではありません。 マクロなホワイトスペースはセクションを分離し、ミクロなホワイトスペースは可読性を高め、タッチターゲットを拡大します。すべての隙間を埋めてはいけません。
すべてをグリッドに揃える
- コンテンツをグリッドに配置し、そこに留めます。 カラムがコンテンツを保持し、ガターはその間の隙間、マージンは外側の端です — コンテンツがガターやマージンに位置することは決してありません。等しいガターを保ちましょう。
- 3 つのスペーシングを区別しましょう: マージン（外部／間）、パディング（内部）、ガター（カラム間）。これらを混同することは、不整合のよくある原因です。
- 同種の要素を両軸で一貫して揃えましょう — 画像は画像と、テキストのベースラインはテキストのベースラインと — そうすれば目が予測可能なエッジをたどります。垂直のリズムを保ちましょう。
- グリッドをコンテンツに合わせるのではなく、コンテナをグリッドに合わせましょう。 安定したグリッドと柔軟なコンテナサイズの組み合わせは、予測可能性を保ち、拡張を容易にします。グリッドを破るのは意図的に行うときだけにしましょう（レバーを参照）。
適応させる
- グリッドを中心にレスポンシブを計画しましょう。 構造を再構築するのではなく、ブレークポイントでコンテナのサイズを変更し、カラムを再配置します。標準的なカラム数はデスクトップ 12／タブレット 8／モバイル 4 です。
- テキストに合わせてスペースを拡大縮小しましょう（ダイナミックタイプ）。 ユーザーがテキストを拡大したときは、マージン／パディング／隙間や行の高さも連動して拡大縮小し、階層とタッチターゲットが維持されるようにします。セーフエリアとプラットフォームのマージンを尊重しましょう。
文脈依存の判断（表面化させ、自動適用しない）
それぞれについてトレードオフと Step 0 に紐づく推奨を提示し、ユーザーに選ばせます。すべてのグリッドタイプと比率システムを一度に適用することが失敗パターンです。
| 判断 | 適用する場合 | 避ける／適応させる場合 | デフォルトの推奨 |
|---|---|---|---|
| 基本単位（8px vs 4px） | ほとんどのプロダクト UI には 8px、より細かい制御が必要な高密度・データ重視のインターフェースには 4px | 両方を混在させる、または便宜を図ってグリッドから外れる | 8px を基本とし、密度が本当に必要とする箇所だけ 4px に落とす |
| グリッドタイプ | 一般的なレイアウトにはカラム、ギャラリー／テーブル／eコマースにはモジュラー（カラム × 行）、長文にはマニュスクリプト、コンテンツ主導／エディトリアルにはヒエラルキカル、メディア＋タイポグラフィにはインテグレーテッド（2つのグリッド） | シンプルなコンテンツにモジュラーグリッドを強制する（見せかけの厳密さ）、またはダッシュボードにマニュスクリプトグリッドを使う | デフォルトはカラムグリッド、均一なカード／データレイアウトにはモジュラー |
| シンメトリック vs アシンメトリック | 均一で等しい優先度のコンテンツ（落ち着き、クラシック）にはシンメトリック、強調と動きを加えるにはアシンメトリック | 読みのパターンを崩して混沌とするアシンメトリー | 強調／コントラストが必要でない限りシンメトリック。比率は一貫させる |
| カラムモデル（固定／フルイド／レスポンシブ） | クロスデバイスにはレスポンシブ（リサイズ＋ブレークポイント）、滑らかなスケーリングにはフルイド（%）、管理された環境のみ固定 | オープンウェブでの固定ピクセルレイアウト（小さい画面では横スクロール、大きい画面では無駄な余白） | デフォルトはレスポンシブ。ブレークポイントは事前に計画する |
| サイジングのアプローチ | 均一性が必要なボタン／入力／アイコンにはエレメントファースト（固定寸法）、テキストブロック、テーブル行、予測不能なコンテンツにはコンテンツファースト（固定パディング、サイズが伸びる） | 変化するコンテンツに高さを固定する（クリッピング／オーバーフロー） | インタラクティブなプリミティブにはエレメントファースト、コンテンツコンテナにはコンテンツファースト |
| 黄金比／三分割法 | フォーカル要素（ヒーロー、CTA）をアクティブゾーンの交点に配置する。調和のとれた比率を導出する | コンテンツのニーズや基本単位のスケールを上書きする命令として扱う | フォーカルポイントの配置に使う。スペーシングは単位スケールに保つ |
| セマンティックトークン層 | 生の数値より xs/sm/md エイリアスが役立つ、より大きなチーム／デザインシステム | エイリアス層がオーバーヘッドになる小さなプロジェクト | 数値スケールは常に。システムにはセマンティックエイリアスを追加する |
| グリッドを破る | 注意を引くために意図的にヒーロー／要素をはみ出させる | 偶然に、またはグリッドが意味をなさなくなるほど頻繁に破る | 意図的に、まれに破る。それ以外はすべて整列させる |
結果を検証する (オーケストレーション)
引き継ぎでは、各レンズをインストール可能なスキルの
nameで指定します。そのスキルがインストールされている場合にのみ呼び出してください。インストールされていない場合でも、このスキル自体の中核にこれらのルールがすでに含まれているため、ブロックせずにそのまま進めてください。
レイアウトを作成または修正した後は、完了と宣言するのではなく、結果を監査レンズに引き継いでください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md で設定するか、全体を ux-design-review 経由でルーティングしてください。ここでは、Tier A はなく、aesthetics と accessibility は Tier B (オファー)、mobile-responsiveness は Tier B (オファー、モバイルのみ) です — 既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用状況に絞り込まれます。mobile-responsiveness はモバイルでのみ適用されます。ユーザーが特定の目的でこのスキルを呼び出した場合は、そのスコープを尊重してください。
ux-aesthetics-audit(Tier B — オファー。デザインシステムがある場合は抑制) — このスキルが目指して生成する構成レビュー: スペーシングは一貫してスケール上にあるか、明確な階層があるか、整列はきれいか、余白はバランスが取れているか (窮屈でも広すぎでもないか)？ 美学は構成/階層の評価的側面を担います。ux-accessibility-audit(Tier B — オファー。デザインシステムがある場合は絞り込み) — スペーシングとサイジングは適切なタッチターゲットを保っているか、レイアウトはより高いズーム/テキストサイズでも損失なくリフローするか、空間的なグループ化は支援技術にとっても依然として意味をなすか？ux-mobile-responsiveness-audit(Tier B — オファー。モバイルでのみ適用) (レスポンシブ/モバイルの場合) — マージン、ガター、カラム数はブレークポイント間でクリーンに適応するか、スペーシングはダイナミックタイプに合わせてスケールするか？
スコープと構成 (docs/orchestration-policy.md §9 準拠): デザインシステムがある場合は継承する (ゼロから構築する場合のみ) — ux-typography はタイプスケールと読みやすさを担い、ux-color は色に基づく強調/コントラストを担います。デザインシステムが存在する場合は、両方ともそのトークンから取得してください。階層はスペースとタイプと色を組み合わせて構築されます。監査で競合が表面化した場合は、目的に向けて解決してください: レイアウトはコンテンツをスキャン可能で順位付けされたものにするために存在します — スペーシングが恣意的である、何もグリッド上にない、すべてが同じ重みを持つ、といった場合は、構造が未完成です。
よくある do/don't パターン
| ❌ Don't | ✅ Do |
|---|---|
| 恣意的な値を使う (13px、27px) | すべての値を単一の基本単位 (8px/4px) とトークンスケール上に置く |
| 目分量でパディングとスペーシングを行う | スペーシング/サイジングトークンを定義して再利用する |
| 関連する項目と無関係な項目を同じスペースで配置する | 近接性: グループ内は密に、グループ間はより広く |
| 外側のスペースを内側のスペースより小さくする | グループが融合しないよう、外部スペース ≥ 内部スペースを保つ |
| グリッドなしでコンテンツをキャンバスに置く | コンテンツをカラムに整列させ、ガターとマージンから外しておく |
| 整列を混在させる / 端がギザギザになる | 類似した要素を両軸で一貫して整列させる |
| すべての要素に同じ重みを与える | スペース + 位置 (およびサイズ) を使って重要度を順位付けする |
| すべての隙間を埋める | 余白をアクティブなものとして扱う — グループ化、呼吸の余地、タッチターゲット |
| ブレークポイントごとにグリッドを再構築する | 安定したグリッドにコンテナサイズを適応させ、ブレークポイントでカラムをリフローする |
| どこでも単一のグリッド/比率システムを強制する | コンテンツに合ったグリッドタイプを選び、黄金比は焦点の配置にのみ用いる |
| レイアウトを未確認のまま出荷する | 美学 + アクセシビリティ (+ モバイルレスポンシブ) に引き継ぐ |