elevation-and-depth

高さと奥行き

高さは、影とレイヤーを使って要素がベース面より上にあることを表現し、UI に物理的な奥行き感を与えます。角丸と組み合わせることで、カードをつかめるように感じさせ、モーダルが明確に浮いて見え、ドロップダウンがコンテンツの上に現れたように感じられる、触覚的な質感が生まれます。

高さのスケール

高さのレベルを少数のトークンとして定義します。各レベルは特定の UI の役割に対応します。

レベル	トークン	影	役割
0	--shadow-none	なし	フラットな面、インライン要素
1	--shadow-xs	0 1px 2px rgba(0,0,0,0.06)	控えめなカード、テーブル行のホバー
2	--shadow-sm	0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)	カード、入力欄のフォーカスリング領域
3	--shadow-md	0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06)	ドロップダウン、ポップオーバー
4	--shadow-lg	0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)	モーダル、ダイアログ、サイドドロワー
5	--shadow-xl	0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04)	コマンドパレット、全画面オーバーレイ

影は控えめに保ちます。濃く重い影は古びた印象になり、視覚的に攻撃的です。薄く拡散した影はモダンで、素材感があります。

「影＋境界線」のルール

白い面に控えめな影を付けると、輪郭がぼやけて、カードの端が不鮮明になることがあります。

• ルール： 高さのある白いカードやセクションには、影の中心色よりやや濃い（1.5～2 倍）1px の境界線を組み合わせます（例：#E2E8F0 や grey-200 のような中間のグレー）。
• 効果： 境界線がカードの物理的な輪郭を定め、影が奥行きを与えます。両方を組み合わせることで、どちらか一方だけを使うよりも、コンポーネントがはるかに明瞭に「際立ち」ます。

ホバー時には明確な輪郭が必要

ホバー時に背景色が変化するカードには、境界線、影、または明確な角丸の輪郭が必要です。輪郭がなければ、変化に形がなく、強調されたカードではなく、場違いな塗りつぶしのように見えます。境界線のないフラットなカードでは、背景色を変えるホバーは禁止です。代わりに、ホバー時に境界線または影（高さ）を付けます。

奥行きを生む控えめなグラデーション

グラデーションを使うと、インターフェースに「生き生きとした」印象を与え、高さの感覚を強めることができます。

• 照明のメタファー： 上部がわずかに明るい、控えめな線形グラデーション（上から下へ）は、自然な頭上からの照明を再現します。これにより、単色の塗りつぶしよりも面が物理的で、高さがあるように感じられます。
• 5% のルール： グラデーションは極めて控えめにします。通常、上端と下端の明るさの差はわずか 2～5% で十分です。グラデーションの始点と終点が簡単に見分けられる場合は、強すぎる可能性があります。
• 使用方法： プライマリボタン、ヒーローカード、ヘッダーセクションに適用すると、視覚的な階層とブランドの個性を高められます。

高さと角丸の組み合わせ

角丸と影は、面の特徴を定めるために連動します。この組み合わせによって、要素の役割とプロダクトの視覚的なトーンが伝わります。

面	影	角丸	トーン
インラインのチップ／タグ	なし	--radius-full（ピル型）	フラット、軽量
カード	--shadow-sm	--radius-md（8–12px）	つかめる、まとまりがある
ドロップダウン／ポップオーバー	--shadow-md	--radius-md（8px）	浮遊感があり、文脈に沿う
モーダル／ダイアログ	--shadow-lg	--radius-lg（12–16px）	存在感があり、焦点が合う
トースト／通知	--shadow-md	--radius-md	一時的、コンテンツの上に表示
ボタン	なし、または --shadow-xs	すべてのボタンで統一 — 下記を参照

太いアクセントボーダーと角丸の辺を共有しない

角丸のボックスの一辺に、太くて色の濃いボーダーを引かないでください。ボーダーはマイター接合になり、アクセントが隣接する要素と接する部分でレンダラーが斜めの継ぎ目を切り取ります。さらに、角丸によってその継ぎ目が曲線になるため、角が終わる前にアクセントが目に見えて細くなり、途切れて見えます。半径が8pxの角丸に4pxのボーダーを使うと、その長さの大半で先細りになります。代わりに、アクセントを独立した塗りつぶし要素にしてください。バーや、コンテナーの角丸で綺麗にクリップされるウォッシュを使うか、アクセントがある部分ではボックスを角丸にしないでください。塗りつぶしにはマイター接合も先細りもありません。

