1つの色から完全なUIパレットを作成する

1. 色を選択する前にインターフェースを定義する

カラーホイールではなく、プロダクトから始めましょう。ポートフォリオ、銀行ダッシュボード、レシピアプリケーション、子供向けの学習プラットフォームは、それぞれまったく異なるレベルのエネルギー、信頼性、節度、視覚的なコントラストが必要な場合があります。デザインしているもの、誰が使用するか、ユーザーが何を達成する必要があるかを書き出してください。

次に、インターフェース内の主要なコンポーネントをリストアップします。これらには、ナビゲーションバー、カード、フォーム、ボタン、通知、価格表、フッターが含まれる場合があります。このインベントリにより、必要な機能的な色の役割が何個かが明確になります。ほとんどのインターフェースには、経験の浅いデザイナーが予想するより少ない役割しか必要ありません。

製品の視覚的な性質について、3つの説明的な目標を作成します。例としては「落ち着いた、信頼性の高い、直接的な」または「創造的で、エネルギッシュで、親しみやすい」などが挙げられます。これらの言葉は、生成されたパレットを評価するためのフィルターになります。色は単独では魅力的かもしれませんが、構築している体験には間違っている場合があります。

この段階では、青は常に信頼を意味し、赤は常に緊急性を意味するとは決定しないでください。色の関連性はコンテキスト、文化、周囲の色、および以前のユーザー体験に依存します。最初に製品の実用的なニーズを定義し、その後、色がそれらをどのようにサポートするかを評価してください。

2. お気に入りの色を安定した基本色に変換する

出発点は、ロゴ、写真、物理的なプロダクト、または個人的な好みから得た色である場合があります。その色をHEX、RGB、HSLなどの正確なデジタル値に変換してください。「深紫」は解釈の余地がありますが、#4F46E5のような値は一貫して再現できます。

開始色がない場合は、ランダムカラージェネレータを使用して可能性を探索してください。ランダムに生成された色を最終決定ではなくプロンプトとして扱います。いくつかのオプションを生成し、有望なものを保存し、手順1で定義した3つの製品の品質と比較します。

インスピレーションがロゴ、写真、またはムードボードから来ている場合は、ビジュアルをイメージからのパレットツールにアップロードしてください。支配的な色を識別し、そのコードをコピーするのに役立ちます。プロジェクトを表す色を選択しますが、元の画像の外でも機能することを確認してください。

暖かい写真に囲まれた色は、プレーンな白いインターフェースに配置されるとまったく異なる感じに見えることがあります。候補色をライトとダークの両方の背景でテストしてください。濁ったり、過度に明るくなったり、区別しにくくなった場合は、基本色として宣言する前に、明度または彩度を調整してください。

3. 基本色に明確なセマンティック役割を与える

基本色にはジョブが必要です。多くのプロダクトでは、プライマリカラーはフォーム送信、試用開始、変更保存などの重要なアクションを表します。他のインターフェースでは、同じ色が主にリンク、選択されたナビゲーション項目、または装飾的なブランディングに使用される場合があります。

ユーザーがその色を見ることが予想される場所を決定します。「インタラクティブ」を意味する場合は、通常の見出しと装飾的な図形への適用を避けてください。ユーザーは視覚的なパターンをすぐに学びます。同じ色が「ここをクリック」を意味することもあれば、何も意味しないこともある場合、インターフェースは予測不可能になります。

ブランド認識をインターフェース動作から分離します。強いブランドカラーが画面全体を覆う必要はありません。プライマリボタン、ロゴディテール、アクティブなタブ、フォーカスインジケーターで選択的に使用すると、記憶に残る状態を保つことができます。毎回の表示が意味を持つため、節度はしばしば色をより認識可能にします。

4. 有用なティントとシェードを生成する

単一の色値は滅多に十分ではありません。ボタンにはホバー状態と押下状態が必要です。選択された領域は薄い背景が必要な場合があり、ダークモードは同じ色相の軽いバージョンが必要な場合があります。非常に薄いティントから深いシェードまでのスケールを作成します。

カラーパレットジェネレータを使用して、単色の組み合わせを探索し、明度と彩度を調整します。基本色をロックして、周囲の色を再生成する際に安定を保ちます。生成された値をパレットに表示されているというだけで保持しないでください。特定の役割を実行する場合にのみ保持します。

また、カラーミキサーを使用して、2つのHEX色間の中間値を作成することもできます。基本色を軽いサーフェスカラーと混ぜると、微妙な選択背景を示唆できます。より暗いエンドポイントと混ぜると、ホバー状態と押下状態を探索するのに役立ちます。

