Material Design 3（Material 3）とは？使い方・仕様の数値とExpressiveの実装別対応

Material Design 3（Material 3、略してM3）は、Googleが公開しているデザインシステムの第3世代です。2021年にMaterial Youとして発表され、1つの色から配色一式を作るダイナミックカラーと、色・文字・形を名前で管理するデザイントークンを土台にしています。2025年5月には、その拡張としてMaterial 3 Expressiveが発表されました。

この記事では、仕様をJetpack Composeのソースに入っている実際の値（色の数・文字サイズ・角丸）で示し、ComposeとFlutterでM3のテーマを当てる手順を載せます。後半では、Expressiveがどのライブラリのどの版で使えるかを、2026年10月24日時点の公開版とリリースノートで整理しました。

まとめ：Material 3の要点とExpressiveの使える範囲

• Material 3は2021年のMaterial Youを起点とするGoogleのデザインシステムです。ComposeのColorSchemeは48の色の役割を持ち、文字は15スタイル、角丸は4dp〜28dpの段階で定義されています。
• 使い始めるだけなら、ComposeはMaterialTheme、FlutterはColorScheme.fromSeedでテーマを当てれば済みます。Android 12以降は壁紙の色を使うダイナミックカラーも1行で使えます。
• Material 3 Expressiveは「Material 4」ではなく、M3の上に形状・モーション・部品を足した拡張です。
• Jetpack Composeでは、Expressiveの部品が入った1.5.0が2026年10月にベータ版になりました。安定版1.4.0で使えるのはナビゲーションバーとナビゲーションレールだけです。
• Android Views版は1.14.0でExpressiveに対応したあと、2026年5月からメンテナンスモードです。Flutterのmaterial_uiは1.8.0でアイコンボタンと形状カタログまで、Webの公式実装はlabs（実験扱い）まで、ReactのMUIはM3自体に未対応です。

Material Design 3の定義とMaterial 2からの変更点

Material Designは2014年に発表され、2018年のMaterial Theming（のちのMaterial 2）を経て、2021年5月18日のGoogle I/Oで発表されたMaterial Youで第3世代に入りました。公式サイトはm3.material.ioで、Figma用のデザインキットや配色ツールもここから辿れます。

ダイナミックカラーと48のカラーロール

M2との最大の差は配色の決め方です。M2はブランドのプライマリ色とセカンダリ色を人が選んでいました。M3では元になる色（シード色）から、色相・彩度・明度の3軸で色を扱うHCT色空間を使ってトーナルパレットを作り、それを「primary」「onPrimary」「primaryContainer」のような役割（カラーロール）へ割り当てます。Android 12以降の端末では、壁紙から抽出した色をシードにするダイナミックカラーが使えます。

Compose Material3のトークン定義（PaletteTokens）では、各パレットの基本は明度0から100までの13トーン（0・10・20・30・40・50・60・70・80・90・95・99・100）で、Neutral系にだけsurface用の追加トーン（87・92・94・96・98など）があります。ライトテーマの既定値は次のように割り当てられています。

同じ系統でsecondary・tertiary・errorにも4つずつ役割があり、surface系や後から加わった固定色（primaryFixed等）を含めると、ComposeのColorSchemeは48色を持ちます。「primaryの上にはonPrimary」と組み合わせが決まっているため、自前で色を選ぶよりコントラスト不足が起きにくいのが実務上の利点です。生成された色を上書きした場合は、コントラスト比を自分で確かめてください。基準はWebアクセシビリティのコントラスト比：4.5対1と3対1の適用範囲・CSS実装・自動検証の落とし穴で扱っています。

タイプスケール15種と角丸の値

文字はdisplay・headline・title・body・labelの5つの役割に、large・medium・smallの3サイズを掛けた15スタイルです。デザイナーと実装者がtitleMediumと言えば同じ値を指せます。Composeの既定値（文字サイズ／行の高さ、単位sp）は次のとおりです。

角丸はextra small 4dp・small 8dp・medium 12dp・large 16dp・extra large 28dpの5段階に、角なしと完全な円を加えた構成です。Expressiveでは20dp・32dp・48dpの段階が追加されました。Webの公式実装でも角丸をCSSカスタムプロパティで指定でき、たとえば--md-sys-shape-corner-smallを使います。トークンで仕様を共有する考え方は、社内のデザインシステムとは？構成要素と作り方、ガイドライン・スタイルガイドとの違いにもそのまま応用できます。

