layout-composition

レイアウトと構成

モダンな CSS を使って、構造的で視覚的に魅力のあるレイアウトを構築します。

前提条件

• .agents/design-context.md（design-contextを参照）を読み、スペーシングシステム（4px／8pxを基準）、角丸、スタイルの方向性、プラットフォームの優先順位を確認します。以下のスペーシングトークンはデザインシステムのスケール（--space-N = N × 4px）に従います。色には color-palette の共有プリミティブ --brand-*／--gray-* を使用します。
• コンテンツの種類（テキスト中心、メディア中心、ダッシュボード、マーケティング）を特定し、適切なパターンを選択します。

---

ステップ 1：CSS Grid パターン

12 カラムグリッド

.grid-12 {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem; max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem;
}
.col-full    { grid-column: 1 / -1; }
.col-half    { grid-column: span 6; }
.col-third   { grid-column: span 4; }
.col-quarter { grid-column: span 3; }
@media (max-width: 768px) { .grid-12 > * { grid-column: 1 / -1; } }

Auto-Fit グリッド（メディアクエリ不要）

.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

名前付きグリッドエリア

.page-layout {
  display: grid; grid-template-columns: 250px 1fr 300px;
  grid-template-rows: auto 1fr auto; min-height: 100dvh;
  grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";
}
.header { grid-area: header; } .sidebar { grid-area: sidebar; }
.main { grid-area: main; } .aside { grid-area: aside; } .footer { grid-area: footer; }
@media (max-width: 1024px) {
  .page-layout { grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "aside" "footer"; }
}

---

ステップ 2：Flexbox レイアウトパターン

ナビゲーションバー

.navbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; gap: 2rem; }

コンテンツを中央に配置したページ

.centered-page { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; }
.centered-page main { flex: 1; width: 100%; max-width: 65ch; padding: 2rem; }

高さを揃えたカード行

.card-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.card-row > * { flex: 1 1 260px; display: flex; flex-direction: column; } /* wraps instead of squashing on mobile */
.card-row .card-footer { margin-top: auto; }

---

ステップ 3：Bento グリッドレイアウト

基本的な Bento

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1rem; }
.bento-large { grid-column: span 2; grid-row: span 2; }
.bento-wide  { grid-column: span 2; }
.bento-tall  { grid-row: span 2; }

特徴を紹介する Bento

