UI用のカラーシステムを構築する新しい方法とツール
Post on:2018年10月30日
sponsors
少人数で一回限りのプロジェクトであれば、カラーシステムは割と簡単に構築できます。しかし、大人数や長期間のプロジェクトになると、そう簡単ではありません。
Webサイトやスマホアプリで、長期的に使用でき、拡張性があり、アクセシブルなUI用のカラーシステムを構築する新しい方法を紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
カラーとは世界を認識するのに役立ち、そしてインターフェイスにとっても重要な存在です。わたし達が予測して、そして理解し、意思決定するのをカラーは導きます。
例えば、レッドの文字は注目し、グリーンの数字はリラックスし、グレーの文章の前にブラックの文章を読むでしょう。ブルーの文字はクリックするかもしれません。これらはわたし達が特に意識することなく、利用できるよう設計されています。
カラーは扱うプロダクトが大きくなるにつれ、複雑になります。そのプロダクトを何千人もの人々で作成すると、カラーへの依存も増えます。一回限りのカラーは簡単に適用できますが、すべてのプロダクトに長期間一貫してカラーを適用するのは困難です。
私のチームは、Lyft Product Languageの構築とメンテナンスを担当しています。
そのチームで、カラーの使い方、カラーの追加方法、カラーの修正方法、アクセシビリティの使い方に関する質問に悩まされました。質問の数はチームが大きくなるにつれ、さらに悪化しました。
カラーシステムで成功するために、わたし達が実施したことをお話します。
カラーの名前の付け方
最初に現在Lyftで使用されているカラーについて調べました。
Lyftのブランドカラーは明るいピンクですが、似たような色合いのピンクが15種類も使用されていました。
使用されていたピンクのカラー
なぜこのような断片化が起きてしまったのでしょう。この現象は、カラーを説明する際に異なる方法を使用したのが問題であることに気がつきました。
わたし達が成功するためには、デザイナーとエンジニアの間でカラーに関する共通の言語を使用する必要があります。つまり、デザイナーとエンジニアはカラーを示すと、同じカラーの名前を言うことができますが、カラーの名前を言うと、異なるカラーを示してしまうことがあります。わたし達には、カラーをサポートする言語が必要でした。
人々がカラーについて説明する時、2つのポイントがあります。カラーホイールにある色相（hue）と、その明暗の度合いを示す修飾語（modifier）です。ライトブルー、ダークグリーン、ディープレッドなどのように表現されます。
カラーのための言語を構築することは、カラーを使用することに比べると、些細なことかもしれません。そのため、費用対効果を知る必要がありました。つまり、学習することが簡単で効率的でなければなりません。
シンプルにしたいと考えたので、色相を表すためにはブルー、グリーン、レッドのような既存の用語を採用しました。また、複雑なカラーについては、ミント、ティール、ローズなどのように習得するのが簡単で、短い言葉を採用しました。
これらの用語は長期間使用されることを考慮する必要があったため、考えられるすべてのカラーに備えて、カラーマップを作成しました。もしブランドのカラーが変更になった場合でも、すべてのカラーを用意しておけば、問題は起きません。将来的に、新しい色相をサポートする必要がある場合でも、既存のカラーマップを変更する必要がないように色相名を組み合わせます。
作成したカラーマップ
カラーを明るく・暗くするために用語を用意する必要ありません。修飾語（modifier）を使用します。0から100までの数値を使用し、0は最も明るいカラー、100は最も暗いカラーです。唯一の注意点は、0から100までのカラーをどのようにマッピングするかを意図的にする必要があることだけです。例えば、遡及的にシェードを追加する必要がある場合は、すべての数値をやり直して、組織内のすべての人に伝える必要があります。そのため、カラーに数値をどのように割り当てたのかを正しく理解する必要があります。
例えば、「red 60」であれば中間的なレッドで、明るいブルーなら「blue 10」と簡単に想定できます。共通の言語を使用すると、短時間で学習ができ、正確に伝わります。
カラーの選択方法
カラーシステムを見ると、デザイナーはIllustrator、Photoshop、Sketchなどのツールを開き、カラーを選択し、明暗のバリエーションをオーバーレイで実現するという点で、ほぼすべてが似ています。今日のカラー選択の典型的な方法です。
この方法は短期間では機能しますが、どんなカラーシステムにも有効期限を設定する必要があります。例えば、カラーのセットを変更した場合は、どうなるでしょうか？ 同じ方法で同じカラーを選択できる保証はありません。異なるカラーが選択される可能性の方が高いです。
それを防止するためには、長期的にも機能するカラーの選択方法が必要です。
わたし達は数学に目を向け、カラーのセットをプログラム的に生成する方法を見つけました。しかしながら、既存のプログラムが提供する結果には満足できませんでした。特定の色相に対しては満足する結果を得ることができましたが、他の色相に同じ方法を適用したところ、残念な結果になりました。
同じ方法で生成したブルーとイエローの色相
イエローの方がより多くの色相が生成されており、有用なカラーのセットとして使用できません。
これはカラースペースの大きな違いが原因です。
一般的なプログラムでは、カラースペースを単一の方法で扱うことしかできません。
一般的なプログラムのカラースペース
ブルーやレッドより、イエローやグリーンの方がより多くあるように見えます。
インターフェイスでは明暗の均等な分布は必要としません。使用するのは、中程度の明暗のシェードに集中しています。そのため、わたし達自身でアルゴリズムを構築することに決めました。
カラーを選択するアルゴリズム
ここから専門的な話になります。もしアルゴリズムがどのように機能するのか学ぶのを望むなら、読み進めてください。
興味がない場合は、「カラーのアクセシビリティ」までスキップしてください。
カラーは3つの次元、色相（下面）、彩度（右面）、明度（左面）があるので、3Dでよく表現されます。
下記のボックスで、すべてのカラーを表現することができます。
すべてのカラーを表現できるボックス
どんなアルゴリズムでも、出力を生成するためには入力を提供する必要があります。このアルゴリズムでは、出力が1つの色相のシェードのセットを生成するように構築されています。カラーシステム全体を構築するためには、色相ごとにアルゴリズムを繰り返します。
入力時にはまず、シェードのステップ数をアルゴリズムに伝えます。Lyftではカラーセットがcolor 0, color 10, color 20, ...color 100まで11のステップがあります。
ステップ数を設定した後、色相範囲を指定する必要があるので、開始値0-359と終了値0-359を指定します。色相によっては、レッドのような狭い範囲やイエローような広い範囲が広いかもしれません。色相の範囲は、自由に狭く・広くすることができます。
ステップ数と色相を設定
色相が決まれば、彩度をアルゴリズムに伝えます。彩度は0から1までです。このアルゴリズムでは、彩度の値を操作する機能を追加しました。この機能により、ブランドカラーの彩度を増やしたり、グレースケールのカラーを作るために彩度を減らすことも可能です。
彩度を設定
最後の入力は、明度です。
明度も0から1までの値で、彩度と同じように機能します。明度を調整すると、他の軸のポイントも移動することがあります。これはカラーが3Dに存在するためで、すべてのカラーチャンネルは密接に繋がっています。
明度を設定
すべての入力を終えると、アルゴリズムによってカラーのセットが生成されます。
生成されたカラーのセット
このアルゴリズムを使用すると、以前にカラーの選択を行っていたすべての依存関係を取り除くことができます。新しいデザイナーに作業を依頼したり、ツールやモニターを変更したりしても、同じ結果が得られます。また、時間の経過と共に必要な色をすばやく変更したり、調整することもできます。
カラーのアクセシビリティ
わたし達はアクセシビリティをカラーシステムに取り込みました。別のツールを使用してカラーのアクセシビリティを確認することもできますが、この工程を取り去り、簡単にカラーシステムを生成できるようにする必要があったからです。
これを解決するために、カラーの命名と選択方法に手を加えました。アルゴリズムで色合いの明暗を一貫させたので、0-50のブラックはアクセシブル（4.5:1）で、60-100のホワイトもアクセシブル（4.5:1）です。
このようにすることで、カラーをコードで見たり、口頭で伝えるだけで、そのカラーがアクセシブルかどうかを判断するのに十分な情報が得られます。例えば、デザイナーやエンジニアは「red 50」と見ただけでそのカラーはアクセシブルではないことが分かり、「red 60」はアクセシブルであることが分かります。
ツール
最後に、わたし達はカラーをサポートする方法を変更しました。既存のツールではデザイナーとエンジニア間の「ずれ」を防止し、システムを維持するのに役立つツールはほとんどありませんでした。
エンジニアのためには、コードベースで既存のすべてのカラーを新しいカラーシステムに移行するツールを構築しました。また、間違ったカラーがコードに紛れるのを防ぐためにリンターも構築しました。
デザイナーのためには、カラーインスペクターを無効にするSketchプラグインを構築しました。これにより、新しいカラーがデザイナーのワークフローに反映されます。
あなたの番
この記事で、カラーを使って作業することについての知識を共有しました。そして、わたし達が開発したカラーアルゴリズムをオープンソース化しました。
この新しいツールをぜひ楽しんでください！
Linda Dong, Sam Soffes, Kathy Ma, Katie Dill, Core Designチーム全員に感謝します！
sponsors
