可能性のスペクトル：Go-toUIカラーガイド

それを回避する方法はありません。色はビジュアルデザインで最も影響力のあるクリエイティブな要素です。 セットデザインの魅惑的な景色の背景からピクセルアートの複雑な構成まで、色のしっかりとした理解は、説得力のあるコミュニケーションのマスターキーです。 証拠が必要ですか？

最近のブランドに焦点を当てた調査の参加者が10の象徴的な企業のロゴを描くように挑戦されたとき、16％だけが正確な形とデザインの特徴を思い出すことができました。 ただし、ブランドのカラーパレットを特定するように求められた場合、正解の数は最大80％に達しました。

色は、ユーザーインターフェイスデザインの世界でも影響力のある役割を果たします。 私たちが日常的にやり取りするデジタル製品は、重要な情報を伝達するために色を戦略的に使用することに依存しているため、UXおよびUIデザイナーが色を賢く使用する方法を理解することが重要です。

このガイドでは、次のことを行います。

• 色彩理論の基礎を解き明かし、
• デジタルインターフェイスで色を操作するための堅実な原則を提供し、
• 色の認識を構築するために役立つリソースを共有し、
• UIデザイナーが、独自の優れた配色を作成できるようにします。

このガイドの目標は、色の能力とそれに続く色の信頼性です。これらはすべて、私たちが毎日遭遇するユーザーインターフェイスでの驚くべき色の実行のためです。

クラッシュコース：UIデザイナーのための色彩理論

色彩理論は、独自の用語、方法論、および科学的基盤を備えた広範な研究分野です。 複雑になることもありますが、それは私たちが望んでいることではありません。 私たちが望んでいるのは、超高速の精度で適用できる色を理解することです。 私たちは、形を使用するのと同じように、簡単に、大胆に、そして効果的に色を使用したいと考えています。

このように色を使用するには、UIデザイナーは、これらのコアカラー理論の概念をしっかりと理解している必要があります。

• 色は相対的です。
• 飽和過負荷は色の鮮やかさを殺します。
• 同時コントラストには長所と短所があります。
• 基本的な配色が最適です。
• 色相は常に価値に影響を与えます。

掘り下げてみましょう。

色は相対的です

色は決して独立していません。 人間の目と脳が協力して色を見るとき、それらは常に次の影響を受けます。

• 色に輝く光
• 色を囲む他の色

自然からこの例をチェックしてください：

A：脳と目が連携して、花全体が実際には真っ赤であることを理解するのに役立ちます。

B＆C：花の影の濃い茶色（B）は、花びらの尾根（C）のハイライトを、実際のくすんだ栗色よりもはるかに明るく見せます。 基本的に、花びらの尾根を照らす光と影の色が連携して、目をだまし、ハイライトを強調します。

これは、欺瞞的な色がどのようになり得るかを示す別の例です。

UIデザインでは、色の相対性が必ずしも明白であるとは限らないため、スキーム内の色を相互にテストする必要があります。 なんで？ スタイルガイドで美しく配置された色の選択は、インターフェイスに適用すると問題になる可能性があるためです。

大きなポイント？ あなたの色の概念を甘やかさないでください。 Sketchで空白で囲まれたときにアクセントの黄色の見本が青々と見えるが、UIの主要な配色と衝突する場合は、別の解決策を見つけてください。

飽和過負荷は色の鮮やかさを殺します

彩度は色の鮮やかさに不可欠です。 しかし、彩度の高い色だけを中心に組み立てられたスキームは目を圧倒し、活気が失われます。 色があれば、少ないほど多くなります。 彩度の高い色は、彩度の低い色と組み合わせて使用​​すると鮮やかになります。

同時コントラストには長所と短所があります

まったく同じ値の色の補数が互いに隣接して配置されている場合、同時コントラストが発生します。 効果が非常に強いため、2つの色が出会うポイントが振動またはパルスします。

UIデザイナーにとって、同時コントラストはプラスとマイナスの結果をもたらす可能性があるため、この視覚現象の効力を制御する方法を理解することが重要です。

たとえば、さまざまな青を中心に設計されたインターフェイスでは、青のアンカーの色と同じ値を持つ補完的なオレンジを使用すると、通知アイコンに注意を引くのに最適な方法になります。

ただし、同じオレンジと青のコンボをドロップダウンメニューのテキストと背景に使用すると、片頭痛を誘発します。

基本的な配色が最適です

虹は自然の中で美しいです。 UIデザインでは、色をより選択的に使用する必要があります。そうしないと、エクスペリエンスが圧倒されます。 ブランドが幅広いオプションを備えたインパクトのあるパレットを持っている場合でも、抑制を示し、シンプルな配色を中心にユーザーインターフェイスを構築するのが最善です。

基本的なUIカラースキームを構築するための2つの絶対確実な計画は次のとおりです。

1.類似のUIカラースキーム

