Android TV は、Google のマテリアル カラー ガイドラインに準拠し、一貫性のある視覚的なインターフェースを実現しています。テレビ画面に合わせて調整された、没入感のある魅力的なビジュアル スタイルを実現します。このガイドでは、Android TV インターフェースにマテリアル デザイン テーマを適用する方法について詳しく説明します。
ハイライト
- Android TV は、Google のマテリアル カラー ガイドラインに準拠していますが、テレビ用に最適化されています。
- ダークモードを使用して、映画のようなエクスペリエンスを実現します。
- マテリアル テーマビルダーを使用してテーマを作成します。
カラーパターン
カラーパターンを使用すると、意味のある方法で UI に色を適用し、調和、ブランドの一貫性、スケーラビリティを実現できます。
カラーパターンの基礎は、13 色以上の色調パレットに個別に関連する 5 つの主要なカラーのセットです。各色調パレットから特定の色調が UI 全体のカラーロールに割り当てられます。キーカラーは、ダイナミック カラーパターンを作成するための基盤となります。 1 つのルートカラーに基づいてキーカラーを作成するには、マテリアル テーマビルダーを使用するか、独自のキーカラーを選択します。
キーカラーが確立されると、マテリアルのアルゴリズムは、操作状態、エラー、アクセス可能なコントラストを表現するために必要なすべての色を指定します。
マテリアル テーマビルダーは、同じカラートークンを使用してダークとライトのカラーパターンを生成し、テーマを簡単に切り替えられるようにします。
カラーロール
メイン
プライマリ ロールは、視認性の高いボタン、アクティブな状態、浮き上がりサーフェスの色合いなど、UI 全体の主要コンポーネントに使用されます。
Secondary
セカンダリ ロールは、フィルタラベルなど、UI の目立たないコンポーネントや、色表現のための追加に使用されます。
Tertiary
第 3 のロールは、プライマリ カラーとセカンダリ カラーのバランスを取る場合や、入力フィールドなどの要素に注意を引くために使用できる、対照的なアクセントに使用されます。
サーフェス
サーフェスと背景、強調度の高いテキストとアイコンには、ニュートラルのロールを使用します。サーフェスについて詳しくは、マテリアル デザイン ガイドラインをご覧ください。
アウトライン
ロールの概要について詳しくは、マテリアル デザイン ガイドラインをご覧ください。
ダイナミック カラー
Android 12 以降、Android モバイルでは、壁紙の選択やその他のカスタマイズを通じて、個別のスキームを生成できます。Android TV は壁紙をサポートしていません。つまり、ユーザーが作成したスキームはサポートされず、Android TV OS はベースパレットのみをブロードキャストします。
ユーザー生成の配色の代わりに、コンテンツ ベースのカラーパターンを使用して、映画のポスター、アルバムアート、その他のヒーロー画像などのコンテンツに基づいて、動的で遊び心のあるデザインを作成できます。詳しくは、コンテンツ ベースのカラーパターンをご覧ください。
マテリアル カラー ユーティリティのデベロッパー ライブラリを使用すると、画像からキーカラーを直接抽出できます。また、独自の色抽出アルゴリズムを実行してキーカラーを検索し、マテリアル カラー ユーティリティを使用してテーマを生成できます。
次に、画像から色を抽出する方法の例を示します。
- 元の画像
- 抽出された種の色
- 生成されたキーカラー
これらのキーカラーを使用してカラーパターンを生成するか、トーンを使用して UI に適用できます。
ユーザー補助
ユーザー補助に関する考慮事項については、Android TV のユーザー補助に関するおすすめの方法をご覧ください。