影ではなく色で表す高さと状態レイヤー

M2では要素の高さ（エレベーション）を影の濃さで表していました。M3では面の色の階調でも高さを表します。ComposeのSurfaceはtonalElevation（色の階調）とshadowElevation（影）を別々に指定でき、tonalElevationを上げると既定ではprimary由来のsurfaceTintが重なります。カードやシートの段差を最初から色で分けたい場合は、前の表のsurfaceContainer系を使い分けます。

押した・触れたといった状態は、部品の上に半透明の色を重ねる「状態レイヤー」で表します。Composeの既定の不透明度は、ホバー8%、フォーカスと押下が10%、ドラッグが16%です。独自の部品を作るときもこの値に合わせると、標準部品と並べたときの反応がそろいます。

Material Design 3の使い方：Compose・Flutterのテーマ設定

M3を使い始めるのにExpressiveは要りません。安定版のライブラリでテーマを当てるだけで、ボタンやカードなどの標準部品がM3の見た目になります。

Jetpack Composeのダイナミックカラー設定

ComposeではMaterialThemeに配色・文字・形の3つを渡します。ダイナミックカラーはAndroid 12（API 31）以降でしか使えないため、それより前の端末向けに固定の配色を用意して切り替えます。BOM 2026.09.00に含まれるmaterial3は安定版1.4.0です。

// build.gradle.kts
dependencies {
    implementation(platform("androidx.compose:compose-bom:2026.09.00"))
    implementation("androidx.compose.material3:material3")
}

// Theme.kt
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

@Composable
fun AppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val context = LocalContext.current
    val colorScheme = when {
        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S ->
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        darkTheme -> darkColorScheme()
        else -> lightColorScheme()
    }
    MaterialTheme(colorScheme = colorScheme, typography = Typography(), shapes = Shapes(), content = content)
}

ブランド色を固定したい場合は、ダイナミックカラーの分岐を外し、Material Theme Builderで書き出したlightColorScheme(primary = ...)を渡します。Compose自体の仕組みとBOMでの版管理はJetpack Composeとは？宣言的UIの仕組みとBOM運用・採用判断を解説を参照してください。

FlutterのColorScheme.fromSeedによる配色設定

FlutterはFlutter 3.16からuseMaterial3が既定で有効なので、シード色を1つ渡せばM3の配色になります。contrastLevelは0.0が標準、0.5が中コントラスト、1.0が高コントラストです。

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6750A4)),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xFF6750A4),
      brightness: Brightness.dark,
    ),
  ),
  home: const Scaffold(),
);

FlutterではMaterialライブラリが本体からmaterial_uiパッケージへ切り出されている途中です。新規に始めるなら、後述のmaterial_uiからMaterialAppを読み込む形にしておくと移行の手間が減ります。

Material 3 Expressiveで変わった点

Material 3 Expressiveは2025年5月13日に発表されました。M3を置き換える新世代ではなく、M3のトークンとカラーロールの上に形状・モーション・文字の強調と新しい部品を加えた拡張です。

Expressiveの追加・更新コンポーネントとCompose API

公式サイトはExpressiveで追加・更新した部品を14件挙げています（アプリバー、ボタングループ、カルーセル、ボタン、拡張FAB、FABメニュー、FAB、アイコンボタン、ローディングインジケーター、ナビゲーションバー、ナビゲーションレール、プログレスインジケーター、スプリットボタン、ツールバー）。Composeのmaterial3で関数名まで確認できる主な部品は次のとおりです。

既存画面に影響が大きいのはナビゲーションです。ナビゲーションドロワーより、展開できる幅広のナビゲーションレールが推奨されるようになり、ドロワー前提の画面は設計の見直しが要ります。

35種類の形状とスプリングで動くモーション

ComposeのMaterialShapesには、Circle・Pill・Cookie12Sided・Clover4Leaf・Heartなど35種類の形状が定義されています。形状どうしをモーフィング（変形）させる前提で、押したボタンの角が丸から四角へ変わるといった表現に使います。

