Windowsでは、ユーザー インターフェイス要素間の視覚的階層と構造を示すことによって、ユーザーがタスクに集中できるように色を使用します。 色は適切なコンテキストであり、落ち着きのある基本部分が用意され、ユーザーの操作性をさりげなく向上させ、必要な場合にのみ重要な項目が強調されるように色が使用されています。
ヒント
この記事では、Fluent Design 言語をWindows アプリに適用する方法について説明します。 詳細については、「 Fluent Design - Color」を参照してください。
色モードとテーマ
Windowsでは、明るい色と暗い色の 2 つの色モードまたはテーマがサポートされています。 各モードは、最適なコントラストを確保するために自動的に調整される、ニュートラル カラー値のセットで構成されています。 Windowsアプリでは、アプリの背景、テキスト、アイコン、および common コントロールの色に影響する明るいまたは暗いアプリケーション テーマを使用できます。
淡色と濃色のどちらのモードでも、より濃い色は、重要度の低い背景面を示します。 重要な表面は、より明るい色で強調表示されます。 詳細については、「 レイヤー化 昇格 」を参照してください。
既定では、Windows アプリのテーマは、Windows設定またはデバイスの既定のテーマからのユーザーのテーマ設定です。 ただし、アプリ専用にテーマを設定できます。 テーマを変更する方法、テーマ ブラシを使用する方法、コードでアクセント カラーをカスタマイズする方法については、「Windows アプリでのテーマを参照してください。
アクセント カラー
アクセント カラーは、ユーザー インターフェイスの重要な要素を強調し、対話型オブジェクトまたはコントロールの状態を示すために使用されます。 アクセント カラー値は、ライト モードとダーク モードの両方で、自動的に生成され、コントラストのために最適化されます。 アクセント カラーは、重要な要素を強調し、対話型の要素の状態に関する情報を伝えるために控えめに使用されています。
例
WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。
色使いの原則
色が意味を持つように使用します。 重要な要素が強調されるように控え目に色を使用すると、柔軟で直感的なユーザー インターフェイスの作成に役立ちます。
相互作用を示すために色を使用します。 アプリケーションの中で、操作の対象要素を示す色を 1 つ決めておくことをお勧めします。 たとえば、多くの Web ページでは、ハイパーリンクを示すために青色のテキストを使用しています。
色は個々のユーザーが設定できます。 Windowsでは、ユーザーはアクセント カラーと、エクスペリエンス全体に反映される明るいテーマまたは濃色のテーマを選択できます。 開発者は、ユーザーが選んだアクセント カラーとテーマをどのようにアプリケーションに組み込んで、個人に応じたエクスペリエンスを提供するかを選択できます。
色の解釈は文化によって異なります。 アプリで使用する色が、異なる文化圏のユーザーにどのように解釈されるかを考慮してください。 たとえば、文化によっては、青が美徳と保護を表すこともあれば、服喪を連想させることもあります。
使いやすさ
コントラスト
アクセント カラーやテーマに関係なく、要素とイメージに、それぞれを区別するのに十分なコントラストがあることを確認してください。
アプリケーションで使用する色を検討するときは、アクセシビリティが主要な考慮事項になります。 以下のガイダンスを使用して、できるだけ多くのユーザーがアプリケーションにアクセスできるようにしてください。
照明
環境光の変化がアプリのユーザビリティに影響する可能性があることに注意してください。 たとえば、背景が黒のページは、画面の輝きによって外で読めなくなる可能性があり、背景が白のページは、暗い部屋では見づらくなる可能性があります。
色覚障碍
色覚障碍によるアプリケーションのユーザビリティへの影響に注意してください。 たとえば、赤と緑の色覚障碍のあるユーザーは、赤と緑の要素をそれぞれ区別するのが困難になります。 男性の約 8%、女性の約 0.5% に赤と緑の色覚障碍があるため、これらの色の組み合わせをアプリケーション要素の唯一の差別化要因として使用することは避けてください。
関連項目
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
Windows developer