framed-grid-layout

フレームグリッドレイアウト

使用する場面

• ページに、セクションの境界が見えるすっきりとした技術的な構造が必要な場合。
• コンテンツを、正確で整理された、エディトリアルな、またはシステムのような印象にしたい場合。
• 細いガイド線の枠、L字型のコーナーブラケット、統一感のある枠付きボックスを使うデザインの場合。

レイアウトルール

1. まず親グリッドを定義し、すべてのセクションが同じ列と行に揃うようにします。
2. ページ全体で、枠線の色、コーナーブラケットの色、間隔のスケールをそれぞれ1種類ずつ使用します。
3. 枠は長方形で正確に保ちます。浮いたカード、柔らかな塊、不均一な余白は避けます。
4. 細い線を使います。1px の枠線、コントラストを抑えた区切り線、控えめなブラケットのマークを使用します。
5. 背景にごく低い不透明度の斜線テクスチャを追加します。表面に張りがあると感じられる程度にとどめます。
6. セクションのパディング、見出し、コントロール、メディアの端を、同じグリッドのリズムに揃えます。
7. 不規則な余白ではなく、一貫した間隔でセクションを分けます。

基本トークン

ニュートラルカラーを使い、テーマに合わせてコントラストを調整します。

:root {
  --fg-bg: #f7f7f4;
  --fg-surface: rgba(255, 255, 255, 0.62);
  --fg-line: rgba(24, 24, 27, 0.14);
  --fg-line-strong: rgba(24, 24, 27, 0.34);
  --fg-texture: rgba(24, 24, 27, 0.035);
  --fg-gap: 16px;
  --fg-pad: clamp(16px, 2vw, 28px);
  --fg-corner: 18px;
}

親グリッド

親グリッドを使って、縦横の配置を揃えます。

.framed-grid {
  min-height: 100vh;
  padding: var(--fg-gap);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      var(--fg-texture) 11px 12px
    ),
    var(--fg-bg);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fg-gap);
}

.framed-grid > * {
  min-width: 0;
}

枠付きセクション

各セクションで、同じボックスモデル、線の太さ、パディングを使用します。

.frame {
  position: relative;
  border: 1px solid var(--fg-line);
  background: var(--fg-surface);
  padding: var(--fg-pad);
  overflow: hidden;
}

.frame + .frame {
  margin-top: 0;
}

L字型コーナーブラケット

背景レイヤーを使い、余分なマークアップを追加せずにブラケットをくっきり表示します。

.frame-brackets {
  background:
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left top / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left top / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right top / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right top / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left bottom / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left bottom / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right bottom / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right bottom / 1px var(--fg-corner) no-repeat,
    var(--fg-surface);
}

セクションのスパン

場当たり的な幅指定ではなく、明示的なグリッドスパンを優先します。

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

@media (max-width: 760px) {
  .framed-grid {
    grid-template-columns: 1fr;
  }

  .span-12,
  .span-8,
  .span-6,
  .span-4 {
    grid-column: 1 / -1;
  }
}

例

<main class="framed-grid">
  <section class="frame frame-brackets span-12">...</section>
  <section class="frame frame-brackets span-8">...</section>
  <aside class="frame frame-brackets span-4">...</aside>
  <section class="frame frame-brackets span-6">...</section>
  <section class="frame frame-brackets span-6">...</section>
</main>

デザイン上の注意点

• 内部のコンテンツが異なる場合も、枠を親グリッドに揃えます。
• 製品のスタイル上必要な場合に限り、角を四角形またはわずかに丸めます。
• 隣接する枠で異なる線の太さを混在させないでください。
• 強いシャドウは追加しないでください。見える枠そのものが構造を示します。
• 斜線テクスチャの不透明度は 0.05 未満に保ちます。
• すべての主要セクションでコーナーブラケットのサイズを統一します。

クイックチェック

• セクションの端が縦横に揃っています。
• すべての枠で枠線、パディング、コーナーブラケットのスケールが統一されています。
• デスクトップとモバイルの両方で、枠間の間隔が一貫しています。
• 斜線テクスチャは、よく見たときにだけ認識できます。
• テクスチャレイヤーを取り除いても、レイアウトが明確に見えます。