モーションは時間とイージング曲線で指定する方式から、ばねの物理（スプリング）で指定する方式へ移りました。ComposeではMotionScheme.standard()とMotionScheme.expressive()の2種類があり、standardは実用的な要素と繰り返しの操作向け、expressiveは主役になる要素向けで、後者のほうが跳ねるような動きになります。

Googleが公表した調査結果と、その読み方

Googleのデザインチームは、調査記事Better, Easier, Emotional UXで、Expressiveの根拠として46件の調査と世界18,000人超の参加者を挙げています。視線計測では重要な要素を見つける速さが最大4倍になり、45歳以上の参加者が若い参加者と同じ速さで要素を見つけられたと報告しています。18〜24歳ではExpressive版を好む割合が最大87%でした。

同じ記事は限界も書いています。メディアプレーヤーやメールで機能する表現が銀行のような画面に合うとは限らないこと、既存の操作パターンを崩した試作は見た目の評価が高くても使いやすさの評価が下がったことです。数字だけを引いて「Expressiveにすれば操作が4倍速くなる」と説明するのは不正確です。

端末側でMaterial 3 Expressiveを使う方法（Pixel・Wear OS）

スマートフォンの利用者として新しい見た目を使いたい場合、設定画面にExpressiveを切り替えるスイッチはありません。OSとアプリの更新で届くデザインです。

• Pixel：2025年9月のPixel Drop（Android 16 QPR1）で、Pixel 6以降とPixel Tabletに配信が始まりました（Googleの告知は米国時間9月3日付）。システムアップデートを最新にするのが唯一の方法です。
• スマートウォッチ：Wear OS 6がExpressiveを採用しています。最初の搭載機は2025年7月のGalaxy Watch8シリーズです。Wear OSのアプリを作る場合は、スマートフォン用のmaterial3ではなくWear Compose Material 3ライブラリを使うようリリースノートで案内されています。
• Pixel以外のAndroid端末：メーカー独自のUI（One UIなど）が載っているため、同じ見た目にはなりません。Gmail・Googleフォトなどのアプリは、アプリ側の更新でExpressive化されたものが届きます。
• Magiskモジュール等での有効化：非公式の改造で、端末の保証やセキュリティ更新に影響します。業務端末では使わないでください。

プラットフォーム別のExpressive対応状況（2026年10月24日時点）

同じ「Material 3対応」でも、Expressiveまで使えるかはライブラリごとに異なります。版は各配布元（Google Maven・pub.dev・npm）に公開されている最新版です。

Jetpack Compose：1.5.0がベータ版に到達

Compose Material3の安定版1.4.0は2025年9月24日に公開されました。その前の1.4.0-beta01（2025年7月30日）でExperimentalMaterial3ExpressiveApiの付いた公開APIがすべて削除され、1.5.0のアルファ版へ移されています。このため1.4.0で使えるExpressive関連の部品は、先に安定化していたShortNavigationBarとWideNavigationRailだけです。

1.5.0は2026年10月7日にbeta01、10月21日にbeta02が公開されました。beta02のソースでは、MaterialExpressiveTheme・ButtonGroup・FloatingToolbar・FABメニュー・スプリットボタンに実験扱いの注釈がありません。注釈が残っているのはLoadingIndicatorとMaterialShapesなどごく一部です。AndroidXの版の規約では、ベータ版は機能が出そろったAPIを持ち本番で使える段階とされ、APIが確定するのは次のRC（リリース候補）からです。beta01のリリースノートにもAPIの変更が載っているため、採用するなら版を固定し、更新のたびにリリースノートを確認します。

// build.gradle.kts（BOMではなくmaterial3だけを明示指定）
dependencies {
    implementation("androidx.compose.material3:material3:1.5.0-beta02")
}

// Theme.kt
import androidx.compose.material3.MaterialExpressiveTheme
import androidx.compose.material3.MotionScheme
import androidx.compose.material3.expressiveLightColorScheme
import androidx.compose.runtime.Composable

@Composable
fun AppExpressiveTheme(content: @Composable () -> Unit) {
    MaterialExpressiveTheme(
        colorScheme = expressiveLightColorScheme(),
        motionScheme = MotionScheme.expressive(),
        content = content,
    )
}

Android Views：1.14.0でExpressive対応、その後メンテナンスモード

