Fluent Design System とは？UXPinのStorybookに取り込む方法
オープンソースのデザインシステムには、高品質の製品を急ピッチで開発する機会があり、組織はユーザビリティとアクセシビリティの基礎的な課題を解決することで、製品開発と問題解決を重点的に行うことができます。
Fluent UIは、エンタープライズ製品を開発する企業で支持されているオープンソースのデザインシステムです。包括的なコンポーネントライブラリを使うことで、マイクロソフトのエコシステムに対応したアプリケーションを構築できるとともに、あらゆる製品のテーマ設定による完全なカスタマイズと柔軟性を実現します。
革新的なMergeテクノロジーを使ってFluent UIデザインシステムをUXPinにインポートして、デザインと開発の間に信頼できる唯一の情報源（Single source of truth）を作成しませんか。詳細とアクセスリクエスト方法については、Merge ページをご覧ください。
Fluent Design Systemとは
Fluent UIは、マイクロソフトが構築・保守するデザインシステムです。オープンソースのデザインシステムで、以下の2つの機能があります：
- LightningがSalesforce向けにするような、Microsoft 365製品を開発するためのデザイン言語とコンポーネントライブラリ。
- Microsoftのエコシステムの外でエンタープライズアプリケーションを構築するためのテーマ別コンポーネントライブラリ
包括的なデザイン システムには、Web、Windows、iOS、Android、および macOS 用のプラットフォーム固有の UI 要素を含む、クロスプラットフォーム アプリケーションを構築するためのコンポーネントとパターンが含まれています。
コンポーネントとパターンには、それぞれクロスプラットフォームの製品開発における凝集性と一貫性を高めるための基本的なステートとインタラクティビティが含まれています。このような機能により、企業はゼロからデザイン、プロトタイプ、テスト、イテレーションを行うのではなく、製品とUX（ユーザーエクスペリエンス）に注力することができます。
Fluent Design Systemの利点
大抵のオープンソースのコンポーネントライブラリから得られる凝集性と一貫性とは別に、Fluent UIはB2B（企業間取引）やエンタープライズ製品のデベロッパーにとって多くの利点があります。
シームレスなMicrosoft 365の製品体験
もし会社でメール、Excel、Word、TeamsなどのためにMicrosoft 365が使われていたら、Fluent UIは、たとえMicrosoft 365と同期していなくても、社内製品用の素晴らしいデザインシステムになります。
受信トレイやスプレッドシートから、倉庫の在庫システムやデータの可視化まで、シームレスなUIデザインを作成することで、従業員はどのワークスペースでも馴染みのあるユーザー体験を得ることができ、それによって学習曲線が短縮されて、最終的に連携と生産性が上がります。
企業向け製品開発
企業のUIは、B2C（企業消費者間取引）アプリケーションに比べて、より複雑なアーキテクチャ、レイヤー、データを持つことが多いため、ゼロから設計すると、最終製品の開発・保守の負担や複雑さに加え、多大なリソースが必要となります。
Fluent UIのようなオープンソースのライブラリで、何百（もしかしたら何千）時間もかけてコンポーネントをゼロから作ってテストする作業が省かれ、その代わり、製品チームは Fluent UIのコンポーネントをドラッグ＆ドロップすることで効率的に新製品を開発することができます。
Fluent UIには、基本的な入力から、日付ピッカー、リストUI、ナビゲーションコンポーネント、通知、モーダルなどのより複雑なパターンまで、包括的なライブラリーが含まれています。また、デザインシステムはテーマ化が可能で、他の製品との統合やブランド要件に合わせたライブラリの適用が簡単です。
さらに、Fluent UIチームがデザインシステムを成熟させ、製品が基本的なユーザビリティとアクセシビリティの要件を満たすようにするため、組織は無料でメンテナンスを受けられるという利点もあります。
Fluent UIによるコンポーネント駆動型プロトタイプ
コンポーネント駆動型のプロトタイプは、ゼロからデザインするのではなく、デザインプロセス中に既製のUI要素を用いてプロトタイプを構築します。
このプロトタイプの手法は、デザインチームがスケッチやペーパープロトタイプから、そのままHi-fiプロトタイプに移行でき、時間のかかる新しいUI要素をデザインするプロセスを省けるという利点があります。
例えば、ゼロから表をデザインするのは特に厄介で、時間がかかりますよね。その点Fluent UIには、実装方法とベストプラクティスを記載したリストUIが多数付いています。
デザイナーは、プロジェクトに適したリストを選び、関連するコンテンツを追加して、すぐにテストを始めることができます。例えば、このドキュメントライブラリーのUIは、デザイン、テスト、イテレーションに何時間もかかりますが、Fluent UIはそのような作業を省き、デザイナーは線、円、四角などを描くのではなく、ユーザーニーズのコア部分の解決に集中することができるのです。
Fluent UIには多くの利点がありますが、従来のデザインツールでプロトタイプを作成すると、入力や日付選択などのユーザーコントロールが機能しないなど、テストが制限される制約があります。
UXPin Mergeがあれば、デザイナーはコードのような忠実性と機能性を実現できます。
コードベースのデザインツールとして、UXPin Mergeはコンポーネント駆動型のプロトタイピングを可能にし、そこでデザイナーは一行のコードも書かずに最終製品の正確なレプリカを作成することができるのです。
UXPin Mergeによる高度なコンポーネント駆動型プロトタイプ
UXPin Mergeでは、組織がレポジトリからコンポーネントライブラリを同期できるため、デザイナーはエンジニアと同じUI要素を使うことができます。Fluent UIのUIキットのいずれかを使う代わりに、UXPinのデザインエディタでデザインシステムのReactのコンポーネントを使うのです。
このような Merge のコンポーネントには、色、サイズ、インタラクティブ性、ステート、機能性など、デザイン システムによって定められた Fluent UI の React プロップが含まれており、そのプロップは UXPin のプロパティパネルに表示されるため、デザイナーは製品の要件に合わせてコンポーネントを調整することができます。
PayPal「Fluent UIとUXPin Merge」の使用例
PayPalがUXPin Mergeに切り替える前は、同社の社内製品は一貫性がなく、使い勝手の問題が多くありました。
PayPalでのデベロッパーツールおよびプラットフォームエクスペリエンスのUX担当シニアマネージャー であるエリカ・ライダー氏は、UXPinのインタビューで「PayPalの製品チームには、経験豊富なUX担当者やUIデベロッパーはいませんでした。その結果、さまざまなユーザビリティとデザインの一貫性の問題、つまり、2つの製品が同じに見えないという問題が生じたのです！」 と述べています。
そこでエリカは、Fluent UIを次のような理由で採用することにしたと述べています：「マイクロソフトのFluentデザインシステムとUIコントロールは、より企業向けに特化しており、社内のUIに適しているため、社内ツールの開発に採用することにしました。」
Fluent UIで、PayPalにUIコントロールと一貫性がもたらされ、コンポーネントの構築と管理よりも製品開発に集中できるようになりました。また、ゼロからデザインする必要性を最小限に抑えるカスタムコンポーネントやUIのテンプレートなどのテーマ別のFluent UIライブラリをホストするのに、同社はGitHubのプライベートレポを使っています。
レポジトリ内のコードによって設定された制約のもと、PayPalのプロダクトチームがデザインプロジェクトの90％を完成させ、UXデザイナーは「UX（ユーザーエクスペリエンス）の指導者」として、複雑なユーザビリティの問題や継続的なコーチングをサポートします。
Fluent UIとUXPin Mergeに切り替えてから、PayPalの製品チームは、経験豊富なUXデザイナーが画像ベースのツールを使っていたときよりも8倍速く製品を提供できるようになりました。
信頼できる唯一の情報源（Single Source of Truth）
Fluent UIやMergeのようなデザインシステムを使う最も大きな利点は、すべての製品開発チームにわたって信頼できる唯一の情報源（Single source of truth）を作成することです。
Fluent UIのコンポーネントはすべて1つのレポジトリから提供されるため、デザイナーとエンジニアは同じ制限と制約の中で作業でき、レポジトリに変更があると自動的にUXPinに同期されて、デザインチームに更新が通知されます。さらに、デザイナーはUXPinのバージョンコントロールを使って、いつでもどのプロジェクトでも、どのバージョンのデザインシステムにも切り替えることができます。
迅速な製品の成熟度
製品やデザインシステムを成熟させるには、かなりの時間とリソースが必要ですが、Fluent UIを使えば、スタートアップ企業が何年もかけて行ってきた研究開発を、最初のリリースでFortune500のソフトウェア企業と肩を並べるまで早めることができます。
Fluent UIユーザーは、コンポーネントの開発に悩まされることなく、製品のイノベーションと問題解決に集中することができ、デザインシステムには、ゼロからデザインやプログラミングをすることなく、プロダクトをスケールアップするためのUI要素がすべて揃っています。
Fluent UIのコンポーネントをUXPinにインポートする方法
Fluent UI の Reactのコンポーネントライブラリをインポートする場合、デザイナーには 2 つの選択肢がありますが、どちらを選ぶにしても、ファイル構造とレポジトリの正しい設定のためにエンジニアの協力が必要です。
Git統合
UXPinのGit統合は、Reactのコンポーネントでのみ動作してレポジトリに直接接続し、エンジニアは、すべてをセットアップするのにUXPinのボイラープレート・レポをテンプレートとして使うことができます。そしてUXPinのテクニカルサポートは、このプロセスを通じて企業を指導し、デザインシステムが確実に正しく同期されるようにします。
始めの接続が完了すれば、UXPinはどんな変更点でも自動的に同期してデザイナーにその更新情報を通知します。
Storybook統合
UXPinのStorybook統合もReactで動作しますが、組織のFluent UIのVue、Angular、Emberのライブラリとの同期も可能です。
Storybookは、UIのコンポーネントを単独で開発・管理するための素晴らしいツールであり、UXPinのStorybookのベストプラクティスで、組織が確実にStorybookとMergeを最大限に活用できるようにします。
UXPinでStorybookのコンポーネントを使う
Storybookのセットアップが完了すると、左サイドバーの「デザインシステムライブラリ」にコンポーネントライブラリが表示され、以下のマテリアルUIの例のように、ライブラリ名の横にStorybookのアイコンが表示されます（MUIライブラリのGit 統合のアイコンは違うことに注意しましょう）。
デザイナーは、ライブラリからコンポーネントをドラッグ＆ドロップして、UIを構築しますが、UXPin Patternを使って、このようなStorybookのコンポーネントや他のライブラリの要素を組み合わせることもできます。
UXPin Patternには、以下のように大きなメリットが２つあります：
- デザインシステムを拡張するための新しいUIのコンポーネントとテンプレートの作成（デザイナーは、エンジニアがレポジトリに追加するのを待つ間、これらを共有・使用し、プロトタイプを継続できる）
- プロトタイプやテスト時の速やかな変更のための、コンポーネントの複数のステートやバージョンの保存。
Argsとプロップの使用
組織は、Reactのプロップ や StorybookのArgs を使って、UXPin のプロパティパネルに表示されるコンポーネントのプロパティを設定することができ、そのプロップやArgsで、デザイナーは色、タイポグラフィー、ステート、影、その他の重要な値など、スタイリングのためのデザインシステムのガイドラインに確実に準拠できます。
デザイナーは、毎回最小限の労力でブランドらしい仕上がりを実現するのに、ドロップダウンやチェックボックス、テキストフィールドなどを使ってさまざまなプロパティを適用できます。
このようなプロパティには、すでにレポジトリにコンポーネントとスタイリングがあり、それによってリリースごとに絶対的な凝集力と一貫性を保証されることから、エンジニアは最終製品をより速く開発できるようになるのです。
Merge と Fluent UI で早速デザインを始めよう！
UXPin Merge と Fluent UI のパワーをうまく使って、顧客の期待を上回る高品質のUXを実現するエンタープライズ製品を開発しましょう。詳しい情報およびデザインシステムやオープン ソースのコンポーネント ライブラリを同期するためのアクセスのリクエスト方法については、Mergeのページをぜひご覧ください。
