【Jetpack Compose】マテリアルデザインのカラースキームを設定する方法

ホーム

MOBILE

この記事にはプロモーションが含まれています。

投稿：2023・11・25

更新：2023・11・25

個人でアプリ開発を行う場合、デザインもプログラミングも全て一人で行う必要があります。

ですが、アプリ開発に必要なプログラミングスキルを身につけるのだけでも大変なのに、その上デザインのスキルも磨き上げるなんてちょっと無理ゲーですよね。😅

そこで活用したいのが、Googleが提供しているマテリアルデザインです。

マテリアルデザインというのは、Googleが推奨している、『こういうふうにデザインしたらユーザーが使いやすくなるし、良い感じにできるよ』っていうデザインのことです。

マテリアルデザインにはボタンの形なども含まれるのですが、今回は『色』にスポットライトを当ててみたいと思います。

Jetpack Composeでマテリアルデザインのカラースキームを設定する方法を、一緒に確認していきましょう！

この記事を読むことで分かること

・カラースキームとマテリアルデザインについて
・マテリアルデザインのカラースキームをJetpack Composeで利用する方法
・Material Theme Builderを使ってオリジナルカラースキームを作る方法

▼動画解説は下のサムネイルから（YouTubeに飛びます）

そもそもカラースキームって？

マテリアルデザインのカラースキームをアプリ（Jetpack Compose）に設定する以前に、『そもそもカラースキームって何なの？』という疑問を持っている方もいるかと思います。

なので、実践に入る前にまず軽くカラースキームの概要と、マテリアルデザインにおけるカラースキームについて確認していきましょう。

カラースキームとは色彩計画とも訳され、色の持つ視覚的・心理的な性質を利用して、見やすくてまとまりのある配色（色の組み合わせ）を作ることを言います。

例えば、赤は血の色を連想させるため、人間は本能的に赤色から危険や注意を感じ取ると言われており、エラーや警告を示すカラーとしてよく採用されています。

もし、重大なエラーを知らせる色が薄いグレーとか地味な色だと、見逃されてしまう恐れが高まってしまうでしょう。

また、白の背景色に黒の文字色の組み合わせは見やすいですが、白の背景色に薄いピンクの文字色とかだと、コントラストが薄すぎて字が読みづらくなってしまいますよね。

ただ単に見た目のカッコよさ、スタイリッシュさを求めるだけでなく、どのような色の組み合わせにしたら視覚的に見やすくなるか？不特定多数のユーザーにとって使いやすくなるか？…ということに注意を払うことも大切です。

こういったアクセシビリティなどの要素も踏まえた上で、『メインカラーはA、サブカラーはB、エラーのカラーはC』…というふうに配色を決定することがカラースキームということになります。

そしてマテリアルデザインでは、ユーザーにとって見やすくて使いやすいとされるカラースキームが細かく定義されています。

マテリアルデザインのカラースキームを利用することで、開発者が『背景色はこの色で、文字色はこの色に設定して…』といったことを、いちいち考えなくて良くなるというのが、マテリアルデザインを利用する最大のメリットです。

なお、マテリアルデザインのカラースキームには次のようなキーワードが出てくるので、代表的なものだけでも覚えておくと便利です。

Primary（プライマリ）: メインカラー。特に強調したいボタンや、アクティブ状態を示したいときなどに使う色
Secondary（セカンダリ）: 補助的なアクセントカラー。Surface（背景）に対し、目立たない形で色の区別をつけたい時に使う色
Tertiary（ターシアリ）: 目立つアクセントカラー。Primaryとは別の意味・目的で目立たせたい時などに使う。
Error（エラー）: 文字通り、エラー（警告）を示す時に使う色
Surface（サーフェス）: Microsoftのパソコン…ではなく、背景に使う色

とりあえず、これだけ押さえておけばOKです。ただ、鋭い人は次のように思うかもしれません。

「…あれ？強調したいボタンの色にPrimaryを使えば良いのはわかったけど、その上に乗せるテキストの色はどうすればいいの？」

ご安心ください。実は、Primaryという分類の中でさらに色が分けられており、その中にはOn Primaryという色もあります。