• これらの目を楽しませてくれるスキームは、カラーホイール上で密接にグループ化された色で構成されています。
• 類似の配色は、自然環境、特に植物の生活の写真で簡単に見つけることができ、視覚的に落ち着く傾向があります。
• 類似のスキームの多様性は、主要な色相の変化ではなく、彩度と明るさの変化に由来します。
• 類似のスキームを使用する場合は、カラーホイールの真向かいから彩度の高い色を1つ追加して、インターフェイス内に強調を作成してみてください。

2.補完的なUIカラースキーム

• 補色の配色は、カラーホイール上で互いに向かい合って存在する涼しい色と暖かい色を補完する相互作用に基づいています。
• 色の多様性は、補完する両極端の間で彩度と明るさを変更することによって実現されます。
• あまりにも多くの明るく彩度の高い色を使用すると、補完的なスキームの影響が損なわれます。

色相は常に価値に影響を与える

これは奇妙に聞こえるかもしれませんが、色には対応するグレー値があります。 ここに証拠があります：

上の画像では、100％の明るさと彩度の色相の範囲がありますが、これらの色がグレースケールに変換されたときに何が起こるかを見てください。

ブーム！ グレー値の全範囲が明らかになります。 UIデザイナーにとってこれが重要なのはなぜですか？ 一言：コントラスト。

少しの間、心をグレースケールに切り替えてください。 コントラストを作成する場合、50％に加えて40％のグレー値を使用することはありますか？ もちろんそうではありませんが、これは色相が色のコントラストの方程式から除外されたときに危険にさらされることです。

色相は常に価値に影響を与えることを忘れないでください。

デジタルインターフェースの4つの基本的な色の原則

色彩理論を単純化し、そのコアコンセプトをUIデザインに関連付けたので、今度はデジタルインターフェイスで色が果たす役割に焦点を当てて見てみましょう。 これらは、すべてのUIデザインプロジェクトの初期の取り組みから考慮しなければならない4つの色の原則です。

1. テキストと色の関係は非常に重要です。
2. 色のアクセシビリティは無視できません。
3. コントラストは不可欠ですが、それはすべてを解決するものではありません。
4. 色は、比例して適用すると最も効果的に機能します。

テキストと色の関係は重要です

色は読みやすさに影響します。 ほとんどのUIデザイナーはこれを原則として理解しています。そのため、赤い背景に緑の本文テキストを持つインターフェイスはあまり見られません。 代わりに、テキストと色の間の緊張が微妙に生じ、フォーム、ボタン、ヘッダー、アイコンなどの一般的なUIコンポーネントを介して忍び寄ります。

次の簡単なガイドラインに従って、テキストと色の健全な関係を維持します。

• テキストと背景のコントラストを低くしないでください。
• 特に色の明るさと彩度が同じである場合（たとえば、紫色の背景に黄色のテキスト）、テキストと背景に補色を使用しないでください。
• 背景が白の場合でも、本文を明るい色に設定しないでください。 黒と濃い灰色が最も読みやすいです。

色のアクセシビリティは無視できません

色はコミュニケーションに役立ちますが、UIで情報を伝達するために使用される唯一のデザイン要素ではありません。 なぜだめですか？ 一部のWebユーザーは、人口の大多数とは異なる（またはまったく）色を認識しないためです。

たとえば、色覚異常を経験している人は、アイコンの唯一の違いが色の変化である場合、製品アイコンが「押された」状態にあることを認識できない場合があります。

さらに、インターフェイスの背景との色のコントラストが低い重要なUIコンポーネントを見るのが難しい人もいます。 ColorableやContrastRatioなどのサイトでは、デザイナーはコントラストのアクセシビリティについてさまざまな色の組み合わせをすばやくテストできます。

コントラストは不可欠ですが、それはデザインの治療法ではありません-すべて

はい、UIデザインの色のコントラストは重要です。 それを計画し、実行し、それから利益を得る。 しかし、魔法の杖のように振って、貧弱なデザインを修正することを期待しないでください。

形状、スペース、サイズ、およびその他のデザイン要素を無視してはなりません。 色のコントラストは、ひどいUIを魅力的に見せることができますが、悪いユーザーエクスペリエンスを修正することはできません。

比例して適用すると、色が最も効果的に機能します

テキストのすべてのインスタンスがタイトルケースに設定されているニュースアプリ、または9x9の画像グリッド上に設計されたeコマースWebサイトを想像してみてください。 どちらもひどいでしょう！

精通したUIデザイナーは、タイポグラフィや繰り返しなどのデザイン要素を比例的に使用して、デザイン階層を強化します。 色も同様に慎重に検討する必要があります。 UIデザインでは、あまりにも多くの色を使用すると、情報の認識方法が混乱します。

継続的な進歩のためのカラーリソース

不便な真実は次のとおりです。色を使ったデザインはスキルであり、スキルを開発する必要があります。 ほとんどのUIデザイナーは、どの色が一緒に似合うか（別名カラーテイスト）を本質的に理解していますが、これが必ずしもアプリケーションに反映されるとは限りません。

