バーティカルリズム
問題
AIが生成したレイアウトは、適切なフォントサイズやカラーを使っていても「なんか違う」と感じることがよくあります。その根本原因は垂直方向のスペーシングの不一致です — マージン、パディング、line-heightが、互いに数学的な関係を持たない任意の値で設定されています。margin-bottom: 12pxの見出しの後にmargin-top: 20pxの段落が続き、さらにmargin-bottom: 15pxのリストが続くと、視覚的なノイズが生まれます。人間はレイアウトがなぜ不自然に感じるのかを言語化できなくても、この不一致を感知します。
解決方法
バーティカルリズム（Vertical Rhythm）とは、要素間の垂直方向のスペースを、1つの基本単位からすべてのスペーシングを導出することで一貫させる手法です。この基本単位は通常、本文テキストのline-heightの計算値です。すべてのマージン、パディング、ギャップは、この基本単位の倍数（または端数）で設定します。
基本原則
- ベースのline-heightを定義する（例:
16pxフォントで1.5=24pxのリズム単位） - すべての垂直スペーシングをその単位の倍数で設定する：
24px、48px、72px（または1×、2×、3×） - より狭いスペーシングには端数の倍数を使う：
12px（0.5×）、6px（0.25×）
コード例
基本的なバーティカルリズムシステム
:root {
--font-size-base: 1rem; /* 16px */
--line-height-base: 1.5; /* 24pxのリズム単位 */
--rhythm: calc(var(--font-size-base) * var(--line-height-base)); /* 1.5rem = 24px */
}
body {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
/* すべてのスペーシングをリズム単位から導出 */
h1 {
font-size: 2.5rem;
line-height: 1.2;
margin-block: calc(var(--rhythm) * 2) var(--rhythm);
}
h2 {
font-size: 2rem;
line-height: 1.25;
margin-block: calc(var(--rhythm) * 2) var(--rhythm);
}
h3 {
font-size: 1.5rem;
line-height: 1.3;
margin-block: var(--rhythm) calc(var(--rhythm) * 0.5);
}
p {
margin-block-end: var(--rhythm);
}
ul,
ol {
margin-block-end: var(--rhythm);
padding-inline-start: var(--rhythm);
}
li + li {
margin-block-start: calc(var(--rhythm) * 0.25);
}
blockquote {
margin-block: var(--rhythm);
padding-block: calc(var(--rhythm) * 0.5);
padding-inline-start: var(--rhythm);
}
一貫したバーティカルリズム vs 不一致なスペーシング
リズム単位を使ったスペーシングスケール
:root {
--rhythm: 1.5rem; /* 24pxの基本単位 */
--space-3xs: calc(var(--rhythm) * 0.125); /* 3px */
--space-2xs: calc(var(--rhythm) * 0.25); /* 6px */
--space-xs: calc(var(--rhythm) * 0.5); /* 12px */
--space-sm: calc(var(--rhythm) * 0.75); /* 18px */
--space-md: var(--rhythm); /* 24px */
--space-lg: calc(var(--rhythm) * 1.5); /* 36px */
--space-xl: calc(var(--rhythm) * 2); /* 48px */
--space-2xl: calc(var(--rhythm) * 3); /* 72px */
--space-3xl: calc(var(--rhythm) * 4); /* 96px */
}
Lobotomized Owlによる一貫したフロースペーシング
「Lobotomized Owl」セレクタ（* + *）は、隣接する兄弟要素間に一貫したスペーシングを適用します：
.flow > * + * {
margin-block-start: var(--rhythm, 1.5rem);
}
/* 特定の要素に対するオーバーライド */
.flow > h2 + * {
margin-block-start: calc(var(--rhythm) * 0.5);
}
.flow > * + h2 {
margin-block-start: calc(var(--rhythm) * 2);
}
<article class="flow">
<h2>Section Title</h2>
<p>First paragraph gets half-rhythm spacing from heading.</p>
<p>Subsequent paragraphs get standard rhythm spacing.</p>
<p>Consistent spacing throughout the article.</p>
<h2>Next Section</h2>
<p>More content with predictable spacing.</p>
</article>
グリッドを使ったバーティカルリズム
.content-grid {
display: grid;
row-gap: var(--rhythm);
}
.content-grid > h2 {
margin-block-start: var(--rhythm); /* 見出し前に追加のスペース */
}
AIがよくやるミス
- 数学的な関係のない任意のマージン/パディング値を使う（
margin: 10px、padding: 15px、gap: 22px） - スペーシング単位を一貫なく混在させる — ある場所では
px、別の場所ではrem、また別の場所ではem - 隣接する要素に
margin-topとmargin-bottomの両方を設定し、マージンの相殺（またはflex/gridコンテキストでの非相殺）によってスペースが倍増する - 同一の要素タイプ間で異なるスペーシングを使う — ある段落は
margin-bottom: 16px、次の段落はmargin-bottom: 20px - 見出しは上に余分なスペース、下には少ないスペースが必要で、後続のコンテンツとの視覚的な関連付けを作ることを無視する
- スペーシングスケールを確立せず、各要素に対して場当たり的に値を選ぶ
- flexやgridコンテナではマージンが相殺されないため、スペーシング戦略の調整が必要であることを忘れる
使い分け
バーティカルリズムは、コンテンツの多いレイアウトに適用しましょう：
- ブログ記事やアーティクルページ
- ドキュメンテーションサイト
- 混合コンテンツセクションのあるランディングページ
- メールテンプレート
- 複数のテキスト要素が縦に積み重なるあらゆるレイアウト
リズムの厳密さは状況に応じて変えられます：
- 厳密なリズム: すべての要素がベースライングリッドに揃う。エディトリアル/出版デザインに最適
- 緩やかなリズム: スペーシングは基本単位の倍数を使うが、ベースラインの整列は強制しない。コンポーネントの内部スペーシングが多様なWebアプリケーションに最適
密度の高いUIレイアウト（ダッシュボード、データテーブル、ツールバー）では、スペースの効率的な使用がバーティカルリズムより重要です。リズムの原則は主に読み物中心のコンテンツエリアに適用しましょう。