ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

  • DevRel
  • Com2