Wensity Layout は何をしますか？
レイアウトは、ユーザーが文字を読む前に、ページが何が重要で何が一緒に属しているかを伝える方法です。優れたレイアウトは、固定された間隔スケール、距離によるグループ化、単一の整列システムという3つの習慣から生まれます。このスキルはこれら3つすべてを設定し、レスポンシブ構造もカバーします。
プロジェクトに既存の間隔スケールとコンテナ幅がある場合は、それらを使用してください。
1. 間隔スケール
4pxをベースに使用します。すべてのマージン、パディング、ギャップはこのリストから取得します。
| トークン | px | 典型的な使用例 |
|---|---|---|
| 1 | 4 | アイコンとラベルの間、タイトなインラインギャップ |
| 2 | 8 | コントロール内部、ラベルとその入力フィールドの間 |
| 3 | 12 | 密集したリスト内のアイテム間、ボタンのパディング y |
| 4 | 16 | カードのパディング（コンパクト）、関連するコントロール間のギャップ、モバイルページのガター |
| 5 | 20 | ボタンのパディング x（大） |
| 6 | 24 | カードのパディング、フォームフィールド間のギャップ |
| 8 | 32 | セクション内のグループ間 |
| 10 | 40 | セクション見出しとそのコンテンツの間（大） |
| 12 | 48 | モバイルでのセクションパディング |
| 16 | 64 | アプリ内のセクション間、タブレットでのセクションパディング |
| 20 | 80 | |
| 24 | 96 | デスクトップマーケティングページでのセクションパディング |
| 32 | 128 | ヒーローパディング、1つの大きなステートメントの周りのスペース |
Tailwindのデフォルトスケールはすでに4pxベースに従っています（p-4は16px）。そのため、Tailwindのステップを使用し、p-[13px]のような独自の値を発明しないでください。奇数値は、レンダリング結果を確認した光学補正（1pxずれて見えるアイコンなど）にのみ許可されます。
2. 距離でグループ化する
最も重要な単一のレイアウトルール：グループ内部のスペースは、グループ間のスペースよりも小さくすること。 ラベルは入力フィールドから8px離れて配置され、次のフィールドは24px離れて配置されます。カードのタイトルはテキストの8px上にあり、次のカードは24px離れています。内部と外部の間隔が等しい場合、すべてがバラバラに浮かんで見え、グループとして読めなくなります。
- 内部と外部のギャップの比率は、約1：2または1：3を目指します。
- 見出しの上には、下よりも多くのスペースを取ります。 見出しはその後のコンテンツに属します。典型的には、セクション見出しの上は48px、下は16pxです。
- ボックスの前にスペースを。 最初に距離でグループ化します。距離だけでは不十分な場合（密度の高いテーブル、ツールバー、背景が込み入ったコンテンツ）にのみ、枠線、区切り線、または背景を追加します。すべてのグループをボックスで囲むと、ページが重くなります。
- 兄弟要素には
gapを使用します（flex gap-4、grid gap-6）。子要素にマージンを使う代わりに。これにより、間隔が一箇所にまとまり、リストの端に余分なマージンが生じるのを防ぎます。
3. リズム、均一性ではない
すべてのセクションが96pxのパディング、中央揃えの見出し、3つのアイテムのグリッドを持つページにはリズムがありません。意図的に密度を変えます。
- 密度の高いセクション（機能グリッド、テーブル、ロゴ）と、開放的なセクション（1つのステートメント、1つの大きな画像）を交互に配置します。
- 重要なセクションにより多くのスペースを与えます。スペースは注意力を費やす方法です。
- コンテンツが本当に同じ種類のものである場合にのみ、レイアウトを繰り返します。
4. 整列
- 単一の開始端。 セクション内の見出し、段落、ボタン、画像は同じ開始線を共有します。「何かがおかしい」という苦情のほとんどは、2つの端が数ピクセルずれていることが原因です。
- デフォルトで先頭に揃えます（
text-align: start。英語では左、アラビア語やヘブライ語では右）。中央揃えは、短くスタンドアロンなコンテンツ（ヒーローの見出し、単一のCTAブロック、空の状態）にのみ使用します。フォーム、テーブル、リスト、長いテキストは先頭揃えにします。 - テーブルと統計列では、数値を末尾に揃えます。
- ボックスではなくテキストに揃えます。 ラベルの横にあるアイコンは、ラベルのcap高または中央に揃え、行ボックスの上部には揃えません。フレックス行では、単一行の場合は
items-center、複数行テキストの場合はitems-startとアイコンに小さな上部マージンを追加します。 - 光学調整： 再生アイコン、矢印、丸い形状は、数学的に中央に配置するとずれて見えます。確認後、1〜2px調整します。
5. コンテナと幅
| コンテナ | 最大幅 | 使用例 |
|---|---|---|
| Prose | 65ch（約640〜720px） | 記事、ドキュメント、長い段落 |
| Narrow | 560〜640px | フォーム、サインイン、集中タスク、中央揃えのヒーローステートメント |
| Content | 1120〜1280px | ほとんどのマーケティングセクションとアプリページ |
| Wide | 1440〜1600px | ダッシュボード、ギャラリー、エディター |
| Full bleed | 100% | 背景、画像、端に触れるべき商品写真 |
- ページガター： スマートフォンで16px、タブレットで24px、デスクトップで32〜48px。一貫性を保つため、サイト全体でブレークポイントごとに1つのガター値を使用します。
- 背景とコンテンツ幅を分離します。 セクションの背景は全幅で表示し、そのコンテンツはコンテンツコンテナ内に留めることができます。
- ワイドスクリーンでテキストを全幅にしないでください。 画像とグリッドは拡大できますが、段落はできません。
6. グリッド
- マーケティングレイアウトには12カラム。 半分、3分の1、4分の1、非対称分割（7と5、8と4）が可能になります。非対称分割は、6と6よりもデザインされた印象を与えます。
- カードの自動入力グリッド を使用すると、列数がスペースに追従します。
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
min(100%, 280px) は、280pxより狭い画面でのオーバーフローを防ぎます。auto-fill は1〜2枚のカードしかない場合でもカード幅を安定させます。auto-fit は少数のカードを引き伸ばして行を埋めます。意図的に選択してください。
- フレキシブルトラックを縮小可能にします。 グリッドとフレックスの子要素は、デフォルトではコンテンツサイズより小さくならないため、長いテキストや広いテーブルがダッシュボードからはみ出します。フレキシブルトラックには
minmax(0, 1fr)を、テキストを保持するフレックスの子要素にはmin-width: 0（Tailwindではmin-w-0）を使用します。
.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.row > .text { min-width: 0; }
- 均等な高さは、均等なコンテンツにのみ使用します。 1行のカードは、デフォルトでグリッド内で最も高いものに合わせて引き伸ばされます。これは一連のプランでは問題ありませんが、1つのカードが明らかに注目されるカードである場合には適切ではありません。
- Bentoグリッド： 重要度に応じてタイルのサイズを変え、ギャップ値は1つに保ち、すべてのタイルに実際のコンテンツを配置します。空の装飾的なタイルはテンプレートのように見えます。
- サブグリッドを使用します（
grid-template-rows: subgrid）。行内のカードのタイトル、本文、ボタンを互いに揃える必要がある場合に使用します。
7. レスポンシブ構造
モバイルファーストでデザインし、スペースが広がるにつれて構造を追加します。
- ブレークポイントはデバイスではなくコンテンツに従います。 レイアウトがおかしくなり始める場所に追加します。Tailwindの
sm 640、md 768、lg 1024、xl 1280はデフォルトとして問題ありません。 - 単に縮小するのではなく、再構築します。 モバイルでは、3列の機能グリッドは1列になり、テキストと画像の横並びは画像を2番目に（またはメッセージを伝える場合は1番目に）配置してスタックし、テーブルはカードのリストになるか、独自のコンテナ内で水平スクロールし、サイドバーはドロワーになります。
- コンポーネントにはコンテナクエリを使用します。 異なる幅で表示されるコンポーネント（サイドバーとメインカラムのカード）に使用します。
.card-wrap { container-type: inline-size; }
@container (min-width: 480px) { .card { grid-template-columns: 160px 1fr; } }
Tailwind v4では、親に @container、子に @md:grid-cols-2 を使用します。
- 画面に合わせて間隔をスケーリングします。 セクションパディング：モバイル48px、タブレット64px、デスクトップ96px。ギャップは16から24、32へと段階的に変更できます。
- ビューポートの高さ： 全高レイアウトには
min-h-dvh（または100dvh）を使用し、h-screen（100vh）は使用しないでください。100vhはツールバーがあるモバイルブラウザでは表示領域よりも高く、コンテンツがその下に隠れてしまいます。 - ノッチのあるスマートフォンのセーフエリア： 固定された下部バーには
padding-bottom: env(safe-area-inset-bottom)を、ビューポートのメタタグにはviewport-fit=coverを使用します。 - 右から左への言語： left と right の代わりに論理プロパティ（
margin-inline-start、padding-inline、inset-inline-end；Tailwindではms-*、pe-*、start-*）を使用し、dir="rtl"でテストします。方向性のあるアイコン（戻る矢印、シェブロン）はミラーリングしますが、ロゴやすべてのアイコンをミラーリングする必要はありません。 - 水平ページスクロールは絶対に発生させないでください。 320pxで確認します。通常の原因は、固定幅、長い単語やURL、
w-screen要素（スクロールバーの幅を含む）、または負のマージンです。
8. テーブル
- ヘッダー行 はラベルロールで、テーブルがスクロールする場合はスティッキー（
position: sticky; top: 0）にし、色付きの背景か、より強い下部ボーダーを付けます。 - 行の高さは密度による： コンパクト36px、デフォルト44px、ゆったり52px。ユーザーによって異なる場合はトグルを提供します。
- 行はヘアライン区切り線またはゼブラ模様のいずれかで区切り、両方は使用しません。
- 数値は
tabular-numsで末尾揃えにします。 テキストは先頭揃えにします。ステータスとアクションは最後の列に配置します。 - モバイルでの幅広テーブル： 独自のコンテナ内で水平スクロール（
overflow-x: auto）させ、最初の列をスティッキーにするか、行ごとにスタックしたカードに切り替えます。テーブルがページを横に押し出さないようにします。 - 空、ローディング、エラーの状態 はテーブルフレーム内に表示し、ヘッダーを維持してユーザーが何が表示されるかを認識できるようにします。
9. 密度
密度を画面の使用頻度に合わせます。
- マーケティングとオンボーディング： 開放的に。画面あたりのアイテム数は少なく、余裕のあるスペース、大きなタイプ。
- 日常使用のアプリ画面： コンパクトに。行の高さ36〜44px、ギャップ8〜12px、テキスト14px。毎日画面を使用する人は、一度により多くの情報を見たいと考えます。
- テーブルとデータツール： 密度を高くし、ユーザーによって異なる場合は密度トグルを提供します。
- 1つのパネル内で密度を混在させないでください。
10. タッチターゲットとヒットエリア
- タッチスクリーンでタップ可能なものは44x44pxのターゲット にします（表示アイコンが16pxでも）。(WCAG 2.2 AA では最低24x24pxが必要で、44pxが快適なサイズです)。パディング、またはコントロールを中心とした非表示の疑似要素を使用してヒットエリアを拡大し、レイアウトが変わらないようにします。
.icon-btn { position: relative; }
.icon-btn::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: max(100%, 44px); height: max(100%, 44px);
transform: translate(-50%, -50%);
}
- 個別のタップターゲット間は少なくとも8px以上離して、親指が2つ同時に触れないようにします。
11. レイヤリング
小さなz-indexスケールを維持し、これらの値のみを使用します。
:root { --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; }
showModal() で開かれたネイティブの <dialog> と popover 属性を持つ要素は、ブラウザの最上位レイヤーにレンダリングされ、すべてのz-indexより上になるため、z-indexは必要ありません。z-index: 9999 は、重ね合わせが理解されていないことを意味します。数値を上げる代わりに、重ね合わせコンテキスト（多くの場合、親の不正な transform、filter、または isolation）を修正してください。
12. スティッキーと固定要素
- スティッキーヘッダー： 高さは低く（56〜64px）保ち、ページがその下をスクロールした場合にのみ背景（無地またはぼかし）を付け、ページ上部をクリーンに保ちます。
- アンカーとなる見出しには、ヘッダーの高さに等しい
scroll-margin-topを追加 して、ページ内リンクがヘッダーの下に着地しないようにします。 - モバイルの固定下部バー には上記のセーフエリアパディングが必要であり、ページの最後のコンテンツを覆ってはいけません。バーの高さだけページ下部にパディングを追加します。
13. 完了前に確認すること
- すべての間隔値が4pxスケールに準拠している。
- グループ内部のスペースがグループ間のスペースよりも明確に小さい。
- 見出しの上には下よりも多くのスペースがある。
- セクションごとに単一の開始端がある。テーブル内の数値は末尾揃え。
- フレキシブルトラックには
minmax(0, 1fr)を使用している。テキストの子要素は縮小可能。 - 段落はワイドスクリーンでも約65chに制限されている。
- モバイルでは単に縮小するのではなく、レイアウトを再構築している。
- 320pxで水平スクロールがない。全高セクションには
dvhを使用している。 - タッチターゲットは少なくとも44px（24px未満は不可）。
- z-index値がスケールから来ている。
- 目を細めてテスト：最も重要なものとグループが、詳細をぼかしても明確である。