designing-layouts

レイアウトシステムとレスポンシブデザイン

目的

このスキルでは、最新の CSS 技術を使用してレスポンシブなレイアウトシステムを作成するための包括的なガイダンスを提供します。グリッドシステム、フレックスボックスのパターン、コンテナクエリ、スペーシングシステム、モバイルファーストの設計戦略を取り上げ、デバイスを問わずシームレスに適応する柔軟でアクセシブルなインターフェースの構築を支援します。

使用するタイミング

次のような場合に、このスキルを呼び出してください。

• サイドバーとヘッダーを備えたレスポンシブな管理ダッシュボードを構築する
• コンテンツカードやギャラリー向けのグリッドベースのレイアウトを作成する
• Masonry または Pinterest 風のレイアウトを実装する
• サイズ変更可能なパネルを備えた分割ペインインターフェースを設計する
• レスポンシブブレークポイントシステムを確立する
• ナビゲーション領域とコンテンツ領域を備えたアプリケーションシェルを構成する
• モバイルファーストのレスポンシブデザインを構築する
• 柔軟なスペーシングシステムとコンテナシステムを作成する

レイアウトパターン

グリッドシステム

構造化された2次元レイアウトには、デザイントークンを使用した CSS Grid を使います。

12カラムグリッド：

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
}

.col-span-6 { grid-column: span 6; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }

自動調整されるレスポンシブグリッド：

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--grid-gap);
}

複雑なグリッドレイアウトや高度なパターンについては、references/layout-patterns.md を参照してください。

フレックスボックスのパターン

1次元のレイアウトや配置の制御に使用します。

Holy Grail レイアウト：

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail__body {
  flex: 1;
  display: flex;
}

.holy-grail__nav {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

.holy-grail__main {
  flex: 1;
  min-width: 0; /* Prevent overflow */
}

.holy-grail__aside {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

スティッキーフッターや中央揃えなど、その他のフレックスボックスのパターンについては、references/css-techniques.md を参照してください。

コンテナクエリ

ビューポートではなくコンテナのサイズに基づいて適応する、コンポーネント単位のレスポンシブデザインに使用します。

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
    gap: var(--spacing-lg);
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr auto;
  }
}

コンテナクエリは、最新のすべてのブラウザーで本番環境に対応しています（2025年）。詳しい使い方とフォールバック戦略については、references/responsive-strategies.md を参照してください。

レスポンシブブレークポイント

セマンティックなブレークポイントを使用し、モバイルファーストのアプローチを採用します。

/* Mobile-first breakpoints using design tokens */
@media (min-width: 640px) {  /* sm: Tablet portrait */
  .container { max-width: 640px; }
}

@media (min-width: 768px) {  /* md: Tablet landscape */
  .container { max-width: 768px; }
}

@media (min-width: 1024px) { /* lg: Desktop */
  .container { max-width: 1024px; }
}

@media (min-width: 1280px) { /* xl: Wide desktop */
  .container { max-width: 1280px; }
}

@media (min-width: 1536px) { /* 2xl: Ultra-wide */
  .container { max-width: 1536px; }
}

流動的なタイポグラフィや高度なレスポンシブ技術については、references/responsive-strategies.md を参照してください。

スペーシングシステム

デザイントークンを使用して、一貫性のあるスペーシングを実装します。

/* Base unit: 4px or 8px */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
}

/* Apply systematically */
.section { padding: var(--section-spacing) 0; }
.container { padding: 0 var(--container-padding-x); }
.card { padding: var(--spacing-lg); }
.stack > * + * { margin-top: var(--spacing-md); }

CSS フレームワークとの統合

Tailwind CSS

ユーティリティーファーストのアプローチとカスタム設定を使用する場合：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        'xs': 'var(--spacing-xs)',
        'sm': 'var(--spacing-sm)',
        'md': 'var(--spacing-md)',
        'lg': 'var(--spacing-lg)',
        'xl': 'var(--spacing-xl)',
      },
      screens: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      }
    }
  }
}

Tailwind のパターンと最適化については、references/library-guide.md を参照してください。

使用方法

1. レイアウト要件を定義する

必要なレイアウトの種類とレスポンシブな動作を決定します。

2. レイアウト方法を選択する

• CSS Grid：2次元レイアウト、複雑なグリッド
• Flexbox：1次元レイアウト、配置
• コンテナクエリ：コンポーネント単位のレスポンシブデザイン

3. デザイントークンを使用して実装する

一貫性のあるスペーシング、ブレークポイント、サイズ設定には、skills/design-tokens/ のデザイントークンを使用します。

4. 設定を生成する

レスポンシブブレークポイントの場合：

node scripts/generate_breakpoints.js --approach mobile-first

流動的なタイポグラフィのスケールの場合：

node scripts/calculate_fluid_typography.js --min-vw 320 --max-vw 1920

5. アクセシビリティを検証する

セマンティック HTML とランドマーク領域を確認します。

node scripts/validate_layout_accessibility.js path/to/component.tsx

6. レスポンシブな動作をテストする

レスポンシブプレビュー用ツールと実機を使用して、さまざまなデバイスサイズでテストします。

スクリプト

• scripts/generate_breakpoints.js - レスポンシブブレークポイントシステムを生成
• scripts/calculate_fluid_typography.js - 流動的なタイポグラフィのスケールを計算
• scripts/validate_layout_accessibility.js - セマンティック HTML と ARIA ランドマークを検証

リファレンス

• references/layout-patterns.md - 一般的なレイアウトパターン（サイドバー、Masonry、分割ペイン）
• references/responsive-strategies.md - モバイルファーストデザインとレスポンシブ技術
• references/css-techniques.md - 最新の CSS 機能（Grid、Flexbox、コンテナクエリ）
• references/accessibility-layouts.md - セマンティック HTML と ARIA ランドマーク
• references/library-guide.md - フレームワークとの統合（Tailwind、styled-components）
• references/performance-optimization.md - CSS のパフォーマンスとレイアウトスラッシング

例

• examples/admin-layout.tsx - サイドバーを備えた管理ダッシュボードの完全な例
• examples/responsive-grid.tsx - 自動レスポンシブグリッドシステム
• examples/masonry-layout.tsx - Pinterest 風の Masonry グリッド
• examples/split-pane.tsx - サイズ変更可能な分割ペインインターフェース

Assets

• assets/breakpoint-config.json - Standard breakpoint configurations
• assets/layout-templates.json - Common layout templates
• assets/spacing-scale.json - Spacing system configurations