アプリでダイナミックカラーを可視化する

1. はじめに

最終更新日: 2021 年 9 月 21 日

アプリは、ベースラインパターン、ユーザーが生成したダイナミックカラー、ブランドカラーなど、さまざまな色を採用できます。

Material You で導入された新しいダイナミックカラー機能についてご紹介します。このラボでは、ダイナミックカラーパレットを作成して、カラーシステムがどのように機能するか、アクセシビリティの高いカラーパレットを作成する際の重要なコンセプト、最新のデザインツールを使用してダイナミックカラーでアプリを視覚化する方法を学びます。

学習内容

マテリアルデザインの色の新機能
ユーザーが生成した色をアプリに適用する方法
役立つツール

前提条件

このラボでは、いくつかの基本的なデザインコンセプトをもとに進めていきます。

基本的なデザインコンセプトに関する知識: カラーパレット
現在の Android のカラーパターンとロールに関する知識
Figma に関する知識

必要なもの

2. 始める

セットアップ

まず、Designlab Figma ファイルにアクセスできるようにする必要があります。このラボで必要なものはすべて Figma ファイル内にあります。ファイルをダウンロードしてインポートするか、Figma コミュニティからファイルを複製してください。

まず、Figma にログインするかアカウントを作成します。

Figma コミュニティからファイルを複製する

マテリアルデザインを使ったアプリでのダイナミックカラーの可視化ファイルに移動するか、Figma コミュニティで「マテリアルデザインを使ったアプリでのダイナミックカラーの可視化」を検索します。右上の [Duplicate] をクリックして、ファイルのコピーを作成します。

ファイルレイアウト

ファイルを見てみると、概要から始まり、自己完結型であることがわかります。各セクションは、相互にリンクされたアートボードの行に分かれています。セクションにはいくつかの基本コンセプトが記載されていて、その後には演習があります。セクションと演習は相互に補完し合うため、順番に終わらせるのがよいでしょう。

この Codelab では、コンセプトと演習を詳しく説明します。新しい Material You 機能について詳しく学ぶことができる Codelab も併せてご覧ください。

Intro アートボードから始めましょう。アートボード同士を順番につなぐリンクボタンがあり、ボタンをクリックするとリンクにアクセスできます。

Figma プラグインをインストールする

この Codelab では、新しい Figma プラグインを使用して、ダイナミックカラーパターンとトークンを生成します。Figma Community のページから直接 Figma プラグインをインストールするか、Figma Community で「Material Theme Builder」を検索します。

3. 色のコンセプト

ダイナミックカラーとは

Material You では、カラーがよりパーソナライズされたエクスペリエンスとして再考されています。ダイナミックカラー抽出により、可能なカラーエクスペリエンスの範囲が大幅に広がります。

ダイナミックカラーは Material You の重要な要素です。アルゴリズムはそれによってユーザーの壁紙からカスタムカラーを導出し、それらがアプリとシステム UI に適用されるようにします。

輝度

ダイナミックカラーは、予測できないコンテキストでも機能します。さまざまな表示コンテキストでのコントラスト比を管理する場合、輝度レベルが重要な属性になります。これにより、製品チームが特定の色の組み合わせを個別にテストしなくても、適切な色の組み合わせを使用できます。

輝度が同程度の要素は、視認性の点で適切なコントラストとは言えません。輝度の値が異なる要素は視認性が高くなります。

色調パレット

色調パレットは、1 つの色相（動的に抽出された色）を関連する色調のスペクトルに変換したものです。1 つの色を 13 個のトーンに変換することで、トーンパレットと呼ばれるトーン範囲のグループを、コンポーネント内の個々の要素からアプリのテーマ全体まで、さまざまなコンテキストで適用できます。

色をトーンの範囲に変換します。

4. 色の抽出

Seed to scheme

マテリアルテーマビルダーでダイナミックカラーがどのように機能するかを見てみましょう。

マテリアルテーマビルダーを開きます。[動的] を選択した状態で、画像をドロップするか、ファイルブラウザから画像を選択します。画像に基づいてシードカラーが更新されます。
壁紙から抽出された色の値には「タイプ」が割り当てられます。このタイプによって、スキーム内の他の色との関係が決まります。これらの値を反映するように、「キーカラー」（右）が更新されました。

