spatial-rhythm について
レイアウトに一貫した間隔、密度、リズム、余白の原則を適用する空間デザインスキルです。視覚構造をコンテンツや用途に合わせるための指針を示します。
主な機能
- 01一貫した間隔スケールの適用
- 02距離による要素関係の表現
- 03用途に応じた密度の調整
- 04コンテンツに合うリズムの設定
- 05余白をデザイン素材として扱う
活用シーン
- 01プロダクトの間隔ルール策定
- 02データ中心画面の密度調整
- 03ゆとりのあるコンテンツレイアウト作成
- 04リストやテーブルのグループ分け改善
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/spatial-rhythmを入力して読み込まれたか確認します。
詳細
空間のリズム
空間は余った部分ではありません。積極的に活用するデザイン素材です。
使い方
/spatial-rhythmこの会話に空間デザインの制約を適用します。
制約
余白のシステム
- 必ず一貫した余白のスケール（4、8、16、24、32、48、64など）を使用します。
- 必ず近接性で関係性を示します。関連するものは近くに、関連しないものは離して配置します。
- 必ずコンテンツ量に応じた余裕のある外側のマージンを確保します。
- 任意の余白値は決して使用しません。スケールにない値は使いません。
密度のルール
- 必ず用途に応じて密度を調整します。データツールは高密度でも構いませんが、一般消費者向け製品にはゆとりが必要です。
- 高密度が適しているのは、ユーザーがデータを比較する場合、速度が重要な場合、ユーザーが経験豊富な場合、長時間利用する場合です。
- 低密度が適しているのは、コンテンツを読み取る場合（ざっと確認するのではなく）、ユーザーが初めて利用する場合、集中が重要な場合です。
- どこでも同じ密度の考え方を適用してはいけません。設定ページとマーケティングページでは、異なる印象にする必要があります。
リズム
- 規則的なリズム（均等な間隔、一貫したサイズ）は整然とした印象になります。データ、表、リストに適しています。
- シンコペーションのあるリズム（おおむね規則的で、意図的な変化を加える）は動きのある印象になります。エディトリアルコンテンツやマーケティングに適しています。
- 必ずリズムをコンテンツの雰囲気に合わせます。不規則なリズムの ToDo アプリは混乱を招きます。
ホワイトスペース
- ゆとりのあるマージンは自信を伝えます（「このコンテンツ自体に語らせることができます」）。
- 優れたデザインの製品の多くでは、必ずレイアウト全体の40～60％をホワイトスペースに充てます。
- ホワイトスペースを無駄な空間として扱ってはいけません。要素を分け、グループ化し、強調し、呼吸できる余地を作ります。
アンチパターン
- ほぼ同じでも一致しない余白値（16pxの隣に15pxを配置するなど）
- コンテンツに余裕を持たせず、「空間を埋める」ために詰め込むこと
- 要素同士の関係性にかかわらず、すべての要素間に同じ余白を設けること
コメント
Markdown 対応