テーマ

テーマとは、色、タイプ、形状などのスタイルまたは属性のセットです。ユーザーのモバイル デバイスや大画面デバイスのルック＆フィールやアプリ内エクスペリエンスに影響する可能性があります。

まとめ

  • ユーザーにパーソナライズされたアクセスしやすいエクスペリエンスを提供するには、アプリでシステム設定（ライトモードやダークモード、ダイナミック、コントラストなどのテーマなど）を採用してください。
  • 動的テーマを使用できない場合にフォールバックとして使用するカスタムテーマを作成します。
  • さまざまなテーマを使用する場合は、タイプ設定を検討してください。
  • テキストとサーフェスのコントラストを確認して、読みやすさを確保します。

テーマの種類

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

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

システムテーマ

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

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

ライトモード（デイモード）は、明るいディスプレイ モードで、輝度が高く、高いトーン値で構成されたサーフェスです。一方、ダークモード（夜間モード）では、UI がシフトされ、明るさが低下します。サーフェスは、暗いグレーまたは低い色調値から作成されます。

ダークモードには、日差しが強いときや暗い場所での画面の視認性の向上、明るさの低下による目の疲れの軽減、バッテリーの節約など、複数のメリットがあります。また、ユーザーから最もリクエストされるアプリ機能でもあります。

図 1: 同じホーム画面とアイコンで、ライトモードとダークモードを表示。

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

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

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

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

図 3: 壁紙から派生した UI の配色


図 4: アプリ UI の配色の壁紙
メーカーのテーマ

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

アプリのテーマ

ベースライン

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

カスタム（ブランド）

カスタムテーマを使用すると、アプリの外観をより幅広く表現できます。また、特定のシステムテーマを使用できない場合にフォールバックとして機能します。これは、完全なカスタム デザイン システム、小さなブランドガイド、お気に入りの色を扱う場合に便利です。

アプリに複数のカスタム スキームを設定することもできます。ユーザーが選択できる完全なスキーム、コンテンツにインスパイアされたスキーム、サブブランドの要素などです。

図 5: 同じアプリとそのコンテンツ。ベースライン テーマが適用されている（左）とカスタムテーマが適用されている（右）


図 6: ベースラインで生成されたテーマを使用したボタン（左）とカスタム値で構成されたテーマを使用したボタン（右）
コンテンツ

特定のコンテンツに焦点を当てるには、UI でダイナミック カラーを使用して、そのコンテンツから色を継承できます。コンテンツ色は 1 つのメインのコンテンツ ソースで適切に機能しますが、複数のコンテンツ ソースを含むビューでは慎重に使用してください。

図 7: キーアートからコンテンツを取得するアプリ。メディア通知では、メディアのアートワークから色を抽出することもできます。

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

図 8: アプリでは、特定の要素に動的色またはブランド色を適用することで、テーマ設定を組み合わせて使用できます
Material

マテリアル デザインには、ベースライン テーマとテーマ設定システム（色、タイプ、シェイプ）が用意されています。マテリアル テーマ設定は拡張して、テーマに追加の属性を適用することもできます。

ブランド

マテリアル デザインのテーマ システムがアプリで望むルック アンド フィールに合わない場合は、完全にカスタムのテーマを実装できます。カスタム プロパティのコントラストと判読性をテストしてください。

Compose でカスタム システムを実装する方法を確認する。

テーマ属性

テーマ属性は、さまざまな美観を演出するために、UI 設計で使用される一般的なビジュアル スタイルに合わせて調整されています。アプリ内では、これらのプロパティは多くの場合、マテリアル テーマ設定システムに関連付けられており、アプリ メーカーによるカスタマイズが可能です。

色

色を使用してスタイルを表現し、意味を伝えます。アプリの色を設定するということは、パーソナライズ、セマンティックな目的の定義、そしてもちろんブランド アイデンティティの定義にとって非常に重要です。テーマ内のカラースキームは、コンポーネントにマッピングされた特定のロールに割り当てられた色調のグループです。詳しくは、Android UI の色と マテリアル カラーシステムをご覧ください。

種類

Android のシステム フォントは Roboto です（すべてのアプリで自由に使用できます）。ただし、タイプはカスタマイズできます。選択したフォントが役割に適合するように、読みやすさを考慮してください。タイプを適用する方法について

シェイプ

ベースラインのデフォルトを超えてコンテナのコーナーの形状をカスタマイズすると、アプリの個性を定義できます。たとえば、角を完全に丸くして柔らかく楽しい雰囲気を演出したり、角を切り落としてより真面目な雰囲気を演出したりできます。マテリアル コンポーネントのシェイプ トークンとスタイルを確認する。

アイコン

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

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

その他のテーマ属性

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

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

テーマとスタイル、クラス

テーマとスタイルの両方に複数のデザイン属性を設定できます。スタイルはテーマから独立しており、個々の要素（またはビュー）の外観を指します。一方、テーマは複数の要素やアプリ全体に設定できます。スタイルは、デザイン ソフトウェアのスタイルやトークンに似た、再利用可能なスタイル選択です。たとえば、Body Large はスタイルですが、ライトモードとダークモードはテーマです。

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 のダークモードのサポート方法をご覧ください。

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

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

図 13: Material Theme Builder では、動的テーマとカスタムテーマを生成できます