Android開発30日間マスターシリーズ - Day 8: Material Designの実装 - Googleが推奨するデザインガイドラインの実践

1. Material Design 3（Material You）とは？

Material Design 3（通称：Material You）は、Googleが2021年に発表した最新のデザインシステムです。従来のMaterial Designから進化し、以下の特徴を持っています：

主な特徴

• パーソナライゼーション: ユーザーの壁紙から色を抽出してアプリのテーマを自動生成
• 動的カラーシステム: システム設定に応じて色が変化
• より自然なモーション: 現実世界の物理法則に基づいたアニメーション
• アクセシビリティの向上: より読みやすく、操作しやすいUI

Material Design 3は、Android 12以降でネイティブサポートされており、一貫性のあるユーザー体験を提供します。

2. Material Design 3の導入手順

ステップ1: 依存関係の追加

最新のMaterial Components for Androidを使用します：

// build.gradle.kts (Module: app)
dependencies {
    implementation("com.google.android.material:material:1.11.0")
    
    // Compose使用時（推奨）
    implementation("androidx.compose.material3:material3:1.2.0")
    implementation("androidx.compose.material3:material3-window-size-class:1.2.0")
}

ステップ2: テーマの設定

themes.xml でMaterial Design 3テーマを設定：

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- 動的カラーを有効化 -->
        <item name="android:forceDarkAllowed">true</item>
    </style>
</resources>

ステップ3: 動的カラーの有効化

MainActivity.kt で動的カラーを適用：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Android 12+で動的カラーを適用
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            DynamicColors.applyToActivityIfAvailable(this)
        }
        
        setContentView(R.layout.activity_main)
    }
}

3. 主要なMaterial Design 3コンポーネント

3.1 Extended Floating Action Button (Extended FAB)

従来のFABがより表現力豊かに進化：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:id="@+id/extended_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:text="新規作成"
    app:icon="@drawable/ic_add_24"
    app:iconGravity="start" />

Kotlinでの制御例：

extendedFab.setOnClickListener {
    // クリック時にアイコンのみ表示に縮小
    extendedFab.shrink()
    
    // 3秒後に元に戻す
    Handler(Looper.getMainLooper()).postDelayed({
        extendedFab.extend()
    }, 3000)
}

3.2 Material Design 3 Text Fields

よりモダンなテキスト入力フィールド：

<!-- Filled Text Field -->
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_input_filled"
    style="@style/Widget.Material3.TextInputLayout.FilledBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="メールアドレス"
    app:helperText="例：[e-mail]"
    app:startIconDrawable="@drawable/ic_email_24"
    app:endIconMode="clear_text">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

<!-- Outlined Text Field -->
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_input_outlined"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:hint="パスワード"
    app:endIconMode="password_toggle"
    app:startIconDrawable="@drawable/ic_lock_24">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

3.3 Navigation Rail（中・大画面対応）

タブレットや大画面デバイス向けのナビゲーション：

<com.google.android.material.navigationrail.NavigationRailView
    android:id="@+id/navigation_rail"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/navigation_menu"
    app:headerLayout="@layout/navigation_rail_header" />

メニューリソース（menu/navigation_menu.xml）：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home_24"
        android:title="ホーム" />
    <item
        android:id="@+id/nav_search"
        android:icon="@drawable/ic_search_24"
        android:title="検索" />
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_person_24"
        android:title="プロフィール" />
</menu>

3.4 Material Design 3 Buttons

様々なスタイルのボタン：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- Filled Button (Primary) -->
    <com.google.android.material.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="保存する"
        android:layout_marginBottom="8dp" />

    <!-- Tonal Button -->
    <com.google.android.material.button.MaterialButton
        style="@style/Widget.Material3.Button.TonedButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="キャンセル"
        android:layout_marginBottom="8dp" />

    <!-- Outlined Button -->
    <com.google.android.material.button.MaterialButton
        style="@style/Widget.Material3.Button.OutlinedButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="詳細を見る"
        android:layout_marginBottom="8dp" />

    <!-- Text Button -->
    <com.google.android.material.button.MaterialButton
        style="@style/Widget.Material3.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="スキップ" />

</LinearLayout>

4. カスタムテーマとカラーシステム