XMLレイアウトで作るAndroid Views向けのMaterial Components for Android（MDC-Android）は、2025年9月3日の1.13.0ではExpressiveを外して安定版を出し、2026年5月13日の1.14.0でExpressiveを安定版に入れました。テーマはTheme.Material3Expressive.DayNight.NoActionBarのように指定します。

その6日後の2026年5月19日、Google I/O 2026に合わせてAndroidは「Compose First」を宣言し、MDC-AndroidのREADMEにはメンテナンスモードの告知が入りました。廃止の予定はないため既存アプリはそのまま動きますが、Expressiveの今後の更新はCompose側にしか入りません。

Flutter：material_ui 1.8.0のアイコンボタン・形状対応

Flutterチームは2025年5月14日、Expressiveを当面は開発しないと表明し、同年7月29日にはMaterialとCupertinoを本体から独立パッケージへ切り出してExpressiveはそちらで進める方針に改めました。2026年8月12日にmaterial_ui 1.0.0が公開され、9月28日の1.5.0でアイコンボタンがExpressive表示に対応しています。

2026年10月20日のmaterial_ui 1.8.0では、Composeと同じ35種類の形状を持つMaterialShapesと、形状を変形させながら描くMaterialShapeBorderが追加されました。ただしStyleVariant.material3Expressiveで見た目を切り替えられる部品は、1.8.0でもアイコンボタンだけです。material_ui 1.4.0以降はFlutter 3.47以上が必要で、次の例はflutter pub add material_uiで依存関係を追加したプロジェクト向けです。

import 'package:material_ui/material_ui.dart';

void main() {
  final theme = ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6750A4)),
    iconButtonTheme: const IconButtonThemeData(
      variant: StyleVariant.material3Expressive,
    ),
  );
  // material_ui側のMaterialAppに渡す
  runApp(MaterialApp(
    theme: theme,
    home: Scaffold(
      body: Center(child: IconButton(onPressed: () {}, icon: const Icon(Icons.favorite))),
    ),
  ));
}

旧来のpackage:flutter/material.dartに依存するパッケージが残っている場合は、MaterialApp.builderでMaterialUiCompatibilityBridgeを挟むと古いウィジェットにもテーマが渡ります。移行の手順と期限はFlutter 3.47とは？material_ui移行・iOS 15と3.47.7までの修正【2026年10月時点】で解説しています。

Web・React：公式実装は保守のみ、ReactのMUIはM3自体が保留

GoogleのWeb向け公式実装Material Web（@material/web）は、2024年6月からREADMEに「新しいメンテナーが見つかるまでメンテナンスモード」と掲げています。それでも2026年7月15日に2.5.0が公開され、Expressiveのボタン・FAB・アイコン・スプリットボタン・リスト・メニューがlabs（実験扱いのディレクトリ）に追加されました。安定版の部品ではないので、書き換えられる前提で取り込む必要があります。

Angular Materialは2024年5月22日の18.0.0でM3対応を安定版にしましたが、Expressiveには対応していません。ReactのMUI（Material UI）は、2021年10月27日に立てられたM3対応のIssueが「on hold（保留）」のまま開いており、10月9日公開の9.5.0もM2系のデザインです。Reactで「Material 3 Expressive」の見た目が必要なら、MUIのテーマを上書きして近づけるか、Theme Builderで書き出したCSSトークンを自前の部品に当てることになります。MUIのテーマ設定はMaterial UIとは：v9系の導入からGrid・テーマ設定までコード付きで解説にまとめています。

FigmaとMaterial Theme Builderでテーマを作る手順

デザイン側は、実装より先にExpressiveを使えます。

1. FigmaのCommunityでGoogle公式の「Material 3 Design Kit」を複製します。
2. Material Theme Builder（WebアプリまたはFigmaプラグイン）でシード色を1つ決め、ライト・ダーク・コントラスト別の配色を生成します。
3. 生成した配色をデザインキットの変数に適用し、画面を組みます。
4. Webアプリ版の書き出しで、Jetpack Compose（Theme.kt）・Android Views（XML）・Web（CSS）・Flutter（Dart）・Material Theme（JSON）から実装先の形式を選んで開発者に渡します。

