色を選択し、さまざまな状態の色合いを決定する方法: ホバー、アクティブ、プレス、無効

インターフェイスの色を選択するプロセスは、特にさまざまなボタンの状態、フォント、その他の UI 要素を考慮する場合、複雑になる場合があります。この記事では、プロジェクトの配色を適切に選択するのに役立つ私の方法と原則を共有します。

1. 原色の定義

Web サイトをデザインするとき、多くの場合、配色を選択する必要があります。場合によっては、クライアントがすでに主要なブランドカラーを持っている場合もあります。この場合、あなたの仕事は、原色を補う追加の色と色合いを選択することです。サイトでは、メインの色とは別に、エラー状態、リンク、イラスト、アイコンの表示、グラフィックやダッシュボードでの使用など、さまざまな目的で追加の色が使用されます。

2. カラーハーモニーを使用する

色をうまく調和させるには、単色、補色、三角形などのさまざまな色の調和スキームを使用すると有益です。これらは、プロジェクトの原色を補う調和のとれたカラー パレットを作成するのに役立ちます。現在、私たちはテクノロジーが急速に進歩している世界に住んでおり、簡単に配色を生成する特別なサービスがあります。たとえば、私はcolor.adobe.com を使用します。

私のやり方は次のとおりです。

1つ。ドロップダウン リストから目的のスキームを選択します。

二。基本色として示されているフィールドに必要な色の値を入力します。

三つ。どの色が自分のニーズに合うかを判断します。

四。私の場合は Figma を使用して、それらをワークスペースに転送します。

3.音色の選択

次に、選択した各色の色合いを決定する必要があります。選択した色の色合いを選択するには、このプロセスを支援する特定のサービスを使用できます。色の色合いを決定するには 2 つの方法があります。

最初の方法には、より複雑な式が含まれます。

1. ヘッダーの色を選択します (黒である必要はありません)。
2. HLSモードに切り替えます。
3. 最初のセルをスキップし、2 番目のセルの値を 2 減らし、3 番目のセルの値を 5 増やします。

2 番目の方法は、サービスを使用することです (簡単で速い)

カラーズ.ドープリ.トップ

1つ。希望する色の値を入力します。

二。色合いとステップ数を選択します（私は5を使用しました）。

三つ。色合いとステップ数を選択します。

4 。その結果、1つの色について次の表を作成しました

P = プライマリ、

P 60 = これは私たちの原色です、

P 10 から P 50 = これらはティントで収集した明るいトーンです。

P 60 から P 100 = これらは、[シェード] パネルで収集した暗い色合いです。

4. カラー アクセシビリティの確認

選択した色が、能力が制限されているユーザーを含むすべてのユーザーがアクセスできるようにすることが重要です。 Web コンテンツ アクセシビリティ ガイドライン ( WCAG ) など、インターフェイスを作成するときに従うことができるガイドラインがあります。色のアクセシビリティを確認するには、選択した色のコントラストとアクセシビリティを検証するプラグインや Web サービスなどの特定のツールを使用できます。

Figma プラグイン –コントラスト

Webサービス – Coolers

5. さまざまなインターフェイス状態の色の定義

Web プロジェクトのカラー パレットを設計する最終段階では、特定の要素の状態に必要なステップ数を決定する必要があります。通常、次の 4 つの主要な状態が特定されます。

• 有効 (要素の穏やかで正常な状態)
• ホバー（マウスオーバー）
• アクティブ (ボタンまたは別のコントロールをクリック)
• 無効 (ブロックされた要素)

ステップ数を決定するには、カラー パネルを使用し、メイン カラー値 (プライム) を固定します。次に、ホバー状態とアクティブ状態の歩数をカウントします。その後、さまざまな状態のアクセシビリティをテストして、ボタンとボタン内のテキストが読みやすいことを確認します。

たとえば、 IBM のガイドラインでは次のアプローチが説明されています。ホバー状態は初期色から 1.5 ステップですが、アクティブ状態はメイン カラーから 2 ステップです。同様にメインカラーから一歩進んだ状態が選択状態となります。この方法により、カラー パレットを定義し、能力が限られたユーザーを含む幅広いユーザーがそのカラー パレットにアクセスできるようにすることができます。同じアプローチがテキストにも適用され、ホバー状態とアクティブ状態が識別されます。

ホバー状態

メインカラーが黒から 70 の間の場合は、半段階上げて明るい色合いにする必要があります。

メインカラーが60と白の間の場合は、半音下げて暗い色調にする必要があります。

プレス/アクティブ状態

100 ～ 70 の値では、アクティブ状態が 2 段階軽くなります。

値が60 ～ 10の場合、アクティブ状態は 2 段階暗くなります。

選択された州

100～70の場合、選択状態が1段階明るくなります

値が 60 ～ 10 の場合、選択状態が 1 段階暗くなります。

デザインとテキストをテストして、読みやすく、正しく表示されることを確認することも重要です。作業が完了したら、さまざまなインターフェイスの状態とテキストが正しく表示され、機能することを確認します。

配色を正しく選択することは、ユーザーフレンドリーで魅力的なユーザー インターフェイスを作成する上で重要な役割を果たします。これらの簡単な手順に従い、利用可能なツールを使用することで、プロジェクトの色を選択して最適化することができます。

私の記事を楽しんでいただければ幸いです。ご質問がある場合、またはさらに詳しい情報が必要な場合は、お気軽にコメントを残してください。