ウィジェットのスタイルを効果的に設定することは、視覚的に魅力的で一貫性のあるユーザー エクスペリエンスを実現するために重要です。このセクションでは、最も有用で魅力的な Android ウィジェットを作成するために、色とタイポグラフィを定義するうえで重要なコンセプトと手法について詳しく説明します。
色
色を使用してスタイルを表現し、意味を伝えます。ウィジェットの色に適切な色を設定することは、視認性、パーソナライズ、そしてもちろんアプリのブランド アイデンティティの表現に不可欠です。
マテリアル カラーの役割とトークンを使用して、ユーザー補助のコントラストのガイドラインを満たし、ユーザーが生成した色やダークテーマ、ライトテーマなどのダイナミック カラー機能をサポートします。
アクセント ロールで視覚的階層を検討して、要素に鮮やかなコントラストを作成したり、ブランドを表現する遊び心のあるカスタムテーマを検討したりできます。
カラーロールの詳細については、マテリアル デザインのカラーに関するガイダンスをご覧ください。
シェイプ
ウィジェットの形状は、ウィジェットの雰囲気を設定します。長方形のウィジェットの場合は、システムの角の丸みプロパティを使用します。このプロパティは、さまざまなデバイス間で一貫性を保ち、ウィジェットのコンテンツが切り取られるのを防ぐのに役立ちます。
ウィジェットに写真、天気、現在再生中の曲などの最小限のデータ コンテンツが表示される場合は、ウィジェット全体を表現力豊かな形にして、ユーザーのホーム画面にエキサイティングなエネルギーを吹き込んでみてください。レイアウトやデータが複雑な場合は、視覚的な階層構造を表現するシェイプを使用して、新しいコンテンツや行動を促すフレーズをハイライト表示することを検討してください。
詳しくは、角の丸みを実装するをご覧ください。
動的なテーマ
Android 12 以降のウィジェットでは、ボタンや背景などのコンポーネントにデバイスのテーマカラーを使用できます。これにより、さまざまなウィジェット、ホーム画面のアイコン、壁紙の視覚的な一貫性が確保され、Android ユーザーに統一感のあるユーザー エクスペリエンスが提供されます。提供されたカラートークンを使用すると、さまざまなデバイス メーカーが提供するデバイスのテーマや、ユーザーが設定したダイナミック テーマ全体で、ウィジェットが統合されたように見えます。
ライトモードとダークモード
ダークモードは、デバイス UI の低照度バージョンで、主に暗いサーフェス カラーが表示されます。バッテリー駆動時間の延長と目の負担の軽減を目的として、ダークモードに切り替えるユーザーが増えています。ウィジェットがダークモードに対応していないと、ウィジェットが浮いたように見え、ユーザーの不満につながる可能性があります。
タイポグラフィ
タイポグラフィは、文章を読みやすく美しくするのに役立ちます。フォントサイズと太さを活用して明確な階層を確立し、ユーザーの視線を最も重要な要素に誘導します。読みやすさを向上させるため、特にウィジェットの限られたスペース内の小さなテキスト表示では、行間と文字間隔（カーニング）に注意してください。
階層
階層は、フォントの太さ、大きさ、行の高さ、文字間隔によって伝達されます。更新された文字スケールでは、テキスト スタイルが 5 つの役割に分類され、その目的を表す名前が付けられています。5 つのテキスト スタイルは、ディスプレイ、見出し、タイトル、サブタイトル、本文です。この新しい役割はデバイスに依存しないため、さまざまなユースケースに簡単に適用できます。
ウィジェットではシステム フォントが使用されますが、劇的なタイプスケールで表現力豊かな詳細を追加できます。見出し、ラベル、データでより大胆な表現を使いましょう。