.bento-showcase {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 180px); gap: 1rem; padding: 1rem;
}
.bento-showcase > :nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.bento-showcase > :nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 2; }
.bento-showcase > :nth-child(5) { grid-column: 1 / 3; grid-row: 3 / 5; }
.bento-showcase > * { border-radius: 1rem; padding: 1.5rem; overflow: hidden; background: var(--gray-100); }
@media (max-width: 768px) {
  .bento-showcase { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento-showcase > * { grid-column: auto !important; grid-row: auto !important; }
}

Bento カードのスタイル設定

.bento-card { border-radius: 1.25rem; padding: 2rem; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.bento-card--gradient { background: linear-gradient(135deg, var(--brand-100), var(--brand-50)); }
.bento-card--dark { background: var(--gray-900); color: var(--gray-50); }

---

ステップ 4：デザイン要素としての余白

スペーシングスケール

デザインシステムスキルと同じスケールです：--space-N = N × 4px。プロジェクトに既存のものがある場合は再定義しないでください。

:root {
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
}
section { padding-block: clamp(4rem, 8vw, 8rem); }
.hero { padding-block: clamp(6rem, 12vw, 12rem); }

密度のガイドライン

• 密度の高い UI（ダッシュボード）：間隔 4～8px、パディング 12～16px
• 標準的な UI（アプリ）：間隔 8～16px、パディング 16～24px
• マーケティング／エディトリアル：間隔 16～32px、セクションのパディング 32～64px
• 高級／プレミアム：すべてを 2 倍にする

---

ステップ 5：視覚的階層を作るテクニック

効果の高い順（強いものから弱いもの）：

1. サイズ -- 最も重要な要素を最大にする
2. 色とコントラスト -- 高いコントラストで視線を引きます。CTA にはブランドカラー、二次要素には控えめなグレーを使用します
3. ウェイトと書体 -- 太字で重要性を示します
4. 位置 -- 左上が最初に読まれます（LTR）。重要なコンテンツはファーストビューに配置します
5. 近接性とグループ化 -- 関連する項目は近くに配置し、関連しない項目は明確に分離します
6. ネガティブスペース -- 余白によって視覚的な重みが増します

セクションヘッダーのパターン

.section-header { max-width: 600px; margin-inline: auto; text-align: center; margin-bottom: var(--space-16); }
.section-label { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-600); margin-bottom: var(--space-3); } /* 600: small text needs 4.5:1 */
.section-title { font-size: var(--text-4xl); font-weight: 800; line-height: 1.1; color: var(--gray-900); margin-bottom: var(--space-4); }
.section-description { font-size: var(--text-lg); color: var(--gray-500); line-height: 1.6; }

---

ステップ 6：読み取りパターン

F パターン（テキスト中心のページ）

ユーザーは上部を横方向に読み、中ほどを少し横方向に読み、その後左側を下方向にたどります。重要な情報は最初の 2 段落に配置し、セクションは太字のキーワードで始め、見出しは左揃えにします。

Z パターン（ランディングページ）

ユーザーは、左上のロゴ > 右上のナビゲーション > 中央の CTA への対角線 > 下部の順に読みます。この対角線に沿ってランディングページを構成します。

---

ステップ 7：三分割法と非対称レイアウト

焦点となる要素は、ど真ん中ではなく三分割線の交点に配置します。少し中心からずらすと、より動きのある印象になります。

.hero-content { display: grid; grid-template-columns: 2fr 1fr; align-items: center; min-height: 80vh; }

非対称な分割（60/40）

.asymmetric { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: center; }
.asymmetric--reversed { grid-template-columns: 1fr 1.5fr; }

オフセットグリッド

.offset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.offset-grid > :nth-child(3n+2) { transform: translateY(3rem); }
.offset-grid { padding-bottom: 3rem; } /* transform doesn't reserve space */
@media (max-width: 768px) { .offset-grid { grid-template-columns: 1fr; } .offset-grid > * { transform: none; } }

---

ステップ 8：レスポンシブ戦略

スタックパターン（自動的にレスポンシブ対応）

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

リフローパターン

.reflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .reflow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .reflow { grid-template-columns: 1fr; } }

---

ステップ 9：コンテナクエリレイアウト

.card-container { container-type: inline-size; container-name: card; }
.card { display: flex; flex-direction: column; }
@container card (min-width: 500px) {
  .card { flex-direction: row; align-items: center; gap: 2rem; }
  .card-image { flex: 0 0 200px; }
}

---

ステップ 10：メディアの一貫性を保つアスペクト比

.thumbnail { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.75rem; width: 100%; }
.avatar { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
/* Common ratios: 1:1 avatars, 4:3 cards, 16:9 video, 3:2 photos, 21:9 cinematic */

---

クイックリファレンス：レイアウト選択ガイド

コンテンツの種類	推奨レイアウト
ランディングページ	1 カラム + 全幅セクション
ブログ／記事	中央揃えの 1 カラム、最大 65ch
ダッシュボード	12 カラムグリッドまたはサイドバー + メイン領域
特徴の紹介	Bento グリッド
カード一覧	Auto-Fit グリッド
ポートフォリオ	Masonry またはオフセットグリッド
ドキュメント	サイドバーナビゲーション + 中央揃えのコンテンツ
E コマースの商品	非対称な 2 カラム（画像 + 詳細）

---

レイアウトを確認する

実際に確認していないレイアウトを公開してはいけません。ページをレンダリングして3種類の幅でスクリーンショットを撮り、Readで各画像を確認してください。

for w in 375 768 1440; do
  npx playwright screenshot --full-page --viewport-size=$w,900 "file://$PWD/index.html" layout-$w.png
done

各スクリーンショットで、セクションごとに明確な焦点が1つあること、左端とガターが一貫していること、横方向にはみ出していないこと（ブラウザーで document.documentElement.scrollWidth > innerWidth が false であること）、モバイルで適切な順序で積み重なっていること（DOMの順序が読み上げ順序と一致すること。キーボードのTab順序を損なうような order／グリッド配置による視覚的な並べ替えはしないこと）、グリッドの最後の行にカードが1枚だけ取り残されていないことを確認してください。問題がなくなるまで修正して、スクリーンショットを撮り直してください。