Material Design: 主要概念、Material YouとMaterial 3

Material Designとは？

Material Design（コードネームProject Quantum）はGoogleのデザインシステムで、Google I/O 2014で初めて発表され、Android 5.0 Lollipopで初めて実装されました。Material Designの目標は、紙とインクの物理的特性 — “マテリアル” — に基づいた、すべてのGoogle製品とAndroidアプリのための統一されたビジュアル言語を創造することです。フラットデザインとは異なり、Material Designは物理的な奥行き、影、レイヤー、リアルなアニメーションを追加します。

2014年以降、Material Designは3つの主要バージョンを経てきました: Material 1（2014）— カードとフローティングアクションボタンを備えたオリジナルのガイドライン。Material 2（2018）— 簡素化されたビジュアル言語、拡大されたスペーシング、タイポグラフィへの強調。Material 3 / Material You（2021）— デバイスの壁紙から生成される動的カラースキーム、パーソナライゼーション。Google Play Console（2024）によると、Google Playのトップ1000アプリの78%がAndroid用Material Componentsを使用しています。

Material Designは単なるUIキットではなく、完全なデザインシステムです: アクセシビリティ（a11y）、アニメーション（Motion）、レスポンシブレイアウト、コンポーネント（TopAppBar、BottomNavigation、Navigation Drawer）、タイポグラフィ（Material Type Scale）、アイコン（Material Symbols）のガイドライン。IT Sectrでは、2014年からAndroidプロジェクトの基本デザインシステムとしてMaterial Designを使用し、Material Theme Builderを通じてクライアントのブランドにカスタマイズしています。

Material Designの基本原則: マテリアリティ、奥行き、モーション

マテリアリティ（Material as Metaphor） — Material Designの主要原則で、紙の物理的特性を借用しています: マテリアルには表面、厚さ（1dp）があり、影（Elevation）を落とし、空間（Bounds）を占有します。インターフェース要素 — カード、ボタン、パネル — は物理オブジェクトのように振る舞います: 押すと浮き上がり（リップル効果）、互いに重なり（Z軸）、現れるときにアニメーションします（motion）。

奥行き（Depth）はElevationを通じて作成されます — Z軸上の位置を決定するマテリアルプロパティです。Elevation（8dp、16dp）が高いほど、要素が落とす影は大きくなります。カードのElevationは1–2dp、FABは6dp、Modal BottomSheetは16dpです。奥行きは階層を伝えるために使用されます: モーダルウィンドウとダイアログは常にコンテンツの上にあり、Navigation DrawerはAction Barの上にあります。奥行きは3D遠近法をフラットなZレイヤーに置き換え、レンダリングパフォーマンスを維持します。

モーション（Motion） — Material Designのアニメーションは装飾的ではなく機能的です。アニメーションは: 1）ユーザーの注意を誘導し（詳細とともに展開するカード）、2）空間的関係を説明し（スクロール時にAppBarがTopAppBarに変わる）、3）スムーズな遷移を確保します（画面間の共有要素トランジション）。Google Material Guidelines（2024）によると、アニメーションはマイクロインタラクションで300ms、画面遷移で500msを超えてはなりません — より長いアニメーションは遅延として認識されます。

Material You（Material Design 3）: 動的カラーとパーソナライゼーション

Material You（Material Design 3）はデザインシステムの最大のアップデートで、2021年にAndroid 12とともに発表されました。主な革新 — 動的カラー（Monet）: システムはデバイスの壁紙から自動的に5つのキーカラーを抽出し、15トーン（primary、secondary、tertiary、errorとそのlight/darkバリアント）の完全なカラーパレットを、計算されたWCAG AAコントラスト比とともに生成します。

Material YouのカラーモデルはHCT（Hue, Chroma, Tone）に基づいています — Googleが開発した色空間で、人間の知覚（Hue）と彩度（Chroma）、明度（Tone）を組み合わせます。HSL/HSVとは異なり、HCTは生成されたすべてのトーンが白と黒の背景に対して必要なコントラストを持つことを保証します。Google Material Guidelines（2024）は、テキストにはメインパレットのトーナルバリアントのみ、背景にはsurfaceトーン、アクセントサーフェスにはprimary-containerを使用することを推奨しています。

