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