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 対応