このページは Cloud Translation API によって翻訳されました。

テーマ

テーマとは、色、タイプ、シェイプなどのスタイルまたは属性のセットで、ユーザーのモバイルデバイスや大画面デバイスやアプリ内エクスペリエンスに影響します。

テイクアウェイ

パーソナライズされた利用しやすいエクスペリエンスを提供するには、ライト / ダーク、ダイナミック、コントラストなどのテーマなどのシステム設定をアプリに適用するようにします。
ダイナミックテーマを利用できない場合のフォールバックとして使用するカスタムテーマを作成します。
さまざまなテーマを使用する場合は、タイプの設定を検討してください。
読みやすくするために、テキストとサーフェスのコントラストを必ず確認します。

テーマの種類

テーマはシステムベースまたはアプリベースです。システムテーマはユーザーのデバイス UI 全体に影響し、デバイスの設定でそれに対応するコントロールを提供できますが、アプリテーマは実装先のアプリにのみ影響します。

アプリを表示するには、いずれかのタイプのテーマを実装する必要がありますが、アプリのテーマはアプリ内でのみ適用され、デバイス上の他の場所には適用されません。また、システムテーマ設定の一部をアプリ内設定でオーバーライドすることもできます。

システムテーマ

システムテーマは、ユーザー設定に応じた個々のアプリを含め、Android デバイス全体に適用されます。システムテーマには、ライトモードとダークモード、ユーザー作成テーマ、メーカーのテーマがあります。

ライトモードとダークモード

ライトモード（日モード）は、高輝度の明るい表示モードと、高色調値で構築されたサーフェスで構成されます。逆に、ダークモード（夜間モード）では UI がシフトして輝度が低下します。サーフェスは、ダークグレーまたは低色調値から構築されます。

ダークモードには複数のメリットがあります。日差しが強い場所や光量の少ない環境でも画面が見やすくなる、明るさが下がることによる目の疲れの軽減、バッテリーの節約などが可能です。また、多くの場合、ユーザーが最もリクエストの多いアプリ機能でもあります。

**図 1:** ライトモードとダークモードが表示されている同じホーム画面とアイコン

ライトモードとダークモードを実装する際は、次の点を考慮してください。

カラーパターンをカスタマイズすると、より表現しやすくなります。マテリアルテーマビルダーを使用してスキームを作成すると、ダークスキームが自動的に作成されます。ブランドテーマを作成するためのマテリアルとカラーシステムのカスタマイズの詳細をご覧ください。
ユーザーは、システムレベルの [ディスプレイ] 設定で、ライトモードまたはダークモードを「常にオン」、「常にオフ」、または「時刻に基づいて自動」に設定できます。ユーザーの好みのシステム設定を反映させることをおすすめしますが、アプリ内コントロールを作成して、ユーザーがより細かく変更できるようにすることもおすすめします。
WebView のウェブコンテンツでは、ライト、ダーク、デフォルトのスタイルを使用することもできます。WebView でのダークモードのサポート方法についてご確認ください。
ユーザーがこの機能を有効にしている場合は、Android でダークモードが強制的に適用されます。カスタムダークモードを作成して、より詳細に管理することもできます。
ユーザーが他のテーマや設定を有効にしていない場合は、アプリをライトモードに「ロック」できます。ただし、ユーザーのユーザー補助機能とパーソナライズのニーズに反する可能性があるため、おすすめしません。

ユーザーが作成したテーマ

ユーザーが作成したテーマは、Android 12 以降の Material You で使用できるダイナミックカラーでサポートされています。有効にすると、ダイナミックカラーによってユーザーの壁紙からカスタムカラーが抽出され、アプリとシステム UI に適用されます。このカラーパレットは、ライトとダークのカラーパターンを生成するための出発点として使用されます。

フォント設定は、デバイスの設定で更新して、ユーザーの設定やユーザー補助機能のニーズを満たすこともできます。これらの設定はアプリにも反映でき、またアプリに組み込むべきであるため、フォントにはスケーラブルなピクセル値を使用してください。

メーカーのテーマ

デバイスメーカーは、システム UI とディスプレイ設定に影響する可能性がある独自のテーマ設定機能を提供している場合があります。

アプリのテーマ

ベースライン

マテリアルライブラリのマテリアルコンポーネントは、紫のカラーパターンと Roboto フォントを使用するベースラインテーマを提供しています。テーマ属性を定義していないアプリは、これらのベースライン属性に戻ります。

カスタム（ブランド）

カスタムテーマを使用すると、アプリのデザインを表現の幅を広げることができます。または、特定のシステムテーマが利用できない場合のフォールバックとして機能することもできます。これは、完全なカスタムデザインシステムを使用する場合、小規模なブランドガイドを使用する場合、または複数のお気に入りの色を使用する場合に役立ちます。

アプリでは、ユーザーが選択できる完全なスキーム、インスピレーションを得たコンテンツ、サブブランド要素など、複数のカスタムスキームを使用することもできます。

