レイアウト

ウィンドウサイズクラス

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 では論理ピクセルです。

レイアウトが境界をまたぐときは、次のような予測しやすい方法のいずれかで変えます。

ほとんどの画面は、3 つの配置でまかなえます。レスポンシブなグリッドにカードを並べるフィード、リストと詳細、そして補助ペインを伴うコンテンツです。

スペーシングのトークンは、8 を基準とした倍数と分数です。トークン名の数字は、この基準に対するパーセンテージです。つまり space100 は 8、space50 は 4、space200 は 16 です。

生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/space.tokens.json

小さい段階はコンポーネントの内側に、スケールの中ほどはコンポーネントの間に、大きい段階はセクションの間に使います。タッチターゲットの間のスペーシングが space100 を下回ることはありません。

本文は、1 行あたりおよそ 45〜80 文字に収めます。Large と Extra-large のウィンドウでは、テキストのカラムに上限を設け、残りは余白か補助ペインに回します。