4.1 カスタムカラーパレットの定義

<!-- res/values/colors.xml -->
<resources>
    <!-- Material Design 3 Color System -->
    <color name="md_theme_light_primary">#6750A4</color>
    <color name="md_theme_light_onPrimary">#FFFFFF</color>
    <color name="md_theme_light_primaryContainer">#EADDFF</color>
    <color name="md_theme_light_onPrimaryContainer">#21005D</color>
    
    <color name="md_theme_light_secondary">#625B71</color>
    <color name="md_theme_light_onSecondary">#FFFFFF</color>
    <color name="md_theme_light_secondaryContainer">#E8DEF8</color>
    <color name="md_theme_light_onSecondaryContainer">#1D192B</color>
    
    <!-- ダークテーマ用 -->
    <color name="md_theme_dark_primary">#D0BCFF</color>
    <color name="md_theme_dark_onPrimary">#381E72</color>
    <!-- ... 他のカラー定義 -->
</resources>

4.2 Material Theme Builder の活用

Google の Material Theme Builder を使用して、カスタムカラーパレットを生成できます：

1. Material Theme Builder にアクセス
2. ベースカラーを選択または画像をアップロード
3. 生成されたカラーパレットをダウンロード
4. プロジェクトにインポート

5. 実践的な実装例：完全なレイアウト

Material Design 3を活用した完全なレイアウト例：

<!-- activity_main.xml -->
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- App Bar -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="Material Design 3 Sample"
            app:navigationIcon="@drawable/ic_menu_24" />

    </com.google.android.material.appbar.AppBarLayout>

    <!-- メインコンテンツ -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <!-- カード -->
            <com.google.android.material.card.MaterialCardView
                style="@style/Widget.Material3.CardView.Elevated"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <TextView
                        style="@style/TextAppearance.Material3.HeadlineSmall"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="カードタイトル"
                        android:layout_marginBottom="8dp" />

                    <TextView
                        style="@style/TextAppearance.Material3.BodyMedium"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="これはMaterial Design 3のカードコンポーネントです。"
                        android:layout_marginBottom="16dp" />

                    <com.google.android.material.button.MaterialButton
                        style="@style/Widget.Material3.Button.TonedButton"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="アクション" />

                </LinearLayout>

            </com.google.android.material.card.MaterialCardView>

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

    <!-- Bottom Navigation -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_navigation_menu" />

    <!-- Extended FAB -->
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/extended_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:text="作成"
        app:icon="@drawable/ic_add_24"
        app:layout_anchor="@id/bottom_navigation"
        app:layout_anchorGravity="top|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

6. パフォーマンスとベストプラクティス

6.1 テーマの最適化

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
        // 動的カラーの適用（Android 12+）
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            DynamicColors.applyToActivitiesIfAvailable(this)
        }
    }
}

6.2 アクセシビリティの考慮

<!-- 適切なcontentDescriptionの設定 -->
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_favorite_24"
    android:contentDescription="お気に入りに追加"
    android:background="?attr/selectableItemBackgroundBorderless" />

7. まとめ

今回学んだMaterial Design 3の主要なポイント：

✅ 重要な特徴

• 動的カラーシステム: ユーザーの好みに応じたパーソナライゼーション
• モダンなコンポーネント: Extended FAB、Navigation Rail等の新機能
• 改良されたテーマシステム: より柔軟で表現力豊かなデザイン
• アクセシビリティの向上: より多くのユーザーが利用しやすいUI

🚀 次のステップ

• Jetpack Compose: 宣言的UIでのMaterial Design 3実装
• アダプティブレイアウト: 様々な画面サイズに対応したデザイン
• アニメーション: Material Motion システムの活用
• カスタムコンポーネント: 独自の Material Design 3 コンポーネント作成

Material Design 3を適切に実装することで、現代的で使いやすく、Androidエコシステムと調和したアプリを作成できます。

次回は、これらのUIコンポーネントを活用した画面遷移とナビゲーションパターンの実装について詳しく解説します。

この記事が役に立ったと思ったらいいね👍やストックをお願いします。

---

参考リンク

• Material Design 3 公式サイト
• Material Components for Android
• Material Theme Builder
• Android Developers - Material Design