**図 6:** ベースラインで生成されたテーマのボタン（左）とカスタム値で構成されるテーマ（右）

コンテンツ

一部のコンテンツに焦点を合わせるには、UI でダイナミックカラーを使用して、そのコンテンツから色を継承します。コンテンツの色は、メインのコンテンツソースが 1 つの場合はうまく機能しますが、複数のコンテンツソースがあるビューでは慎重に使用してください。

テーマは通常、アプリ全体に影響しますが、選択的に、または他のテーマと並行して適用することもできます。階層を維持することで、テーマと組み合わせが多すぎることを避けます。階層は、UI の大部分に適用されるプライマリテーマソース（動的またはカスタム）です。

**図 8:** 特定の要素にダイナミックカラーやブランドカラーを適用することで、テーマ設定を組み合わせて使用できる

材質

マテリアルデザインは、ベースラインテーマとテーマ設定システム（色、タイプ、シェイプ）を提供します。マテリアルテーマ設定を拡張して、テーマに付加的な属性を追加することもできます。

ブランド

マテリアルデザインのテーマシステムが、アプリで求めるデザインと一致しない場合は、完全なカスタムテーマを実装できます。カスタムプロパティのコントラストと読みやすさを必ずテストしてください。

Compose でカスタムシステムを実装する方法をご覧ください。

テーマ属性

テーマ属性は、UI デザインで使用される一般的なビジュアルスタイルに合わせて、さまざまな美学を喚起します。アプリ内で、これらのプロパティは多くの場合、アプリメーカーのカスタマイズを可能にするためにマテリアルテーマ設定システムに関連付けられています。

色

色を使用してスタイルを表現し、意味を伝える。アプリの色の設定は、パーソナライズ、セマンティック目的の定義、もちろんブランドアイデンティティの定義のために非常に重要です。

テーマ内のカラーパターンとは、コンポーネントにマッピングされる特定のロールに割り当てられたトーンのグループです。詳しくは、Android UI の色とマテリアル 3 のカラーシステムをご覧ください。

タイプ

Android のシステムフォントは Roboto（すべてのアプリで無料で利用可能）ですが、タイプをカスタマイズできます。選択したフォントの読みやすさをロールに合わせて検討します。タイプの適用について

シェイプ

ベースラインのデフォルトを超えてコンテナの角の形状をカスタマイズすると、アプリのキャラクターの定義に役立ちます。たとえば、角を丸くして柔らかく楽しい雰囲気にしたり、角形のカットで真剣な印象を与えたりできます。マテリアルコンポーネントのシェイプトークンとスタイルをご確認ください。

アイコン

アプリで使用できるマテリアルアイコンには、塗りつぶし、枠線付き、シャープ、角丸、ツートーンの 5 つのスタイルがあります。アプリ全体で同じアイコンスタイルを使用することで、一貫性のある洗練されたデザインを維持できます。

図 12: マテリアルアイコンのスタイル

その他のテーマ属性

主要なマテリアルテーマ設定システムは色、タイプ、シェイプで構成されますが、デザインシステムはマテリアルが依存するコンセプトに限定されません。既存のシステムを変更し、まったく新しいシステム（新しいクラスや型）を導入して、他のコンセプトとテーマの互換性を持たせることができます。提供されるもの以外のカスタム属性を利用するには、既存のシステムを拡張または置換することが必要になる場合もあります。たとえば、グラデーションや間隔の寸法体系を追加できます。

アプリにテーマを適用する

テーマとスタイル、そしてクラス

テーマとスタイルのどちらにも、複数のデザイン属性を含めることができます。スタイルはテーマに依存せず、個々の要素（またはビュー）の外観を参照することもできますが、複数の要素やアプリ全体でテーマを設定することもできます。スタイルとは、再利用可能なスタイルの選択であり、デザインソフトウェアのスタイルまたはトークンに似ています。たとえば、[Body Large] はスタイルで、[Light and Dark] はテーマです。

Compose にテーマを実装する

テーマは通常、共通の視覚的概念と動作概念をグループ化した複数のシステムで構成されており、テーマ設定値を持つクラスを使用してモデル化します。

Jetpack Compose を使用してマテリアルデザイン 3 テーマの実装を作成する方法について詳しくは、Compose のマテリアルデザイン 3 をご覧ください。

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)

ビューにテーマを実装する

テーマとは、アプリ全体で使用できる、意味的に名前を付けたリソースのコレクションです。テーマは同一のスタイル構文を使用します。

ビューを使ってみる

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

WebView

WebView のウェブコンテンツでは、ライト、ダーク、デフォルトのスタイルも使用できます。WebView のダークモードがどのようにサポートされるかをご覧ください。

マテリアルテーマをカスタマイズする

Material Theme Builder の Figma プラグインを使用して、マテリアルテーマをカスタマイズできます。このライブラリを使用してテーマを作成すると、ライトとダークのカラーパターンが生成済みの実装可能なテーマ設定ファイルが提供されるため、エクスポートしたテーマファイルを正確な値で更新することで、さらにカスタマイズを進めることができます。