Jetpack Compose Material3 テーマカスタマイズ完全ガイド

Jetpack Compose Material3 テーマ カスタマイズ 方法をステップバイステップで解説

Jetpack ComposeのMaterial3テーマカスタマイズは、アプリ全体のUIデザインの一貫性を確保する上で不可欠な技術です。特にColorScheme・Typography・Shapeの調整を通じて、独自のブランドイメージを反映させることが可能になります。本記事では、初心者でも理解しやすいステップバイステップガイドで、Material3テーマカスタマイズの手順と実装コードを解説します。

Material3テーマカスタマイズの基本構造を理解する

Jetpack ComposeにおけるMaterial3テーマは、Theme.ktファイルに定義され、アプリ全体のデザインルール（色・文字・形）を統一的に管理します。このファイルを作成・編集することで、UIコンポーネントが一貫した見た目を持つようになります。

テーマ定義ファイルの作成方法

Jetpack Composeではres/values/Theme.ktという形式ではなく、src/main/kotlin/[パッケージ名]/Theme.ktにテーマを定義します。Material3ライブラリをプロジェクトに依存させるため、build.gradleに以下の行を追加します：

Theme.ktの役割と構成

Jetpack ComposeではXMLではなくKotlinファイルでテーマを定義します。以下が基本的な構造です。

注意点: 新規プロジェクトでは、Theme.ktにテーマ設定がないとデフォルトのMaterial2スタイルが適用されるため、明確なカスタマイズが必要です。

ColorSchemeによるカラーテーマの定義

Material3のColorSchemeインターフェースを用いることで、アプリ全体の色調を統一的に設計できます。動的なカラー設定は、ユーザー環境（OSテーマなど）に応じた柔軟なUI実現が可能です。

Primary/Secondary色の指定方法

1. Colorsクラスで基本色を定義します。
   kotlin
val ColorScheme = lightColorScheme(
primary = Color(0xFF6750A4),
secondary = Color(0xFF687CFB),
background = Color(0xFFF1F0F9)
)

2. ダークモード対応にはdarkColorScheme()を併用します。

動的カラー設定の実装例

動的なカラーは、システムテーマまたはユーザー設定に応じて切り替えることで、UIの一貫性と柔軟性を両立させます。以下のコードでは最新版のAPIを使用しています：

Typographyで一貫性のあるフォント設計

Material3ではTypographyクラスを使用して、見出し・本文などのテキストスタイルを階層構築できます。これにより、UIデザインが整った印象になります。

FontFamilyのカスタム設定

1. FontFamilyを定義する際に、任意のフォントファイル（.ttfなど）を読み込みます。
   kotlin
val fontFamily = FontFamily(
Font(R.font.my_custom_font_regular, FontWeight.Normal),
Font(R.font.my_custom_font_bold, FontWeight.Bold)
)

2. TypographyクラスにカスタムのFontFamilyを設定します。

テキストスタイルの階層構築

ローカライズ対応: 多言語アプリでは、言語ごとの文字間隔やフォントサイズを調整する必要があります。

Shape調整でUIの統一性を実現

Material3のShapeクラスを使用することで、コンポーネント（ボタン・カードなど）の角丸度を一括して管理できます。これにより、アプリ全体で形状が統一されるため、デザインの一貫性が向上します。

CornerRadiusのカスタマイズ方法

1. CornerSizeを使って各辺の角丸度を指定します。
   kotlin
val shape = RoundedCornerShape(topStart = 8.dp, bottomEnd = 24.dp)

2. 一部のコンポーネント（例: ボタン）にだけ特殊な形状を適用する場合も可能です。

コンポーネント間の形状整合

設計ポイント: 違うコンポーネントでも、形状の違いは控えめに保ち、ユーザーが混乱しないよう統一感を持たせることが重要です。

ダークモード対応の実装パターン

Material3ではシステムテーマやユーザー設定に基づいて、アプリが自動的にダークモードへ切り替わる仕組みを簡単に実現できます。これは、UXの向上とバリアフリー設計に大きく貢献します。

Material3のDarkTheme活用法

1. SystemUiControllerを使用してシステムテーマを取得し、それに応じてMaterialThemeを切り替えます。
   kotlin
val colorScheme = if (systemUiController.isInDarkTheme) {
darkColorScheme(...)
} else {
lightColorScheme(...)
}

2. MaterialTheme.colorScheme = colorSchemeとすることで、テーマが自動で変更されます。

動的テーマ切り替えコード

ユーザーが明るい/暗いモードを手動で選べるようにするには、以下のコードのようにPreferenceを連携させます：

Codelabで学ぶ実践的なカスタマイズ

公式ドキュメントのCodelabやサンプルプロジェクトを参考にすることで、テーマカスタマイズの理解を深めることができます。実際にコードを適用しながら、UIの変化を確認することが重要です。

サンプルプロジェクト構築手順

1. Jetpack Compose公式Codelabからサンプルプロジェクトをダウンロードします。
2. Theme.ktファイルを開き、MaterialThemeのカスタマイズ箇所を見つけてください。
3. 自分オリジナルの色やフォント設定に書き換えましょう。

注意: リンク先は英語版ですが、最新バージョンのコード実装が反映されていることを確認してください。

テーマ適用のデバッグ方法

• ログ出力: Log.d("Theme", "Current color scheme: $colorScheme")で現在適用されているテーマを確認します。
• コンポーネントごとにテーマを確認: 各UIコンポーネントに個別のテーマを適用し、統一性が保たれているか確認。

実践アドバイス: テーマの変更点は、アプリ全体で一貫して反映されているかチェックする癖をつけましょう。見逃すとデザインのズレが発生します。

まとめ

• Material3テーマカスタマイズではTheme.ktファイルを用いて色・フォント・形状を統一的に管理する
• ColorSchemeで動的なカラー設定、Typographyで文字スタイルの一貫性を確保し、ShapeでUIの統一感を実現する
• ダークモード対応はUX向上に不可欠で、システムテーマやユーザー設定と連携させることがポイント
• Codelabやサンプルプロジェクトを活用して、実際にコードを書きながら学ぶことで理解が深まる

記事内で提供するコードをプロジェクトに即座適用し、Material3テーマのカスタマイズを試してみましょう。