隣同士の色がほぼ区別できないスケールを避けてください。保持された各ステップは、コンテキスト内で目に見える違いを作成する必要があります。コンパクトで有用なスケールは、値が明確な関数を実行しない10色スケールより優れています。

5. ニュートラルな基礎を構築する

機能的なインターフェースのほとんどは通常ニュートラルです。ページ背景、サーフェス、ボーダー、本文テキスト、ミュートされたラベル、無効なコントロールは、プライマリアクションと競わない色が必要です。これが、UIパレットが明るいブランドカラーだけで構成されていない理由です。

ページ背景とサーフェスカラーから始めてください。サーフェスは背景から区別可能である必要がありますが、パッチワーク効果を作成するべきではありません。次に、強いテキストカラー、よりソフトなセカンダリテキストカラー、そして微妙なボーダーカラーを追加します。

ニュートラルは完全にグレーである必要はありません。ブランドの色合いの少量がシステムをより統一した感じにすることができます。たとえば、クール系のプライマリカラーは、わずかにクール系のグレーとうまく機能する場合があります。色合いは、コンテンツの読みやすさが快適に保たれるほど微妙に保ちます。

ミュートされたテキストやボーダーを作成する唯一の方法として、不透明度を削減しないでください。透明色は、異なる背景に配置されると変わります。一貫性が重要な場合は、明示的な値を定義し、表示される各サーフェスでテストしてください。

6. 制御された補色を選択する

セカンダリカラーは、チャート、イラスト、プロモーション領域、または選択されたカテゴリーをサポートできます。ビジュアル言語を展開する必要があります。プライマリとセカンダリの両方のカラーが同じくらい強く、同じくらいの頻度で表示される場合、ユーザーはどの要素が注目に値するかを理解するのに苦労する場合があります。

落ち着いた関係が必要な場合は、アナロガス組み合わせを探索してください。補色またはスプリット補色の組み合わせは、より強い分離を作成できますが、より多くの節度が必要です。Adobeの色理論ガイドは、カラーホイールと一般的なハーモニーモデルの有用な概要を提供します。

分離されたスウォッチを比較するのではなく、コンポーネント内でテストしてセカンダリカラーを選択します。小さいチャート、タグ、イラスト、または情報カードに配置します。その後、プライマリボタンの横に表示します。セカンダリ要素が最初に注目を集める場合は、彩度を下げるか、より明るくするか、表示頻度を制限します。

7. インターフェースの役割に色を割り当てる

これは、色の集まりがデザインシステムになるポイントです。「青」、「紫」、「グレー2」などの色ベースの名前を、役割ベースの名前に置き換えてください。セマンティック名により、後でコンポーネントのすべての名前を変更することなく値を変更できます。

最初は役割のリストを短く保ちます。既存の役割で繰り返されるデザインの問題が解決できない場合にのみ、別のトークンを追加します。これにより、ほぼ同じ値が多数インターフェースに入るのを防ぎます。

8. ホバー、フォーカス、無効ステートを作成する

インターフェースは人に反応します。ボタンは、アイドル、ホバー、フォーカス、押下、読み込み、または無効である場合があります。これらのステートすべてが同じように見える場合、ユーザーはインターフェースがそのアクションに気付いたという確認がほとんど得られません。

ステートカラーをコンポーネントのデフォルト色の制御された変化として作成します。ホバー状態は少し暗いまたは明るい場合があり、押下状態はより強い視覚的な変化を作成できます。フォーカスインジケーターは、コンポーネントとその周囲の背景の両方に対して見えたままである必要があります。

色だけでステートを伝えないでください。アイコン、下線、アウトライン、メッセージ、または形状の変化など、別の手がかりと色を組み合わせます。たとえば、無効なフォームフィールドは、エラーカラーのボーダーとエラーアイコンおよび説明テキストを一緒に使用できます。

無効なコントロールは特別な注意が必要です。利用不可のように見える必要がありますが、読めなくなってはいけません。過度に薄いテキストはアクセシビリティの問題を生成でき、アクティブに見える無効なボタンは混乱を引き起こす場合があります。塗りつぶし色だけで判断するのではなく、完全なコンポーネントをテストしてください。

9. 色のコントラストとアクセシビリティをテストする

