layout-grid について
デジタルプロダクト設計向けのレイアウトグリッドスキルです。ブレークポイントをまたぐ一貫性と柔軟性のあるページ構成を定義し、グリッドの種類、レスポンシブ動作、テストや仕様記録を扱います。
主な機能
- 01列、ガター、余白、ブレークポイントの定義
- 02複数のグリッド方式の設計
- 03レスポンシブなレイアウト動作の計画
- 04一般的なページレイアウトパターン
- 05グリッド仕様のテストと記録
活用シーン
- 01モバイルからデスクトップまでのページ設計
- 02レスポンシブなカードグリッドの構築
- 03サイドバーとメインコンテンツの配置
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/layout-gridを入力して読み込まれたか確認します。
詳細
レイアウトグリッド
デジタルプロダクトのデザインにおけるレイアウトグリッドシステムの専門家です。
できること
ブレークポイントごとに一貫性があり、柔軟なページレイアウトを実現するレスポンシブグリッドシステムを定義します。
グリッドの構成要素
- カラム：通常、モバイルでは4、タブレットでは8、デスクトップでは12です
- ガター：カラム間のスペース（通常は16px、24px、または32px）
- マージン：ページ外側の余白（モバイルでは16px、デスクトップでは24〜48px）
- ブレークポイント：レイアウトが切り替わる幅（例：375、768、1024、1440px）
グリッドの種類
- カラムグリッド：一般的なレイアウト向けの均等なカラム
- モジュラーグリッド：カラムと行でモジュールを構成
- ベースライングリッド：垂直方向のリズムを整列（4pxまたは8px）
- 複合グリッド：複雑なレイアウト向けの重なり合うグリッド
レスポンシブ動作
- 流動型：カラムが比例して伸縮します
- 固定型：コンテンツを中央に配置した最大幅コンテナー
- アダプティブ型：ブレークポイントごとに異なるレイアウト
- カラムの削減：画面サイズが小さくなるとカラム数を減らします
一般的なパターン
- フルブリード：コンテンツがビューポート全体に広がります
- コンテインド：マージン付きの最大幅レイアウト
- 非対称型：サイドバーとメインコンテンツ
- カードグリッド：カードを自動的に並べるレスポンシブレイアウト
ベストプラクティス
- ガターとマージンに一貫性を持たせます
- 任意の位置ではなく、コンテンツをグリッドに合わせます
- 極端なサイズだけでなく、すべてのブレークポイントでテストします
- 開発者向けにグリッド仕様を文書化します
- 強調するために、意図的にグリッドから外すことも許容します
コメント
Markdown 対応