注意したいのは、デザインキットにある部品が実装先のライブラリにあるとは限らない点です。前章の表のとおり、FlutterやWebではExpressiveの部品の多くがまだ使えません。画面を作る前に実装先で使える部品を確かめておくと手戻りを防げます。UIのアニメーション試作はFigma Motionとは？使い方・書き出し・無料でできる範囲を解説【2026年10月】でも扱っています。

Material 3 Expressiveを採用しない方がよい場面

M3は業務アプリでもそのまま使える土台です。Expressiveは別で、次の条件に当てはまるなら通常のM3にとどめる判断を勧めます。

• FlutterやWebで、Androidネイティブと同じ見た目を約束する案件：Composeにある部品の多くがFlutterとWebには安定版で存在しません。「全プラットフォームでExpressive」を要件にすると、足りない部品を自作する費用が発生します。
• 金融・医療・業務システムなど、正確さと慣れが優先される画面：Google自身が銀行の画面には合わない場合があると書き、操作パターンを崩した試作で使いやすさが落ちた結果も公表しています。
• 安定版のライブラリしか本番に入れられない案件：Composeの安定版1.4.0で使えるのはナビゲーションバーとナビゲーションレールだけです。ベータ版を使えない品質基準なら、この2部品にとどめ、テーマやボタンの切り替えは1.5.0の安定版を待ちます。
• iOSでも同じアプリを出す案件：iOS 26以降のLiquid Glassとは設計思想が違い、両OSで同じ見た目を狙うとiPhoneの利用者には作法の違うアプリに見えます。Liquid Glassの考え方はLiquid Glassとは？仕組みと対応OS、SwiftUI・CSSでの実装方法【iOS 27の変更点まで】で解説しています。

逆に、Composeで作るAndroid専用の消費者向けアプリで、ブランドの印象を強く出したい場合はExpressiveを試す価値があります。その場合も、まずMaterialExpressiveThemeとボタンだけ差し替え、ナビゲーションの構成変更は利用者の反応を見てから進めるのが安全です。どこまでExpressiveに寄せるかを画面設計の段階から決めたい場合は、UI/UXデザインの支援もご相談いただけます。

よくある質問

Material Design 3（Material 3・MD3・M3）とは何ですか？

Googleが公開しているデザインシステムの第3世代です。2021年にMaterial Youとして発表されました。シード色から自動生成する配色（ダイナミックカラー）と、色・文字・形を名前で管理するデザイントークンが特徴です。

Material 3 ExpressiveとMaterial 3の違いは何ですか？

ExpressiveはM3の拡張で、別の世代ではありません。M3のトークンとカラーロールを引き継いだうえで、35種類の形状、スプリングで動くモーション、ボタングループやフローティングツールバーなどの部品が加わりました。

Material 3はいつから使えますか？

M3そのものは2021年から使えます。Expressiveは2025年5月13日の発表で、Androidの端末ではAndroid 16のアップデートで届きました。開発ライブラリでは、Android Viewsが2026年5月の1.14.0から安定版で使えます。Composeは安定版1.4.0でナビゲーションバーとナビゲーションレールが使え、それ以外は2026年10月時点で1.5.0のベータ版です。

FlutterでMaterial 3 Expressiveは使えますか？

一部だけ使えます。material_ui 1.8.0（2026年10月20日公開）で、IconButtonThemeDataのvariantにStyleVariant.material3Expressiveを指定したアイコンボタンがExpressive表示になり、35種類の形状を描くMaterialShapesも使えます。ボタングループなどの新しい部品はまだありません。

ReactでMaterial 3を使うにはどうすればよいですか？

MUIはM3に対応しておらず、対応のIssueは保留のままです。Material Web（Web Components）をReactから使う方法か、Material Theme Builderで書き出したCSSトークンを自前のコンポーネントに当てる方法が現実的です。

関連記事

• Jetpack Composeとは？宣言的UIの仕組みとBOM運用・採用判断を解説
• Flutter 3.47とは？material_ui移行・iOS 15と3.47.7までの修正【2026年10月時点】
• Material UIとは：v9系の導入からGrid・テーマ設定までコード付きで解説
• FlutterのLiquid Glass対応状況｜公式実装は作業中、今使えるパッケージと選び方
• デザインシステムとは？構成要素と作り方、ガイドライン・スタイルガイドとの違い