On Primaryはその名の通り、Primaryの上に乗せるテキストやアイコンに使用する色であり、Primaryとは別に何か他の分類を覚えておく必要はありません。

以上が、カラースキームとマテリアルデザインにおけるカラースキームについての基本です。

デザインについてしっかり学んでいない人がテキトーに配色してしまうと、まとまりがなく見づらいデザインになってしまいがちです。

芸術大学出身とか、デザイン関係の仕事を長くしてきた…みたいな個人開発者でない限り、基本的にマテリアルデザインのカラースキームを利用した方がベターだと言えるでしょう。

POINT!

・カラースキームとは色が持つ効果を考慮して行う配色計画のこと！
・マテリアルデザインでは、ユーザーにとって見やすく使いやすいカラースキームが定義されている！
・PrimaryやSurfaceなど、マテリアルデザインにおける代表的なキーワードを覚えておくと便利！

マテリアルデザインのカラースキームを利用してみよう

実は、何か特別な設定をしなくても、Jetpack Composeではデフォルトでマテリアルデザインのカラースキームを利用することができます。

新しくプロジェクトを立ち上げ、theme > Theme.kt ファイルを開いてみると次のようなコードがデフォルトで記載されているはずです。

Theme.kt

import androidx.compose.foundation.layout.Arrangement
import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import aandroidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import aandroidx.core.view.WindowCompat

private val DarkColorScheme = darkColorScheme( // …1
   primary = Purple80,
   secondary = PurpleGrey80,
   tertiary = Pink80
)

private val LightColorScheme = lightColorScheme( // …2
   primary = Purple40,
   secondary = PurpleGrey40,
   tertiary = Pink40

   /* Other default colors to override
   background = Color(0xFFFFFBFE),
   surface = Color(0xFFFFFBFE),
   onPrimary = Color.White,
   onSecondary = Color.White,
   onTertiary = Color.White,
   onBackground = Color(0xFF1C1B1F),
   onSurface = Color(0xFF1C1B1F),
   */
)

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

       darkTheme -> DarkColorScheme
       else -> LightColorScheme
   }
   val view = LocalView.current
   if (!view.isInEditMode) {
       SideEffect {
           val window = (view.context as Activity).window
           window.statusBarColor = colorScheme.primary.toArgb()
           WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
       }
   }

   MaterialTheme( // …4
       colorScheme = colorScheme,
       typography = Typography,
       content = content
   )
}

このコードにより、マテリアルデザインのカラースキームが適用されるようになっているのですが、このコードのキーとなる部分にコメントで番号を入れているので、その部分に注目してみましょう。

1と2の部分で、ライトモードとダークモードのカラースキームが定義されています。Purple80 など色に関する部分は別のファイル（Color.kt）で定義されています。

ここでは、Primary、Secondary、Tertiaryの３つが定義されており、必要に応じてデフォルトの設定カラーを書き換えられるようにコメントアウトされている部分がありますね。

3の部分で、ダイナミックカラーモードが有効になっているかどうかと、端末がダイナミックカラーモードに対応しているかどうかを判定した上で、ライトモードもしくはダークモードのどちらになっているかを判定し、それに適したカラースキームが設定されるように定義されています。

最後に4の部分で、マテリアルデザインのテーマとして使用できるように設定されています。

ちなみに、ダイナミックカラーとはAndroid 12以降のスマートフォンで利用できる機能で、ユーザーが端末に設定している壁紙の色からアプリのカラースキームを生成し、それをアプリで利用できるというものです。

ユーザーの端末の設定に応じてアプリの配色が変わるので、アプリの色をユーザーの好みに合わせることができますが、逆に言えばダイナミックカラーモードでは開発者側でアプリの色をコントロールすることができません。

なので、企業のカラーやロゴのカラーなどにアプリの配色を合わせたい場合などは、ダイナミックカラーモードを無効にする必要があります。

この記事でも任意のカラースキームにおける表示を確認したいので、ダイナミックカラーはオフ（false）にしておきましょう。
コードをまるっと書き換えても良いのですが、ここでは簡易的にデフォルト値をfalseにしておくだけにしておきます。

Theme.kt

