ページレイアウトの設計は何をしますか？

概要

ほとんどのページは、アイデアではなくリズムで失敗します。タイポグラフィは問題なく、色も問題ないのに、テンプレートのように見えてしまうのは、垂直方向のスペーシングがセクションごとに決定され、何も揃っていないからです。

中核原則: 何かをスタイリングする前に、1つのスペーシングスケール、1つのタイプスケール、1つのセクションシステムを選び、それ以外の値は決して導入しない。

セクションシステム

コンテンツセクションは、限られた値セットを共有します。ピン留めされたシーンは例外です。

部分	ルール
セクションタイトル	すべてのコンテンツセクションで1つのサイズ（例: デスクトップで48、スマートフォンで38）
左端	ナビロゴの端と揃った1つの端。高さに合わせるスケールは端を移動させるため、測定すること
ラベル	タイトルの上に1つのピルスタイル
カード	1つの半径、1つのヘアライン、1つのティント。ボーダーとシャドウと塗りつぶしを同時に使用しない
エンドカード	タイトルはグリッド行に、ボタンは次の行に、余計な文はなし

ピン留めおよびスクラブされたシーンは、独自のステージサイズを保持します。これらはビューポートの高さに合わせて設計されており、ホワイトスペースはスクロール用の滑走路です。ピン留めされたステージを縮小する場合は、そのパーセンテージで位置指定されているすべての要素を再アンカーせずに行わないでください。

各セクションが独自のタイトルサイズ、左端、カードを持っているページは、寄せ集めのように見えます。この表はそれを防ぎます。

スペーシングリズム

スケールは一度決めてください。4pxベースの等比ランプですべてをカバーできます:

0.4  0.8  1.6  2.4  3.2  4.8  6.4  8  12  16 rem

すべてのセクション間スペーシングは、--sec（セクション間）と--blk（セクション内ブロック間）の2つのトークンで駆動します。ルーズなページをタイトにするには、40個の値を変更するのではなく、2つの数値を変更するだけです。あるページでは、デスクトップで48と40単位、スマートフォンで36と28を使用したところ、ドキュメントが約10%縮小しました。

リズムをタイトにしても、要素サイズは変わりません。 カード、タイポグラフィ、ロゴ、ボタン: 設計されたままにしてください。新旧のビルド間でコンポーネントサイズを比較し、それを証明してください。

セクションパディングは、ページが崩れる原因です。すべての接合部を監査してください。セクションごとではありません:

接合部	合計ギャップ	読み取られる意味
無関係な2つのセクション	200-240px	別の章
上のセクションの続きであるブロック	40-80px	1つの章、2つの部分
全幅メディアとセクションの接合部	0	カット

上のセクションの padding-bottom と下のセクションの padding-top の合計を測定してください。120/60、64/20、24/0、0/120 というパディングを持つページは、180、84、24、120 という論理的な根拠のないギャップを生み出します。ユーザーはそれを名指しできなくても、だらしなさとして感じます。

単一色の背景で約240pxを超えるギャップには、何かが必要です。ギャップを狭めるか、CTAを配置してください。

ファーストビュー

ヒーローは、次のストリップが最初の画面に表示されるようにサイズ設定してください。clamp(620, 100svh - 150, 900) 単位は、証拠となるストリップを1回のスクロールで表示させます。ビューポートを埋め尽くし、その下に何も表示しないヒーローは、ページが依存する証拠を隠してしまいます。

共有コンポーネントはサイトに属する

ライブサイトに存在するナビ、フッター、またはボタンは、そのデザインです。新しいページでスタイルを変更しないでください。新しいページで異なって見える場合、ほぼ常に原因はページレベルのオーバーライドがリークしていることです。ライブサイトに対して計算されたスタイルを比較し、オーバーライドを削除し、リークするブレークポイントにスコープしてください。

タイプスケール

最大2つのファミリー: 1つは表示用、もう1つはテキスト用。表示用書体の数字はデザインとして読まれますが、プレーンな本文書体の数字はデータとして読まれます。

他の数字と並んでいる数字には、必ず font-variant-numeric: lining-nums tabular-nums を設定してください。これがないと、「3,000」と「500,000+」が揃わず、その理由がわからなくなります。

ネガティブな文字間隔はサイズに応じて拡大縮小します: 表示サイズではおおよそ -0.02em、本文では 0、大文字のアイブローでは正の 0.08em。

デザインのタイプ幅と正確に一致させてください。光学サイズの落とし穴については、extracting-figma-truth を参照してください。

カードとグリッド

最も一般的なカードのバグは、不均一なコンテンツが不均一なカードを生成することです。

修正前	修正後	理由
グリッド内で `.card { padding: 2rem }`	グリッドに `align-items: stretch` を追加し、カードに `height: 100%` を追加	そうしないと、カードは自身のコンテンツと同じ高さになる
コンテンツが上から下に流れる	一番下に配置する要素に `margin-top: auto` を設定	メトリクスまたはCTAをカード間で共有のベースラインに固定
ラベルが1枚のカードで1行、別のカードで2行に折り返される	ラベルに2行分に等しい `min-height` を設定	すべてのカードのベースラインを同一に保つ
固有サイズの `<img>`	`aspect-ratio` と画像への `object-fit: cover` を持つラッパー	アスペクト比が混在する画像のグリッドはグリッドではない
カードの背後にあるグレーの塗りつぶし	白と `1px` のヘアライン	塗りつぶしはプレースホルダーとして読まれ、ヘアラインはデザインとして読まれる

統計と数値ブロック

数値ブロックは、固定された順序の3つの部分で構成されます: 上部のソースまたはラベル、数値、下部のキャプション。数値はブロック内で最も大きく、行内のすべての数値はベースラインを共有します。

数値スロットに数値以外を入れないでください。「150+」と「3,000」の行にある「Creative Ops」は、間違いとして読まれます。数値を見つけるか、その事実を散文に移動してください。
2行に折り返される数値は行を壊します。「6週間から24時間」は、残りをキャプションにして「24h」になります。
キャプションは2行に制限してください。3行必要な場合、キャプションが数値の役割を果たしています。

ロゴストリップ

ロゴは、バウンディングボックスではなく、光学ウェイトでサイズ設定されます。同じCSSの高さに設定されたスタックロゴ、正方形のバッジ、単一行のワードマークは、3つの異なる方法で間違って見えます。

開始点: スタックロゴ44px、正方形バッジ40px、ワードマーク22px。その後、目視で調整してください。すべてのマークを1つのインク色に統一してください。混在したロゴカラーは、ストリップをスクレイピングしたように見せます。クリアされたロゴのみがストリップに入ります（writing-claims-that-hold を参照）。

共有CSSとスマートフォンのオーバーフロー

デスクトップコンポーネント用に書かれた幅ルール（例: width: 37rem !important）は、ドキュメント全体をスマートフォンよりも広くする可能性があります（428対390）。症状は、右端に白いストリップが現れることです。390で scrollWidth と clientWidth を確認し、固定幅は設計されたブレークポイントにスコープしてください。

テンプレートページの兆候

すべてのセクションが中央揃え
セクションパディングが関係なくすべて 120px
カードにボーダーとシャドウと塗りつぶしのすべてがある
見出しが本文フォントでより太いウェイトで設定されている
数値が本文フォントで設定されている
2つのアクセントカラーがあり、どちらもブランドのものではない
border-radius の値が4、8、12、16ですべて同じページにある

ページレイアウトの設計