次に、輝度ベースの色調パレットに変換され、明るい色から暗い色までの 5 つのカラー範囲が生成されます。色調パレットには、色出力でラベルが付けられます。
5 つのトーン範囲から、特定のトーン（輝度に基づく）が、スキームを構成する事前定義されたロールに割り当てられます。色は、デザイントークンを介してスキームにマッピングされます。

ターシャリトーン範囲から作成され、コンポーネントにマッピングされたターシャリカラーロール。

5. テーマとトークン

デザイントークンを使用すると、たとえば、UI で要素の色ロールを固定値ではなく割り当てることができるため、プロダクト全体で柔軟性と一貫性を確保できます。トークンは、要素に割り当てられたロールと、ロールに選択された色の値との間の橋渡しとして機能します。ダイナミックカラーの導入により、特定の色ではなく色の役割を考慮した設計がより重要になります。

テーマには、色とタイプの両方のマテリアルデザイントークンが含まれています。これにより、デザインとコードに、ベースラインを表す単一の真実のソースと、ユーザーが生成したパレットとカスタム値が確保されます。

Figma では、プラグインはこれらのトークンをスタイルとして生成します。つまり、生成されたスタイルを使用すると、MD トークンを使用することになります。

トーンパレットの色は、デザイントークンを介してライトスキームまたはダークスキームにマッピングされます。

マッピングシステムは、コンポーネント内の各要素にトーンを割り当てます。

設定トークン

デザインにダイナミックカラーを適用するには、既存の material-theme のトークンにモックアップを設定する必要があります。

レイアウトのすべてのトークン（Figma スタイル）を右側に設定して、レイアウトのフレームを選択し、[swap] をクリックしてこのテーマを利用しましょう。スタイルプレフィックスが選択色で更新されます。

切り替えをクリックすると、選択したデザインで使用されている接続済みのテーマが更新されます。

画像をドロップするか、ファイルブラウザから画像を選択します。モックアップの値は、画像から抽出された動的な色になります。
シャッフルボタンをクリックします。これにより、画像から抽出するのではなく、シードカラーがランダム化されて外挿されます。これは、ダイナミックカラーがデザインモックに与える影響をすばやく確認できるもう 1 つの方法です。

シャッフルボタンをクリックしてシードカラーをランダム化します。

テーマなしでプラグインを開くと、セットアップ画面が表示され、開始できます。[Get started] をクリックすると、デフォルトのベースライン「material-theme」が Figma スタイルグループとして生成され、モックアップに接続したり、マテリアルデザインキットで使用したりできるようになります。

6. UI に適用する

提供されたレイアウトは、マテリアルデザイントークンを利用するマテリアルデザインキットで作成されていますが、マッピングされていないカスタム要素がいくつかあります。

記事カードを選択します。塗りつぶしで、スタイル（4 つのドットのアイコン）を material-theme/surface に設定します。（サーフェスを検索することもできます）。
同様の手順で、カードのタイプを選択し、[on-surface] に設定して、チェックボックスをプライマリに設定します。

デザインのカードで使用される Figma スタイル。

次に、残りのスキームを反復処理するための追加のモックを作成します。

テーマを作成して反復する

これで、モックアップを完全に接続してダイナミックカラーを可視化できるようになりました。複数のテーマを作成し、それらを個別のモックアップに切り替えて、さまざまなダイナミックカラーを一度に可視化することもできます。

プラグインモーダルで、プルダウンをクリックして [新しいテーマを追加] を選択します。

一意のテーマ名を作成し、[テーマを作成] をクリックします。これにより、作成したテーマごとに新しいカラー図も生成されます。

プルダウンメニューから新しいテーマを追加する。

画像を追加するか、シードカラーをシャッフルします。
プラグインのモーダルで、モックアップ（アプリの UI コンポーネント）を選択して [swap] をクリックします。これにより、スタイル値がドロップダウンに表示されている現在のテーマに更新されます。
モックアップを複製します（CMD + D）。