Elevation — 基本、シャドウとAndroidにおけるZ座標

Elevationとは？

Elevation は、Material Design（Google I/O 2014）で導入されたメトリックで、z軸に沿った要素の位置を表します。xとy（画面の2次元平面）とは異なり、zは平面上の高さです。Elevationはdp（密度非依存ピクセル）で表現され、2つの視覚効果を決定します：elevationが増加するにつれて大きくぼやけるシャドウ、および描画順序（高いelevationの要素は低いelevationの要素の上に描画されます）。

物理的な比喩：テーブルの上の紙の束を想像してください。スタックが高いほど、一番上の紙の影は長くなります。Material DesignのElevationもまったく同じように機能します — 各要素は特定の高さにある「デジタルシート」です。ユーザーが要素とインタラクションする（ボタンを押す、カードを持ち上げる）と、elevationが一時的に増加します — これを「インタラクションelevation」と呼びます。

Material Design Guidelines（Google、2026）によると、elevationを適切に使用することで、インターフェースのスキャン可能性が35%向上します：ユーザーはインタラクティブな要素をより速く見つけられます。なぜなら、それらはフラットなコンテンツの上に「浮かび上がる」からです。ただし、elevationレベルの過剰な数（4つ以上）はこの効果を低下させます — すべてが浮いていると、何も重要に見えません。

AndroidでのElevation：プロパティとAPI

Androidでは、elevationはAPI 21（Android 5.0 Lollipop）以降、Viewの組み込みプロパティとして実装されています。View.elevationはピクセル（px）単位でベースの高さを設定し、View.translationZはアニメーション用の追加オフセットを提供します（例：押下時）。合計の視覚的高さ = elevation + translationZ。両方のプロパティは、ViewPropertyAnimatorまたはObjectAnimatorを介したアニメーションをサポートしています。

<!-- XML: elevationとtranslationZ -->
<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:translationZ="2dp"
    android:stateListAnimator="@anim/button_elevation"
    android:text="Elevation付きボタン" />

StateListAnimator — Viewの状態（押下、フォーカス、有効）に基づいてelevationとtranslationZをアニメーション化するXMLリソースです。たとえば、ボタンを押すと、elevationが2 dpから8 dpに増加し、浮き上がり効果を生み出します。StateListAnimatorは、任意のViewプロパティに対してObjectAnimatorを介したアニメーションをサポートしています。

// Kotlin: プログラムによるelevation設定
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // px単位のベースの高さ

// 押下時のelevationアニメーション
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — elevationシャドウを正しくレンダリングするための重要なコンポーネントです。デフォルトでは、AndroidはViewOutlineProvider.BACKGROUNDを使用し、背景drawableに基づいて輪郭を作成します。角が丸いView（shape drawable経由）の場合は、カスタムOutlineProviderを設定する必要があります。そうしないと、シャドウが四角形になります。Materialコンポーネント（CardView、MaterialButton）はOutlineProviderを自動的に管理します。

Material Design 3でのElevationレベル

Material Design 3（Material You）は、Material Design 2と比較してelevationシステムを改訂しました。12の固定レベル（Material 2）の代わりに、M3は5つの基本トーンを提供し、それぞれが特定のelevationレベルに対応します。さらに、M3はAndroid 12+で「カラーシャドウ」の概念を導入しました：シャドウを黒灰色ではなく、テーマのアクセントカラーで着色できます。

インタラクションelevation — ユーザーが要素とインタラクションする際のelevationの一時的な増加です。Material Design 3では、インタラクティブな要素（ボタン、カード）は、押下時（pressed状態）またはフォーカス時（focused状態）にベースelevationに+1～2 dpを獲得します。FloatingActionButtonの場合、インタラクションelevationは+6 dpです。自然な触覚応答を得るには、状態間の遷移アニメーションは150～200 ms持続する必要があります。

Jetpack ComposeでのElevation

Jetpack Compose は、組み込みのelevationパラメーターを持つCardおよびSurfaceコンポーネントを介してelevationをサポートしています。Viewシステムとは異なり、Composeは独自のレンダリングエンジンを介してシャドウをレンダリングするため、すべてのAndroidバージョン（API 21+）で一貫した動作を保証します。Modifier.shadow()は、任意のcomposableにシャドウを追加するための低レベルのモディファイアです。

// Jetpack Compose: SurfaceとCardによるelevation
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Surface

Card(
    elevation = CardDefaults.cardElevation(
        defaultElevation = 4.dp,
        pressedElevation = 8.dp,
        focusedElevation = 6.dp
    ),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surface
    )
) {
    Text("Elevation制御カード")
}

// カスタム形状用のModifier.shadow
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* アクション */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("シャドウ付きサーフェス") }

Elevationアニメーション はComposeではanimateFloatAsStateまたはAnimatableを介して実装されます。elevationが変化すると、Composeは自動的にシャドウをアニメーション化します。インタラクティブな要素の場合は、M3 InteractionSourceをanimateElevationと組み合わせて使用し、elevationが押下、フォーカス、ドラッグに応答するようにします。Compose 1.2+のMaterial 3はカラーシャドウをサポートしています — テーマのprimary Containerカラーで着色されたシャドウです。

iOSでのElevation：高さのシミュレーション

iOSでは、Material Designのelevationに組み込みの類似物はありません。AppleのHuman Interface Guidelinesは、シャドウ管理にz座標を使用しません — 代わりに、開発者はCALayer.shadow*を介して手動でシャドウを設定します。ただし、シャドウと奥行きによる視覚的階層の概念はiOSにも存在します：モーダルプレゼンテーション、UIAlertController、UIPopoverPresentationController — これらはすべて、背景から分離するためにシャドウを使用します。

Elevationをシミュレート するために、iOS開発者はshadowOpacity + shadowRadius + shadowOffsetの組み合わせを使用します。必要な「高さ」が高いほど、ぼかし半径とシャドウオフセットが大きくなります。SwiftUIでは、パラメーター付きの.shadow()モディファイアを介してシャドウが設定されます。iOSでMaterialのような動作を実現するには、GoogleのMaterial Components for iOS（MDC）などのライブラリがあります。

// iOS: CALayerによるelevationシミュレーション
import UIKit

extension UIView {
    func applyElevation(level: Int) {
        let elevationMap: [Int: (CGFloat, CGFloat, CGFloat)] = [
            1: (0.05, 1, 2),
            2: (0.08, 2, 4),
            3: (0.11, 4, 8),
            4: (0.12, 6, 12),
            5: (0.14, 8, 16),
            6: (0.15, 12, 24)
        ]
        let (opacity, offset, radius) = elevationMap[level] ?? (0.08, 2, 4)
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = Float(opacity)
        layer.shadowOffset = CGSize(width: 0, height: offset)
        layer.shadowRadius = radius
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    }
}

// 使用法
cardView.applyElevation(level: 3)  // 6 dp相当

Material Components for iOS（MDC-iOS） — Material DesignのelevationをiOSに移植するGoogleのライブラリです。MDC-iOSは、事前定義された値を持つMDCShadowElevationクラス、シャドウレンダリング用のMDCShadowLayer、適切なelevationを持つMaterialカード用のMDCCardを提供します。MDC-iOSは、ステートフルなシャドウプロパティを介して押下時のelevationアニメーションをサポートしています。