ユーザーは4つのパーソナライゼーションスキームから選択できます: TonalSpot（壁紙のメインカラー）、Vibrant（最も彩度の高い色）、Expressive（追加の明るい色）、Neutral（モノクロームパレット）。Material Theme Builder（material-foundation.github.io）はMaterial 3テーマをXML、Compose Theme、CSS、さらにはFigmaプラグインにエクスポートできます。

Android用Material Components: XMLとComposeによる実装

Android用Material Components（MDC-Android）はGoogleの公式ライブラリで、Material Designガイドラインに従った既製のViewコンポーネントを提供します。XMLレイアウトの場合、ライブラリはcom.google.android.material:material依存関係を通じて利用可能で、2026年6月時点の最新バージョンは1.12.0です。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

この例は、MaterialToolbar（TopAppBar）、カスタムパディングとストロークのMaterialCardView、ドロップダウンリスト付きTextInputLayout、Material3スタイルのMaterialButtonを備えたMaterial画面を示しています。FABはToolbarにアンカーされています — マスター詳細インターフェースの標準パターンです。

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("都市") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("送信")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

コードはComposeのMaterial Youテーマを示しています: dynamicLightColorScheme()はデバイスの壁紙に基づいて自動的にカラースキームを生成します。ScaffoldはTopAppBarとFABを備えた標準的な構造を提供します。OutlinedTextFieldとButtonはMaterial 3コンポーネントで、その色は動的なcolorSchemeから取得されます。壁紙が変わると、すべてのアプリの色が自動的に更新されます — コード変更なしのパーソナライゼーションです。

iOSのMaterial Design: iOS用Material Components

iOS用Material Components（MDC-iOS）は、iOS上でMaterial Designを実装するネイティブUIKitコンポーネントを提供するライブラリです。iOSには独自のデザインシステム（Human Interface Guidelines）があるため、iOSでのMaterialコンポーネントの使用頻度は低いですが、AndroidとiOS間で統一されたビジュアルスタイルを必要とするクロスプラットフォームアプリで需要があります。

MDC-iOSには、Material Design用にスタイリングされたAppBar、BottomNavigation、Cards、Chips、Dialogs、Snackbar、Tabs、TextFieldsが含まれています。ライブラリはCocoaPods（pod 'MaterialComponents'）およびSwift Package Managerを通じて利用可能です。Apple Human Interface Guidelines（2024）はネイティブUIKitコンポーネントをMaterialの同等品で完全に置き換えることを推奨していませんが、ネイティブナビゲーション（NavigationStack、UITabBarController）を維持する条件付きでカスタムインターフェースへのMaterialコンポーネントの使用を許可しています。

IT Sectrでは、Androidから移植されたアプリ（FlutterまたはKotlin Multiplatformを使用したクロスプラットフォームプロジェクト）にのみiOSでMaterial Componentsを使用しています。ネイティブiOSアプリの場合は、HIGに従い、カスタムブランディングを施したUIKit/SwiftUIを使用しています。Swift Communityの調査（2024年）によると、iOS用Material Componentsは主にハイブリッドプロジェクトで8%の開発者が使用しています。

Material Designと他のデザインシステムの比較

Material Designは市場で唯一のデザインシステムではありません。主な競合: Apple Human Interface Guidelines（iOS/macOS）、Fluent Design（Microsoft）、Carbon（IBM）、Polaris（Shopify）、Lightning（Salesforce）。各システムはそれぞれのプラットフォームに最適化されています: Material DesignはAndroid、HIGはiOS、FluentはWindows向けです。デザインシステムの選択はターゲットプラットフォームとエコシステムによって決まります。

Material Designの主な利点は、その開放性とクロスプラットフォーム性です。ガイドライン、コンポーネント、ツール（Material Theme Builder）は無料で利用でき、スタートアップや独立系開発者の間で人気があります。Apple HIGはAppleエコシステムに強く結びついていますが、プラットフォームの期待に最も適合します。クロスプラットフォームプロジェクトには、FlutterとJetpack Compose MultiplatformのおかげでMaterial Designが最適な選択肢です。