fun SampleTheme(
   darkTheme: Boolean = isSystemInDarkTheme(),
   // Dynamic color is available on Android 12+
   dynamicColor: Boolean = false, // <- changed
   content: @Composable () -> Unit
)

さて、Theme.ktに記載されたコードを見れば分かるように、デフォルトの状態ではPurple（紫色）がプライマリカラーとして設定されています。

それをそのまま利用すれば、特に何も設定することなくマテリアルデザインのカラースキームを利用することが可能です。

たとえば、Buttonコンポーザブルを利用してボタンを配置してみましょう。

すると、カラーの設定を何もしていないのに、ボタンカラーがPrimary（紫色）に設定されます。

これはデフォルトでButtonコンポーザブルのボタンカラーがPrimaryになるように設定されているからです。

Kotlin

@Composable
fun SampleButton(modifier: Modifier = Modifier) {
   Button(
       onClick = { /*TODO*/ },
       modifier = modifier.padding(16.dp)
   ) {
       Text(text = "Button")
   }
}

@Preview(showBackground = true)
@Composable
fun SampleButtonPreview() {
   SampleTheme {
       SampleButton()
   }
}

この仕様を知らないと、「あれ？なんで勝手に紫色になるの？紫って好みじゃないんだけど…」と戸惑ってしまうかと思います。（筆者もその一人でした笑）

考え方によっては余計なお世話のようにも思われる仕様ですが、いちいちボタンに色を指定しなくても良いのでとても便利です。

ただ、普通のボタンならコレで良いですが、削除やキャンセルボタンが同じ色では分かりづらいですよね。

マテリアルデザインのカラースキームを利用すれば、ボタンの役割に応じてカラーを変更することも容易になります。

先程紹介したコードを少し書き換えて、Buttonコンポーザブルにマテリアルテーマのerrorカラーを適用させてみましょう。

Kotlin

@Composable
fun SampleButton(modifier: Modifier = Modifier) {
   Button(
       onClick = { /*TODO*/ },
       modifier = modifier.padding(16.dp),
       colors = ButtonDefaults.buttonColors(
           containerColor = MaterialTheme.colorScheme.error
       )
   ) {
       Text(text = "DELETE")
   }
}

@Preview(showBackground = true)
@Composable
fun SampleButtonPreview() {
   BlogTheme {
       SampleButton()
   }
}

削除ボタンとしてふさわしい色になりましたね。

あれ？でもちょっと待ってください。Theme.ktファイルに戻って、その中身をもう一度確認してみましょう。

カラースキームの定義は次のようになっていたはずです。

Theme.kt

private val DarkColorScheme = darkColorScheme( // …1
   primary = Purple80,
   secondary = PurpleGrey80,
   tertiary = Pink80
)

private val LightColorScheme = lightColorScheme( // …2
   primary = Purple40,
   secondary = PurpleGrey40,
   tertiary = Pink40

   /* Other default colors to override
   background = Color(0xFFFFFBFE),
   surface = Color(0xFFFFFBFE),
   onPrimary = Color.White,
   onSecondary = Color.White,
   onTertiary = Color.White,
   onBackground = Color(0xFF1C1B1F),
   onSurface = Color(0xFF1C1B1F),
   */
)

errorのカラーなんてどこにも定義されていませんよね。

実は、定義されなかったカラースキームはマテリアルデザインのデフォルト値が適用されるようになっています。

通常、errorは赤色がマテリアルデザインにおけるデフォルトのカラーであるため、特にerrorの色を定義しなくてもボタンが赤色になったというわけです。

Theme.ktでerrorの色を明確に定義すれば、その色が適用されるようになります。

試しに、ここではわざとエラーっぽくない色をerror色として指定してみて、その色がちゃんと適用されるかどうかをテストしてみましょう。

errorの色を次のように緑色（Green）に定義します。

Theme.kt

private val DarkColorScheme = darkColorScheme(
   primary = Purple80,
   secondary = PurpleGrey80,
   tertiary = Pink80,
   error = Color.Green
)

private val LightColorScheme = lightColorScheme(
   primary = Purple40,
   secondary = PurpleGrey40,
   tertiary = Pink40,
   error = Color.Green
)