マテリアルカラーのカスタマイズ

1. はじめに

最終更新日: 2022 年 4 月 18 日

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

前回の Material You カラーラボでは、デザインモックアップ内でダイナミックカラーを視覚化する方法について説明しましたが、マテリアルテーマ設定を使用して、ブランドカラーでアプリをカスタマイズすることもできます。ブランドカラーで新しいカラーシステムを活用すると、よりダイナミックな機能に対応できるユーザー補助に優れたカラーパターンを作成できます。

学習内容

マテリアルテーマビルダーでカスタムテーマを作成する方法。
デザインモックアップにカスタムテーマを適用する。
動的な色とカスタムカラーを組み合わせる可能性。

前提条件

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

基本的なデザインコンセプトに関する知識: カラーパレット
現在の Android のカラーパターンとロールに関する知識
Figma に関する知識
任意: アプリコードラボでの動的カラーの視覚化

必要なもの

2. 始める

設定

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

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

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

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

ファイルレイアウト

ファイル全体を確認すると、ファイルは自己完結型で、先頭に概要があることがわかります。各セクションは、相互にリンクされたアートボードの行に分かれています。セクションにはいくつかの基本コンセプトが記載されていて、その後には演習があります。セクションと演習は一体であり、順番に完了する必要があります。

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

まず、Intro アートボードを使用します。アートボードを順番どおりまとめてリンクしているボタンがあります。リンクにアクセスするには、ボタンをクリックします。

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

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

3. マテリアルカラーパターン

まず、マテリアル内で色がどのように使用されるか、新しいカラーシステムの仕組みの概要について説明します。

色はスタイルを表現し、ユーザー、ブランディング、セマンティクスにとって重要な意味を伝えるために使われます。カラーシステムは、ユーザー入力の変化によって起こるカラーパターンの動的な変化を扱います。色調の関係性と色相と彩度の変化のロジックは、柔軟な色の適用の基盤となります。

カラースペースでは、5 つのキーカラーと色調パレットを生成し、特定の色調ステップを選択することで、ソースカラーから抽出された使いやすいライトカラーパターンとダークカラーパターンを生成できます。

この色シフト技術は、ユーザー補助に優れたカラーパターンを提供するだけでなく、ユーザー補助に優れ、ユーザーが作成したカラーパターンと一貫性のあるブランドカラーパターンを作成する方法も提供します。

5 つのキーカラーから色調パレットが生成され、アクセシビリティに優れたカラーパターンが作成されます

ブランドテーマ

M3 は、カスタムパラメータの体系的な適用をサポートし、ブランドを伝えるスタイルを定義して維持するのに役立ちます。

カスタムスキームは、ユーザーのデバイスの壁紙ではなく、アプリの作成者から派生したカラーパターンです。M3 カラーシステムとカスタムパターンは、アプリでダイナミックカラーを有効にするための基盤となります。

カスタムスキームは、必要なトークン（カラースロット）を設定して M2 と M3 のギャップを埋め、移行を容易にし、ブランドエクスペリエンスを向上させます。

マテリアルテーマビルダーにブランドカラーを追加する

4. カラーパターン: アクセントカラー

カラーパターンの基盤は、それぞれが 13 トーンの別々の色調パレットに関連する 5 つの主要なカラーのセットです。各色調パレットの特定の色調が、UI 全体のカラーロールに割り当てられます。まず、マテリアルテーマビルダープラグインを開き、最初のアクセントカラーであるプライマリを設定しましょう。

プライマリのみを入力すると、それがソースとして使用され、カラーパターン全体が生成されます。

[plugin modal] で、[Custom] をクリックします。テーマがカスタムテーマに切り替わります。このラボでは、すでに生成されているマテリアルテーマを使用しますが、必要に応じて新しいテーマを作成することもできます。詳しくは、ダイナミックカラーの表示をご覧ください。
次に、Primary キーカラーを設定します。Primary カラーには、メインのブランドカラーか、最も使用されているプライマリアクセントカラーを使用します。残りのキーカラーは、プライマリカラーに基づいて設定されます。不要な色を追加する必要はありません。

5. テーマの残りの部分を構築する

プライマリはテーマの生成に使用されますが、プライマリのブランドカラーをサポートするアクセントカラーを使用することもできます。

プラグインモーダルで、[Secondary color] ウェルをクリックしてセカンダリカラーを追加します。セカンダリロールは、UI の目立たないコンポーネントに使用され、色の表現の幅を広げます。カラースキームとアプリの UI でセカンダリカラーが更新されます。
Tertiary についても同様に設定します。ターシャリロールは、プライマリカラーとセカンダリカラーのバランスを保つため、または要素に注意を引くための、対照的なアクセントに使用されます。第 3 のカラーの役割は、メーカーが独自の判断で使用できるように残されており、プロダクトでのより幅広いカラー表現をサポートすることを目的としています。
ニュートラルロールは、サーフェスと背景、強調の度合いが高いテキストとアイコンに使用されます。

セカンダリ、ターシャリ、ニュートラルを指定して、カラーパターンを完全にカスタマイズします。

ブランドカラーが、M3 カラー空間に合わせてシフトされたコアカラーパターンに含まれるようになり、完全にアクセス可能で、テーマとしてコード内でエクスポートして実装できるようになります。

6. テーマを適用する

ロールとトークン

アクセントの各色（プライマリ、セカンダリ、ターシャリ）は、ペア設定、強調の定義、視覚表現に必要な 4 つの対応する色で提供されます。グループは、アクセントカラー、オンカラー、コンテナ、オンコンテナで構成されます。

ニュートラルロールは、サーフェスと背景、強調の度合いが高いテキストとアイコンに使用されます。

