--- title: "レイアウト" description: "ウィンドウサイズクラス、スペーシングのスケール、そしてクラスの間でレイアウトを適応させる方法。" url: "https://tanrei.chnotchy.com/ja/foundations/layout/" last_updated: 2026-10-23T17:33:05.000Z --- # レイアウト > ウィンドウサイズクラス、スペーシングのスケール、そしてクラスの間でレイアウトを適応させる方法。 ## ウィンドウサイズクラス Tanrei は、使える幅を 5 つのクラスで表します。クラスが指すのは、レイアウトが置かれているウィンドウやコンテナであり、デバイスの種類ではありません。分割表示のタブレットは compact ですし、開いた折りたたみスマートフォンは compact ではありません。 | クラス | 幅 | 典型的なレイアウト | | --- | --- | --- | | Compact | 600 未満 | 1 カラム。ナビゲーションは下部のバーか、メニューの中に置きます。 | | Medium | 600–839 | 余白を広げた 1 カラム、またはコンテンツが許せば 2 カラム。折りたたんだナビゲーションドロワー（アイコンの列）を使えるようになります。 | | Expanded | 840–1199 | リストと詳細のような 2 ペイン。ナビゲーションは常に表示します。 | | Large | 1200–1599 | 2 ペインまたは 3 ペイン。テキストの幅を決めるのはウィンドウではなく、1 行の長さです。 | | Extra-large | 1600 以上 | Large と同じで、余白をたっぷり取ります。コンテンツを引き伸ばして埋めないでください。 | 幅の単位は、密度に依存しない単位です。Web では CSS ピクセル、Apple のプラットフォームではポイント、Android では dp、Flutter では論理ピクセルです。 ## クラスの間での適応 レイアウトが境界をまたぐときは、次のような予測しやすい方法のいずれかで変えます。 - **見せる。** タップの先にあったペインを表示します。リストの横に詳細ビューを並べる場合などです。 - **分ける。** 1 つのカラムを 2 つに分けます。 - **大きさを変える。** ペインと余白を比例して変えます。 - **位置を変える。** 要素を移します。たとえば、下部のナビゲーションバーを、横の折りたたんだナビゲーションドロワーに移します。 - **入れ替える。** コンポーネントを、大きな画面向けの対応物に替えます。ボトムシートをサイドシートにする場合などです。 ほとんどの画面は、3 つの配置でまかなえます。レスポンシブなグリッドにカードを並べる**フィード**、**リストと詳細**、そして**補助ペイン**を伴うコンテンツです。 ## スペーシング スペーシングのトークンは、8 を基準とした倍数と分数です。トークン名の数字は、この基準に対するパーセンテージです。つまり `space100` は 8、`space50` は 4、`space200` は 16 です。 | トークン | 値 | プレビュー | | --- | --- | --- | | `--tanrei-sys-space-space0` | 0px | | | `--tanrei-sys-space-space25` | 2px | | | `--tanrei-sys-space-space50` | 4px | | | `--tanrei-sys-space-space75` | 6px | | | `--tanrei-sys-space-space100` | 8px | | | `--tanrei-sys-space-space125` | 10px | | | `--tanrei-sys-space-space150` | 12px | | | `--tanrei-sys-space-space175` | 14px | | | `--tanrei-sys-space-space200` | 16px | | | `--tanrei-sys-space-space250` | 20px | | | `--tanrei-sys-space-space300` | 24px | | | `--tanrei-sys-space-space400` | 32px | | | `--tanrei-sys-space-space450` | 36px | | | `--tanrei-sys-space-space500` | 40px | | | `--tanrei-sys-space-space600` | 48px | | | `--tanrei-sys-space-space700` | 56px | | | `--tanrei-sys-space-space800` | 64px | | | `--tanrei-sys-space-space900` | 72px | | 生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/space.tokens.json` 小さい段階はコンポーネントの内側に、スケールの中ほどはコンポーネントの間に、大きい段階はセクションの間に使います。タッチターゲットの間のスペーシングが `space100` を下回ることはありません。 ## テキストの幅 本文は、1 行あたりおよそ 45〜80 文字に収めます。Large と Extra-large のウィンドウでは、テキストのカラムに上限を設け、残りは余白か補助ペインに回します。