HTML5で高度なWebアプリケーションの開発が行えるようになっています。そういったサービスを開発する場合、大事なのはUIです。従来のWebっぽさを残すと、ユーザビリティが低くなりがちです。なるべくネイティブ風なUI/UXを意識しましょう。 もしWindows向けのサービスを開発しているならばFluent UIを使ってみましょう。Microsoft社が開発しているUIフレームワークになります。

Fluent UIの使い方

スクリーンショット多めで紹介します。まずはカレンダーコンポーネント。

カラーピッカー。

アイコン付きのピッカー。

アイコンとリスト。

アイコン。下に小さなステータス表示も。

メニュー。

ツールチップ。

サイドパネル。

モーダル。

アイコン。

Fluent UIはMicrosoftのWeb体験に合わせたUIコンポーネントとなっています。Fluent UIを使うことで、Azureのようなサービスをはじめ、MicrosoftっぽいUIのシステムのUIになるでしょう。業務系システムによさそうです。

Fluent UIはReact/TypeScript製のオープンソース・ソフトウェア（MIT License）です。

microsoft/fluentui: We’ve moved! UI Fabric is now Fluent UI - A set of React components for building Microsoft web experiences. Home - Office UI Fabric