--- title: "エレベーション" description: "重なりの順序を表す 6 つのレベル。細い線のリングとごく柔らかい影で描き、サーフェスに色は重ねません。" url: "https://tanrei.chnotchy.com/ja/foundations/elevation/" last_updated: 2026-10-23T17:33:05.000Z --- # エレベーション > 重なりの順序を表す 6 つのレベル。細い線のリングとごく柔らかい影で描き、サーフェスに色は重ねません。 エレベーションは、どのサーフェスがどのサーフェスの上にあるかを表します。Tanrei は 0 から 5 までの 6 つの意味上のレベルを保ちつつ、抑えた描き方をします。 | トークン | ライト | ダーク | | --- | --- | --- | | `--tanrei-sys-elevation-level0` | | | | `--tanrei-sys-elevation-level1` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) | | `--tanrei-sys-elevation-level2` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) | | `--tanrei-sys-elevation-level3` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) | | `--tanrei-sys-elevation-level4` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) | | `--tanrei-sys-elevation-level5` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) | 生成元 `design/tokens/tanrei.light.tokens.json`, `design/tokens/tanrei.dark.tokens.json`, `tokens/sys/elevation.tokens.json` ## リング、その次に影 0 より上の各レベルは、2 種類の層からなる合成の影のトークンです。 1. `elevation-ring` ロールの **1px のリング**。どんな背景の上でも、縁をくっきりと示します。 2. レベルとともに大きくなる、1 つか 2 つの**ごく柔らかく不透明度の低い影**。 リングは常に最初の層です。影の広がり（スプレッド）を描けないプラットフォームは、リングを 1 ピクセルの枠線として描き、残りはそのまま保ちます。 ## 色は重ねない 浮いたサーフェスに、プライマリの色を重ねることはしません。奥行きは、リングと影、そして必要に応じてサーフェスコンテナの段階を 1 つ上げることで表します。これにより、ニュートラルなサーフェスはニュートラルなままです。 ## ダークテーマでは ほぼ黒の背景の上では影が見えにくいため、ダークテーマでは主にリングが役割を担います。浮いたサーフェスは、より明るいコンテナのロールへも 1 段上がります。 ## エレベーションの使い分け | レベル | 典型的な用途 | | --- | --- | | 0 | ページ、およびページと同じ面にあるもの | | 1 | 静止状態のカード、選択中のセグメント | | 2 | elevated のボタン、ホバー時に浮くカード | | 3 | メニュー、ポップオーバー、スナックバー | | 4–5 | ダイアログ、シート、その他のモーダルなサーフェス | レベルの数は、画面が成り立つ範囲でできるだけ少なくしてください。隣り合う 2 つを分ける必要があり、どちらも浮いていないなら、代わりに細い線を使います。