デザイントークンとは、デザインシステムの視覚的なスタイルを構成するために、小規模で繰り返し行われるデザイン上の決定を示すものです。トークンは、色の 16 進数コードなどの静的な値をわかりやすい名前に置き換えます。デザイントークンは、明確な関係がないスタイル選択を意味のある形で結び付けます。

Figma プラグインは、トークンを作成し、独自のソースカラーを Figma スタイルの形式で入力して、既存のモックアップ、ブランドスタイルガイド、さらにはデザインシステムと接続します。

デザイントークンは、カラーロールと実装の間の共通言語を作成します。

色階層

モックアップに色の役割を適用するときは、要素の重要度の順番、つまり階層を考慮してください。このコンセプトは、ブランドカラーをそれぞれの役割に割り当てるだけでなく、UI 内でマッピングするのにも役立ちます。一般的に、彩度が高く濃い色の方がユーザーの注意を引きやすいため、プライマリカラーのロールは行動を促すフレーズに重点を置いたコンポーネントにマッピングされます。マテリアルテーマビルダーは M3 カラーシステムを使用して適切なカラーを生成しますが、彩度の高いセカンダリカラーやターシャリカラーを指定すると、プライマリカラーよりも目立つカラーが作成されます。ユーザーが UI とコンテンツに関わる順番を考慮して、色の役割を割り当ててください。すべてのコンポーネントでプライマリを使用する必要はありません。

最も注目を集めるのは、鮮やかな単色です。

7. テーマに切り替え

作成したカスタムテーマをデザインに適用するには、既存の material-theme のトークンにモックアップを設定する必要があります。

マテリアルコンポーネントにはロールが事前にマッピングされており、マテリアルテーマビルダーと自動的に連携します。

マテリアルテーマビルダーのモーダルからテーマに切り替えます。

レイアウトのフレームを選択して [Swap] をクリックし、このテーマを利用するように、レイアウトの右側にあるすべてのトークン（Figma スタイル）を設定しましょう。スタイルプレフィックスが選択色で更新されます。
すべてが更新されていない場合植物のお手入れのヒントカードなどのカスタムコンポーネントでは、まず Figma スタイルを適用する必要があります。ケアチップコンテナを選択し、コンテナが選択された状態で 4 つのドットアイコンをクリックしてスタイルを割り当て、[第 3 のコンテナ] を選択します。「育て方」カードのコンテンツについても同様にしますが、第 3 のコンテナを割り当てます。リスト内の小さなラベルもカスタムコンポーネントですが、これについては後で説明します。
マテリアルデザインコンポーネントはデフォルトのマッピングを使用していますが、UI に最適なスタイル割り当てを試すことができます。さまざまな色の階層とブランド表現を試してみましょう。

（コードのエクスポートファイルにはテーマのみが含まれます。エンジニアと連携する場合は、トークンマッピングを伝えるためにモックを共有します（エクスポートには含まれません）。

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

8. コアスキームを超えて延長する

コンポーネントとデザインモックにマッピングされたブランドカラーテーマが完成しましたが、他にも含める必要がある色があるかもしれません。そこで、カスタム色を追加できるように拡張スキームが導入されました。

これらは、セマンティックカラー、ブランド固有の色、商品固有の色などです。これらの色には、役割を割り当て、カラーアルゴリズムでシフトするか、入力されたままにする必要があります。

拡張カラーパターンでは、動的（ユーザー生成）カラーとブランドカラーを組み合わせることもできます。コアスキームでユーザーのパーソナライズされた影響を許可し、拡張スキームでブランドカラーを設定します。つまり、UI 要素をユーザーに合わせてカスタマイズしやすくなり、アプリ内でブランドカラーをより効果的に使用できるようになります。

コアスキームを拡張してカスタムカラーを含めることができます。

9. 拡張とカスタマイズ

カスタムカラーでスキームを拡張すると、セマンティックカラーや追加のブランドカラーなどの色を追加できます。

カスタム色が追加されたカスタムスキーム。

プラグインモーダルで、キーカラーの下にある [Add a Color] をクリックします。
現在のテーマが更新され、新しい Custom0 行が追加されます。カラーウェルをクリックして新しい色を選択し、この色を更新します。
これらの拡張色は、読み取り専用のスタイル内のスタイルとして Custom0 で確認できます。トーンパレットとスキームの両方が存在します。ラベルの背景を選択して、追加した色の役割（on-custom0 コンテナ）のいずれかを割り当てることで、リストのラベルの一部を新しい色にマッピングしましょう。

選択した色でカスタムカラーを設定する。

マテリアルテーマビルダーは、色を Custom# として自動生成します。追加したカスタム色の名前を変更するには、スタイルパネルでテーマのスタイルグループを開きます（何も選択されていない場合に表示されます）。次に、ソースサブグループ内で Custom0 を探します。ここでソースの名前を変更すると、プラグインモーダル内の色も変更されます。

カスタムカラースタイルは、スタイルパネルで確認できます。

追加した色を削除するには、同様に右クリックしてスタイルを削除します。次回プラグインを開くと、追加した色は削除されます。名前の変更や削除は、カラー図に反映されない場合があります。

10. 完了

マテリアルテーマビルダーを使用してカスタムカラーテーマを作成し、デザインモックアップに適用して、カラーパターンに追加する方法を学習しました。新しいマテリアル 3 カラーシステムは、ユーザー補助に優れ、柔軟で、一貫性のあるカラーをデザインにもたらします。皆様がどのように活用されるか、今から楽しみです。

不明な点がある場合は、Twitter の @MaterialDesign までいつでもお気軽にお問い合わせください。

その他のデザインに関するコンテンツやチュートリアルについては、youtube.com/MaterialDesign をご覧ください。