真に色をマスターし、UIデザインへの完全な影響を確認するには、デザイナーは練習する必要があります。 幸いなことに、継続的な色の学習とスキルの構築に役立つリソースはたくさんあります。

Ctrl + Paint

すぐに色の信頼を得たいUIデザイナーの場合は、デジタルペイントの指導に特化したWebサイトであるctrlpaint.comから始めてください。 デジタル絵画？ 本当に？

絶対。 プロのコンセプトアーティストであるMattKohrが、簡単なビデオチュートリアルと実践的な演習を通じてデジタルカラーの使用法を教えています。 カリキュラムは素晴らしくシンプルで、現実世界と想像力の両方で「あなたが見ているものを描く」ことを中心としています。

カラースターターキットのより集中的な演習に進む前に、無料のビデオライブラリ（セクション11）から始めてください。

ヨゼフアルバースとカラーアプリの相互作用

色の相対性の現代的な理解は、芸術家/教育者のヨゼフ・アルバースの実践前の理論的アプローチによって深く探求され、進歩しました。

アルバースは、単一の色に「多くの顔」を持たせることを提案し、（私たちが想像する象徴的な色とは対照的に）現実の世界で実際に動作する色を見るために「目が開かれる」ことを期待して、生徒たちの間で広範な遊びと実験を奨励しました私たちの心の中で）。

1963年、アルバースは、世界の芸術とデザインの教育に大きな影響を与え続けている教科書、 InteractionofColorを執筆しました。 この本の出版50周年を記念して、イェール大学は全文を含むインタラクティブなiPadアプリをリリースしましたが、ユーザーはアルバースのカラープレートで遊んだり実験したりすることもできます。

UIデザイナーにとって、 Interaction of Colorアプリは、デジタル環境でアナログカラー演習を体験し、色の相対性がユーザーインターフェイスにどのように影響するかを直接確認する機会を提供します。

アンドリュー・ルーミス

20世紀の前半、アンドリュールーミスは、シカゴのアメリカンアカデミーオブアートの著名なイラストレーター兼インストラクターでしたが、彼の永続的な遺産は作家の遺産です。 Loomisは、商業芸術とデザインに関する6冊の本を書き、図の描画から製品の配置まで、幅広いトピックをカバーしました。

彼の著書であるCreativeIllustrationとEyeofthe Painter （どちらもarchive.orgで入手可能）の中で、Loomisは、UIデザインの現代の分野に関連したままである多くの永続的な線を落としています。

色の最大の間違い、そして統一性と調和の欠如を引き起こすものは、パレットに色が多すぎることです。

一方または両方に他の色が含まれている場合、2つの色は調和します。

色は、他のどの美しさの要素よりも実験に役立ちます。

他の設計者のインターフェース

基本的なレベルのカラーコンピテンシーが達成されると、カラースキームの作成は魅力的な追求に花を咲かせます。 遭遇するすべてのインターフェースは、学習と批評の機会になり、観察はたくさんあります。

これは、他のデザイナーの作業を参照することが力になるときのUIデザイナーの開発の段階です。 どうして？ 参照は目的地から旅へ、終点からインスピレーションへと移動するからです。

すべてのスキルレベルのUIデザイナーは、見つかったUIカラースキームの継続的な記録を保持することで利益を得ることができます。 スクリーンショットを撮り、物理的なカラージャーナルを保持し、ムードボードを開始します。将来の実装のためにカラーイルミネーションの瞬間を刻印するために必要なことは何でも。

色は無視できないほど重要です

デジタルインターフェイスの設計に関しては、色はオプションの考慮事項ではありません。 最小限の色（または完全に白黒のUI）を使用するUIでも、UIデザイナーは、色が使用されている理由と使用されていない理由、およびこれがユーザーエクスペリエンスにどのように影響するかを理解する必要があります。

UIデザイナーが、オリジナルの配色を生成して実装できることも重要です。 他のデザイナーやデジタル製品の作品を参照することは価値のある実践ですが、それがデザインプロセス中に行われる色の探索の唯一の方法である場合、これは制限になります。 現実の世界や心の目で見られる色の組み合わせをキャプチャできることには、計り知れない価値があります。

あなたが色を上手に使うのに苦労しているデザイナーであるか、「私は本当に色のコツがない」と思ったことがあるなら、落胆しないでください。 色を使ったデザインは、創造的な魔法や特別な贈り物ではありません。 これは、繰り返して改善できる単純な技術に基づいた実践的な分野です。

色は、明確で説得力のあるデザインコミュニケーションのマスターキーであることを忘れないでください。 注意深く実装するか、無謀に放棄するかにかかわらず、コンバージョン、ブランド認知度、ユーザーエクスペリエンスに影響を与えます。 UIデザイナーにとって、色は単に無視できない強力なツールです。

•••

Toptal Designブログでさらに読む：

1. UXにおける色の役割
2. より良いUXのためのUIスタイルガイドの作成
3. UXとWebアクセシビリティの重要性
4. アート対デザイン–時代を超えた議論
5. インタラクティブな環境とスマートスペースのための設計