on:2019年10月1日sponsorsデザイナーに、構造化が求められる要件がここ数年で急増しています。スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。Clausen下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。色の割り当てダークモードへの対応Sketch用のカラーシステム色に役割を割り当てるすべてのシステムがそうであるように、最も重要なことは根拠です。その色の代わりにこの色を使用しているのか。これこそがまさに、わたし達がすべきことです。すべての色に役割を割り当てる必要があります。役割を当てることはそれほど難しいことではなく、AppleとGoogleから多くを学ぶことができます。カラーシステムでどのように機能するかはリンク先の各ドキュメントを参照してください。カラーシステムでは、役割を明確に定義し、分かりやすい名前を付ける必要があります。色の名前には色の値ではなく、色の目的を伝える必要があります。色の役割について、3つのカテゴリに分けて見てましょう。色合い色合い(Tint)に使用される色の多くは、ブランドカラーとセカンダリーカラーです。必要な数だけ追加できます。ブランドカラーとそのブランドカラーの半透明のバリエーションがいくつかあるかもしれません。グラデーションは個別の色として追加する必要があります。することで、後で変更しやすくなります。色合いは通常、インタラクティブな要素に使用されますが、必ずしも使用する必要はありません。唯一重要なことは、定義された役割を持っているということです。実際の例を見てましょう。インタラクティブな要素、イラスト、ハイライトに使用する。背景(Background)の色も同様です。プロダクトでは複数の背景色を使用するため、それぞれに役割を定義する必要があります。背景の役割は通常、レイヤーで定義されます。プライマリ背景は常に一番下にあり、その上にセカンダリ背景が、そしてターシエリィ背景と続きます。代替の背景色も定義できます。実際の例を見てましょう。3つのレベルで、要素の背景に使用する。前景要素これで背景色に配置する要素に到達しました。Content)は主に、テキストやセパレータなどです。異なる強調のテキストラベルが必要になるため、これらのレベルを定義します。配置する背景によっては、複数の区切り色が必要になる場合があります。実際の例を見てましょう。背景に配置されたすべての前景要素を使用する。場合によっては、具体的な役割を作成する必要があるかもしれません。これは間違いではありませんが、システムは可能な限りシンプルに保つ必要があります。色合いに配置されたテキスト専用の役割が必要です。実際の例を見てましょう。色合いの色を適用した要素に使用する。色の割り当て役割を定義したので、次は色を割り当てます。これは、カラースキームを作成するときに使用するものとそれほど変わりません。カラースキームは保存する前に、インターフェイスで実際に試してみることをお勧めします。色がシステムにロックされていなければ、簡単です。2.0に準拠しているかアクセシビリティも確認します。カラースキームを作成したら、保存して、色に役割を割り当てます(実際の作業は、役割と同じ色の名前を付けるだけです)。役割を割り当てられたカラースキームの例です。フルカラーシステムダークモードへの対応すべての色に役割を定義しているため、すべての役割に新しい色を割り当てることは簡単になり、プロダクト全体の色を変更することも簡単です。カラーシステムでは、役割とそれに対応した色が定義されています。ダークモードを実装する際、ほとんどの作業はこの時点で、既に終了しています。変数として色の役割を使用し、それらの変数に色を割り当てることができます。実際の例を見てましょう。要素やスタイルをコピペして増していませんか?その必要はありません、簡単にできます。Sketch用のカラーシステムSketchでカラーシステムを管理したり、ライトモードとダークモードを切り替えるシンプルなプラグインが便利です。非常に軽量で、ドキュメントの色とシームレスに統合されており、これまでと同じように作業を続けることができます。スイッチを切り替えるだけで、配色を変更できます。