Material3テーマ設定ガイド — AIが作るアプリの色を変える方法

はじめに

Jetpack ComposeでMaterial Design 3を使ったテーマ設定は、最初は複雑に見えるかもしれません。しかし、基本を理解すれば、AndroidアプリのUIを自由に色付けできます。このガイドでは、ColorScheme、Dynamic Color、ダークモード、タイポグラフィの基本をカバーします。

1. ColorSchemeの基本構造

Material Design 3では、ColorSchemeオブジェクトが全ての色を管理します。以下は基本的な定義です：

import androidx.compose.material3.ColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.ui.graphics.Color

// ライトテーマの色定義
val LightColorScheme = lightColorScheme(
    primary = Color(0xFF6750A4),           // メイン色
    secondary = Color(0xFF625B71),         // サブ色
    tertiary = Color(0xFF7D5260),          // 第三色
    background = Color(0xFFFFFBFE),        // 背景
    surface = Color(0xFFFFFBFE),           // サーフェス
    error = Color(0xFFB3261E)              // エラー色
)

// ダークテーマの色定義
val DarkColorScheme = darkColorScheme(
    primary = Color(0xFFEADDFF),
    secondary = Color(0xFFCCC7DB),
    tertiary = Color(0xFFEFB8C8),
    background = Color(0xFF1C1B1F),
    surface = Color(0xFF1C1B1F),
    error = Color(0xFFF2B8B5)
)

2. MaterialThemeの設定

ColorSchemeを使ってMaterialThemeを構成します：

import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme

    MaterialTheme(
        colorScheme = colorScheme,
        typography = MyTypography,
        content = content
    )
}

3. ダークモードトグルの実装

ユーザーがダークモードを手動で切り替えられるようにします：

@Composable
fun MyApp() {
    var isDarkMode by remember { mutableStateOf(false) }

    MyAppTheme(darkTheme = isDarkMode) {
        Scaffold { paddingValues ->
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues)
                    .background(MaterialTheme.colorScheme.background)
            ) {
                Button(onClick = { isDarkMode = !isDarkMode }) {
                    Text(if (isDarkMode) "ライト" else "ダーク")
                }
                // アプリのコンテンツ
            }
        }
    }
}

4. Dynamic Colorの活用

Android 12以上では、デバイスの壁紙から自動的にテーマ色を生成できます：

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = MyTypography,
        content = content
    )
}

5. タイポグラフィの基本設定

Material Design 3では、タイポグラフィもテーマの一部です：

import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val MyTypography = Typography(
    displayLarge = TextStyle(
        fontSize = 57.sp,
        fontWeight = FontWeight.Bold
    ),
    bodyMedium = TextStyle(
        fontSize = 14.sp,
        fontWeight = FontWeight.Normal
    ),
    labelSmall = TextStyle(
        fontSize = 11.sp,
        fontWeight = FontWeight.Medium
    )
)

6. Surfaceコンポーネントの色設定

Surface は背景色を参照し、contentColorも自動調整されます：

Surface(
    color = MaterialTheme.colorScheme.surface,
    contentColor = MaterialTheme.colorScheme.onSurface,
    modifier = Modifier.fillMaxWidth()
) {
    Text("このテキストはonSurfaceの色で表示される")
}

テーマの検証ポイント

• コントラスト比: WCAGガイドラインに準拠（通常テキスト4.5:1以上）
• 一貫性: すべての画面で同じColorSchemeを使用
• アクセシビリティ: ユーザーが手動でダークモードを切り替え可能に

Material3を正しく設定することで、プロフェッショナルで一貫性のあるUIが実現できます。AIが生成するアプリでも、このテーマ設定を組み込むことで品質が大幅に向上します。

---

プロダクト

8種類のAndroidアプリテンプレート（全てMaterial3対応）を提供しています：
→ https://myougatheax.gumroad.com

HabitTracker、MeetingTimer、ExpenseMemо、BudgetManager、TaskManagerなど、すぐに使える本格的なAndroidアプリをご利用いただけます。