視覚的な調和は読みやすいコンテンツを保証しません。すべての重要なフォアグラウンドとバックグラウンドのペアをコントラストでテストする必要があります。W3C Webコンテンツアクセシビリティガイドライン2.2は、成功基準1.4.3の下で、通常のテキストで4.5:1、大きいテキストで3:1の最小コントラスト比を指定しています。

アクセシビリティテストは、インターフェーム全体が構築された後ではなく、パレット作成中に行う必要があります。ペアが失敗した場合は、色相にランダムな変更を加える前に明度を調整してください。ホバー、押下、選択、無効なバージョンを個別に再テストしてください。各ステートは異なるフォアグラウンド背景関係を作成するためです。

10. ライトモードとダークモードのパレットを準備する

ダークモードは黒と白を逆にすることで作成されません。色は暗いサーフェスで異なる動作をします。明るく彩度の高い色は振動する場合があり、影はより役に立たなくなり、純粋な白いテキストは厳しく感じられる場合があります。各セマンティック役割の意味を保持しながら、階層を再構築します。

テーマ全体でトークン名を一貫性のあるものにしておきます。backgroundに割り当てられた値は変更できますが、その目的は変わりません。同じ原則がサーフェス、テキスト、ボーダー、プライマリアクションに適用されます。これにより、コンポーネントはテーマ固有のロジックを含めずにテーマを切り替えることができます。

Appleの色に関するヒューマンインターフェースガイドラインは、異なる外観を検討し、コミュニケーションのために色を一貫して使用することをお勧めします。両方のテーマをコンテキストでテストし、重要な情報が色だけで表現されていないことを確認してください。

可能な限り、明るい環境と薄暗い環境でスクリーンをレビューしてください。暗いパレットは暗い部屋では優雅に見える場合がありますが、昼間は分離が不足している場合があります。また、画像、チャート、イラスト、ロゴを検査してください。これらのアセットは、単純な背景の変更ではなく、テーマ対応バージョンが必要な場合があります。

11. 実際のコンポーネント内でパレットをテストする

パレットはスウォッチの行として承認されるべきではありません。見出し、段落、リンク、プライマリボタン、セカンダリボタン、フォームフィールド、カード、ナビゲーション項目、アラートを含む小さいテストページを構築します。これにより、パレットプレビューで見えない問題が明らかになります。

さまざまな長さのコンテンツをテストしてください。短い英文ラベルは快適に収まりますが、翻訳版は2行に折り返される場合があります。モバイルとデスクトップのサイズでパレットをチェックし、キーボードフォーカスが見えるようにし、現実的なエラーメッセージが表示されるようにしてください。

コンテンツが豊富なレイアウトは、節度をテストするのに特に有用です。たとえば、無料の履歴書ビルダーは、装飾よりも階層と読みやすさが重要なインターフェースのタイプを表しています。パレットがユーザーがセクションをスキャンするのに役立つかどうか、または情報から気を散らすかどうかを尋ねてください。

実際の問題を解決しない色を削除します。2つの値が視覚的に区別できない場合は、1つを保持します。セカンダリカラーがメインアクションと繰り返し競合する場合は、イラストに予約するか、インターフェースパレットから完全に削除します。

12. システムをドキュメント化、エクスポート、保守する

パレットが実際のコンポーネントで機能したら、それをドキュメント化します。すべての色の値、セマンティック名、許可された使用、重要な制限を記録します。テストされたテキストの組み合わせと、色の使用方法が間違っていない場合の例を含めます。

カラーパレットジェネレータでは、CSSをコピーすることができます。これは、開始点として役立ちます。各HEX値が何を意味するかをデベロッパーが覚える必要がないように、エクスポートされた変数を役割に従って名前を変更してください。

:root {
  --color-background: #ffffff;
  --color-surface: #f7f7fa;
  --color-text-primary: #17171c;
  --color-text-muted: #5f606b;
  --color-primary: #4f46e5;
  --color-on-primary: #ffffff;
  --color-border: #d9dae2;
  --color-success: #16794b;
  --color-warning: #9a6700;
  --color-error: #b42318;
}

PNGとしてビジュアルパレットボードを作成する場合、PNG から PDF へのコンバーターは、共有またはアーカイブする場合に便利なPDFに変換できます。ただし、ビジュアルドキュメントのみに依存しないでください。最終トークンをプロジェクトのデザインシステムまたはコードベースに保存して、値が一貫したままであることを確認してください。

パレットを保守されているシステムとして扱います。値が変更される場合、それを使用するすべての役割とステートをテストしてください。変更がされた理由を記録し、ほぼ同じ置き換えが蓄積できるようにするのではなく、古い値を削除してください。