Fluent UIとは

Microsoftが推進しているデザインシステムのこと。

Microsoftではすべての人がより多くのことを達成できるようにするというミッションを達成するための手段の一つとしてこのFluent UIというデザインシステムを開発しています。

それを達成するために優れたアクセシビリティ基準を備えています。

対応開発環境

Web

• React
• Node.js
• Blazor

iOS/MacOS

• Swift
• Objective-C

Windows

• WinUI 3

アクセシビリティ

WCAG2.1 AA

FluentUIコンポーネントはWCAG 2.1AA基準を満たすか上回っており高いアクセシビリティを確保しています。

構造およびナビゲーション

明確な構造とナビゲーションにより、エクスペリエンスを直感的かつ流動的にナビゲートできます。

タイプランプやテキストの書式設定、色、区切り線、間隔などのツールを使用してインターフェイス内でのグループ化や重要度のラベルを作成します。

色

Microsoftエクスペリエンスの色はWCAG AAコントラスト比に合格する必要があります。

高いコントラストを維持することは色の違いだけに頼らないあらゆる人に識別しやすいUIを提供することになります。

標準テキストは背景とのコントラスト比が少なくとも4.5:1である必要があります。大きなテキストの場合は少なくとも3:1である必要があります。

レスポンシブレイアウト

縦向きまたは横向きまたは解像度に応じて設定やズームレベルを指定できます。

アプリケーションは情報を失わずにコンテンツに応答しリフローする必要があります。

デザイントークン

デザイントークンは、ピクセルや16進コードをハードコーディングせずに、色や間隔、高さなどのスタイル設定を割り当てるために保存された値です。

このデザイントークンによりPlatformや分野全体で一貫した設計を保証できます。

グローバルトークン

FluentUIでは2層のトークンを使用します。

まず、グローバルトークンではコンテキストに依存せず、色の16進コードなどの生の値を格納します。

グローバルトークンにはタイポグラフィ、境界線の半径、アニメーションに関する情報なども格納されます。

エイリアストークン

エイリアストークンでは保存された値に意味的なものを付加します。

テーマ設定

Fluentの堅牢な設計トークンでは柔軟性とアクセシビリティを考慮して設計されています。つまり、ライトモード、ダークモード、高コントラストなどのテーマ設定をサポートしていてすべてが十分な色のコントラストを確保しています。そして、すべてでアクセシビリティを確保しています。

まとめ

Fluent UIデザインシステムを採用することによって人間の感覚によらないシステム的に計算されたアクセシビリティが確保できます。

その一つが、システムで規定された色のコントラスト比でありまた標準化されたカラーパレットとその意図的な適用によって一貫したエクスペリエンスが保証されます。

男性の20人に一人と言われている色覚障害への対応は色についての専門的な知識が必要とされますが、このFluent UIを採用することによってシステム的に計算されたアクセシビリティが確保できます。これによって誰一人として取り残さない持続可能な社会の実現の一助となればと考えています。