--- title: "形状" description: "小さめの半径で組んだ角丸のスケール。コントロールの既定は 6px。角の曲がり方は 1 つの数値で決めます。" url: "https://tanrei.chnotchy.com/ja/foundations/shape/" last_updated: 2026-10-23T17:33:05.000Z --- # 形状 > 小さめの半径で組んだ角丸のスケール。コントロールの既定は 6px。角の曲がり方は 1 つの数値で決めます。 形状のトークンは角丸の半径を定義します。段階の名前は馴染みのある `none`・`extra-small`・`small`・`medium`・`large`・`extra-large`・`full` のままに、値は意図して小さめにしてあります。Tanrei のレイアウトは密度が高く、罫線は細いからです。細い線の隣に大きな角丸があると柔らかく不正確に見え、小さな角丸は削り出したように見えます。 | トークン | 値 | 備考 | | --- | --- | --- | | `--tanrei-sys-shape-corner-none` | 0px | | | `--tanrei-sys-shape-corner-extra-small` | 3px | | | `--tanrei-sys-shape-corner-small` | 6px | Default for controls: buttons, inputs, menu items, tooltips. | | `--tanrei-sys-shape-corner-medium` | 8px | | | `--tanrei-sys-shape-corner-large` | 12px | | | `--tanrei-sys-shape-corner-large-increased` | 14px | | | `--tanrei-sys-shape-corner-extra-large` | 16px | | | `--tanrei-sys-shape-corner-extra-large-increased` | 20px | | | `--tanrei-sys-shape-corner-extra-extra-large` | 24px | | | `--tanrei-sys-shape-corner-full` | 9999px | Opt-in only: avatars, badges, segmented controls, pill variants. | 生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/shape.tokens.json` ## 形状の使い分け - **コントロールは `small`（6px）。** ボタン、テキストフィールド、メニュー項目、ツールチップ。 - **コンテナはサイズとともに一段ずつ上げる。** カードやメニューは `medium`、ダイアログやシートは `large` 以上。 - **`full` はオプトイン。** ピルと円は、もともと丸いものや際立たせたいもののために取っておきます。アバター、バッジ、セグメンテッドコントロール。 - **`-increased` の段階**は expressive のレイヤに属します。既定のスケールを変えずに角丸を大きくします。 ## 入れ子の角丸 角丸の要素を角丸のコンテナの中に置くときは、内側の半径を「外側の半径 − 両者の間の余白」にします。同じ半径の同心の曲線は、平行に見えません。余白の分を引くと平行になります。結果が 0 以下なら `none` を使います。 ## 角のスムージング 半径は角の大きさを表します。もう 1 つのトークン `sys.shape.corner-smoothing` は、角の曲線が直線部分へどう**なめらかにつながるか**を表します。0 から 1 の数値で、意味は Figma の corner smoothing のスライダーと同じです。0 では四分円。**0.6 は Figma が「iOS の角」と呼ぶ値**で、Apple があらゆる角丸長方形に描く連続曲率の角に近いものの、同じ曲線ではありません（後述）。1 では円弧がほぼ消え、長くなだらかな 2 本の曲線だけが残ります。半径は変わらず、曲線の質だけが変わります。違いは半径が大きいほど、またピルではっきり見えます。 | デザインシステム | `corner-smoothing` | | --- | --- | | `tanrei` | 0 | | `cupertino` | 0.6 | | `m3-expressive-like` | 0 | | `m3-like` | 0 | 生成元 `tokens/systems/*.system.json`, `design/tokens//tanrei.light.tokens.json` システム全体で 1 つの数値です。ブランドは角の大きさと同じくらい、角のつながり方にも宿るからです。ダイヤルで拡大縮小されることはありません。`cupertino` は 0.6、既定のシステムは 0 のままです。レイヤでは、他の固定値と同じように書きます。 ```json "tokens": { "tanrei.sys.shape.corner-smoothing": { "$value": 0.6, "reason": "ネイティブアプリと同じ連続曲率の角で描く。" } } ``` Theme Studio では「グループ → 形状」のスライダーです。Figma では同じ数値がすべてのノードの corner smoothing に適用されるので、ファイルにプリセットが描くとおりの角が現れます。 ### 各プラットフォームが描くもの | プラットフォーム | 0 のとき | 0 より大きいとき | | --- | --- | --- | | Jetpack Compose、Flutter | 四分円 | Figma の corner smoothing の作図です。この作図がスムージングの値の意味そのものです。角ごとに 3 本の 3 次ベジェを引き、値に応じて円弧が縮み、なだらかな部分が伸びます。デザイナーが Figma ファイルで見るものを、この 2 つのプラットフォームがそのまま描きます。Apple の連続曲率の角は**別の曲線**です。0.6 のとき、半径 20 の 180×80 の矩形で両者の差は 5.1 px²。面積の 0.035% で目には見えませんが、ラスタライザ同士の差の 3 倍あり、どの値でも一致することはありません。テストは Apple の角ではなく、この作図を固定します。 | | Web | 四分円 | ボックスに使える中で最も近いスーパー楕円です。`corner-shape: superellipse(2 + s)` に、半径を (1 + 0.4 s) 倍したもので、同じ矩形の 0.6 で Figma の作図から 9.5 px²、Apple の角から 5.7 px² 離れています。`corner-shape` のないブラウザーは円形の角を描きます。 | | SwiftUI | `.circular` | `.continuous`。0 より大きければ、値にかかわらず OS 自身の曲線です。値は OS のものに丸められ、パッケージの README にその旨を記載しています。0.6 では上記のとおり Figma の作図から約 5 px² 離れますが、パリティの許容範囲内です。 | | React Native | `borderCurve: "circular"` | iOS では `borderCurve: "continuous"`。同じく 0 より大きければ OS の曲線です。Android にはこの曲線がなく、円形のままです。 | コンポーネントが角を丸めるすべての場所がこの値を読みます。コンテナ、フォーカスリング、エレベーションのリング、リップルの切り抜き。Button ではこれを要件 BTN-10 として定めています。 角のスムージングが `circular` や `continuous` のような種類の選択ではなく数値なのは、デザイナーが毎日これを設定する場所である Figma がスライダーだから、そして 1 つの名前の下に 3 つの異なる曲線があってはパリティにならないからです。