ボーダーの角丸の一貫性ルール

製品内でボタンの角丸を変えてはいけません。 プライマリー、セカンダリー、破壊的操作、ゴーストなど、すべてのボタンで同じ角丸トークンを使います。ボタンの種類によって角丸を変えると、視覚的な一貫性が損なわれ、実際には存在しない意味上の違いを示唆してしまいます。

/* Correct: one radius for all buttons */
.btn { border-radius: var(--radius-button); }

/* Wrong: different radii for different button variants */
.btn-primary { border-radius: 8px; }
.btn-secondary { border-radius: 4px; }  /* ← breaks consistency */

ボタンの角丸トークンはブランド上の判断事項です。一度決めたら、あらゆる場所に適用してください。

コントラストと分離のためのテキストシャドウ

text-shadowを使うと、色を変えずにテキストを背景から浮き立たせることができます。コントラストがギリギリの場合や、テキストが写真、グラデーション、複雑な背景の上にある場合に便利です。

シャドウの効果は、シャドウとして認識できないほどにしてください。ユーザーがシャドウに気づくなら、強すぎます。

/* On images or complex backgrounds */
.hero-title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Very subtle separation from a near-matching background */
.label-on-tinted-surface {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* White text on light background — use a dark shadow, not white */
.inverted-text {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

ルール：

• 不透明度：0.30未満にしてください。それ以上だと、洗練のための調整ではなくデザイン上の選択に見えます。
• ぼかし：最大でも2–4pxにしてください。これより大きい値では、テキストが汚れて見えます。
• オフセット：0 1pxまたは0 0にしてください。2pxを超える方向性のあるオフセットは、レトロなWeb 2.0風に見えます。
• コントラスト不足を補うためにtext-shadowを使わないでください。まず色を修正してください。色がすでに合格基準に近く、わずかな補助が必要な場合や、テキストが予測しにくい画像の上にある場合にのみ使ってください。

ダークモードのシャドウ

暗い背景ではシャドウが見えにくくなります。暗いサーフェスでは、次の方法で補ってください。

• シャドウ値の不透明度を少し高くする
• 目立たないボーダー（1px solid rgba(255,255,255,0.08)）を追加して、カードの端を明確にする
• 同じ奥行きに感じられるよう、エレベーションレベルを1段階上げる

レビューチェックリスト

• コンポーネントごとに個別のシャドウ値を指定するのではなく、デザイントークンとしてエレベーションスケールを定義していますか？
• エレベーションのある各要素で、その役割に合ったレベルを使っていますか（カードとモーダルは異なります）？
• 重い黒（#000）のデフォルト値を避け、軽く拡散したシャドウを使っていますか？
• 明るい背景上の白いカードでは、境界を明確にするためにシャドウと1pxのボーダーを組み合わせていますか？
• すべてのボタンバリアントで、角丸に一貫性がありますか？
• シャドウは重く暗いものではなく、控えめで拡散したものに見えますか？
• 暗いサーフェス上で、ボーダーまたは調整したシャドウによってカードやパネルの端が見えますか？
• エレベーションを単なる装飾ではなく、レイヤー構造の伝達に使っていますか？
• グラデーションを使う場合、控えめ（明度の変化が2～5%）で、ライティングやエレベーションの比喩を補強するために使っていますか？

よくあるアンチパターン

アンチパターン	問題	修正
プライマリーボタンとセカンダリーボタンで角丸を変える	実際には存在しない意味上の違いを示唆します	すべてのボタンで単一の--radius-buttonトークンを使います
強いbox-shadow: 0 8px 16px rgba(0,0,0,0.4)	古くさく、視覚的に強すぎる印象になります	不透明度を低くし、複数のレイヤーで拡散したシャドウを使います
役割に関係なくすべての要素にシャドウを付ける	すべてにエレベーションを付けると、エレベーションの意味が失われます	シャドウは実際に浮いている要素に限って使います
白い背景でエレベーションのないフラットなカード	カードの端がページに溶け込んで見えなくなります	カードの境界を明確にするため、--shadow-smまたは1pxのボーダーを使います