Fluent UIとは
現在、Microsoftが推進しているデザインフレームワーク。
単に、UIパーツを提供するのみならずそのデザイン原則を提供してこれに沿った設計をすることでUIを標準化できる。
また、これはアクセシビリティの向上にもつながる。
色
Webデザインにおいて様々な色を使用することはアクセシビリティの低下につながる。
色の識別が難しい方にとって色で情報を表現することは、それだけで情報を受け取れない可能性につながってくる。
アクセントカラー(ブランドカラー)
色は製品のブランドを認識するためのカギとなります。PowerPointなら、Excelなら、と即座に思い浮かべる色があると思います。これがブランドカラーです。
インターフェイスの様々な領域にブランドカラーを適用すると視覚的に目立つだけではなくユーザーに特定製品のイメージとして定着させることができます。
Fluent UI Blazorではこれをメインのボタンなどに使用していきます。
セマンティックカラー
セマンティックカラーは、赤は危険、黄色は注意、緑は肯定的なフィードバックなど現実的な関連付けに基づいて一目で分かる情報を伝えます。これらを一貫して使用して他の指標と組み合わせることはコンテキストを強化して認知的な付加を軽減することに役立ちます。
マンティックカラーを装飾として使用してはいけません。
階層状態
表面に明るいニュートラルを使用して、例えばアクティブモーダルを強調表示して階層感を作成します。これによってユーザの目は最も必要なインターフェースの領域に注目させることができます。
カラートークン
一貫した色の使用により、エクスペリエンス全体、さらには製品全体の視覚的な連続性が生まれます。
色の使用方法で最もよいかつ簡単な方法はFluentUIのデザイントークンシステムを使用することです。これにより、視覚障害や色覚異常がある人でも認識できるコントラストの確保を提供できます。
また、色の16進コードを探すことなく適切な色を簡単に選択できるコンテキストを提供します。
ダークモードやライトモードでも認識できるようなコントラストの確保も行います。
ボタンの配置
デザイン原則の上で代表的な例として取り上げるのがボタンの配置です。
WebでもデスクトップでもUIを語るうえでボタンがないようなシステムはないといっても過言ではないかと思います。
たとえば、「はい」と「いいえ」という2つのボタンを配置する必要があったとしてどのように配置すべきかというのは大きな問題です。
また、そのボタンの色というのも視覚上大きなポイントになります。
ボタンの色
通常、ボタンにつけることができる色は「Accent」または「Neutral」のいずれかです。
レイアウトの中で最も重要なボタン1つのみに「Accent」を利用することができ、その他は「Neutrul」で表現します。
ボタンの配置
レイアウトの「Accent」のボタンは最も重要なアクションに一つだけ使用することができます。
同じ優先度のボタンが同一のレイアウト内に2つ以上ある場合はすべてのボタンを「Neutral」にする必要があります。
「Accent」にしたボタンは常に他のアクションの上または左に目立つように配置する必要があります。右から左に記述する文書ではこれは逆になり右になります。
すなわち、「はい」「いいえ」であったり「OK」「Cancel」のような選択肢があった場合は「はい」や「OK」がより重要で論理的に順当な選択肢であると考えられるため、左側に配置して「Accent」を使用します。
ボタンのコントラスト
ボタンに視覚的にアクセスするために、アクセシビリティの観点からすべてのインタラクティブ状態でボタンのテキストが4.5:1以上にボタンの背景に対するコントラストが3:1以上にする必要があります。
これは、Fluent UI Blazorのデザイントークンを使用して構築している場合このコントラスト比は保証されています。
また、無効になっているボタンは色のコントラストの条件の対象外です。
ボタンの上の文字
ボタンによって引き起こされるアクションを反映したアクティブな動詞を使用します。
簡潔に通常は単一の動詞が最適ですが明瞭さが増す場合は名詞を含めます。
末尾の句読点は使用しません。
まとめ
ここでは、色とボタンについて記述しましたが他にもコンポーネントごとにその使用法、デザイン原則が定められています。
こうした、原則に従って画面設計を進めていくことで標準化されたアクセシビリティに優れるUIが作れるとおもいま