Loading article…
 | |||||||||||||||||||||||||
| その他の名前 |
| ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 原作者 | マイクロソフト | ||||||||||||||||||||||||
| 開発者 | マイクロソフト | ||||||||||||||||||||||||
| 初回リリース | 2017 | ||||||||||||||||||||||||
| |||||||||||||||||||||||||
| |||||||||||||||||||||||||
Fluent Design System（コードネーム「Project Neon」）[11]は、正式にはMicrosoft Fluent Design Systemとして発表され、[12]、Microsoftが2017年に開発したデザイン言語です。Fluent Designは、Microsoft Design Language 2（Microsoft Design Language 1のコードネームである「Metro」と誤って呼ばれることもあります）を改良したもので、すべてのWindows 10およびWindows 11デバイスとプラットフォーム用に設計されたソフトウェア内で使用されるデザインとインタラクションのガイドラインが含まれています。このシステムは、光、深度、動き、材質、スケールの5つの主要コンポーネントに基づいています。[13]新しいデザイン言語では、動き、深度、半透明の効果がより顕著に使用されています。[14]
Fluentへの移行は長期にわたるプロジェクトであり、2017年10月にリリースされた「Fall Creators Update」からWindows 10にデザインの側面が登場し始め、同時にリリースされたXbox Oneシステムソフトウェアのアップデートでもそのデザインが採用された。 [15] [16] [17] [18]その後、同様のデザインを持つWindows 11に加えて、Windows 10Xと連携して設計されていることが明らかになった。 [ 19 ]
MetroとAeroと比較して
Fluent の主要原則、つまり「ブロック」（ライト、深度、モーション、マテリアル、スケール）は、Metroが定義したフラットな概念から離れ、Metro が導入したクリーンな外観と操作性を維持しながら、Fluent はWindows VistaとWindows 7で導入されたデザイン手法であるAeroのビジュアルを刷新します。これには、ぼかし半透明、視差アニメーション パターン、ドロップ シャドウ、マウス ポインターや入力ジェスチャの動きに追従するハイライト効果、Metro がかつて廃止した「フェイク マテリアル」が含まれます。[21]
デザインコンポーネント
ライト
 | |
ライト ハイライトを表示 フォーカスを表示 |
光の目的は注意を引き、情報を照らすことです。したがって、光はUIとカーソルまたはポインターとの関係を確立します。[22]
- ハイライト表示:マウスをホバーすると、ハンバーガーナビゲーションメニューリストやボタンなどのオブジェクトの近くの隠れた境界線がハイライト表示によって照らされます。クリックやタップなどの選択を行うと、白い円形の照明効果がすぐに表示されます。[22] [23]
- フォーカスの表示:フォーカスビジュアルを介して境界線が光るフォーカス可能なアイテム。[24]
WinUI 2.6では、MicrosoftはWebおよびモバイル製品に合わせてハイライト表示を廃止しました。Webおよびモバイル製品ではハイライト表示が提供されていません。[25]さらに、Windows 11のリリースに伴い、Microsoftは徐々に一般的なライト効果の使用をやめ、代わりにアニメーションを通じて扱いやすさを提供しています。[25]
深さ
コンテンツに奥行きを加えるには、Z軸のレイヤーを使用します。奥行きはドロップシャドウとZ深度レイヤーによって表現されます。[26] [27]これは、2019年に再設計されたOfficeアプリで特に顕著です。Windows 11では、Mica素材の不透明度が異なるさまざまな表面を重ね合わせることで、奥行きの表現が拡張されています。
- レイヤー化:レイヤー化は、アプリを「キャンバス」であるベースと、その上に浮かぶコンテンツに分割します。コンテンツは、連続した表面またはカードとして表示できます。[28]
- エレベーション：エレベーションとは、影を使ってアプリの表面から要素を分離することです。例としては、コンテキストメニュー、ポップアップ、ツールチップなどがあります。[28]
モーション
モーションはUI要素間の関係を確立し、エクスペリエンスに連続性をもたらします。[29]
- アニメーションの追加/削除:コレクションにアイテムを挿入したり、コレクションからアイテムを削除したりするためのアニメーションを一覧表示します。[30]
- 連結アニメーション：連結アニメーションはアイテムの遷移です。コンテンツの変更中、要素がアプリ内を飛び回って継続しているように見えます。[31]
- コンテンツトランジション：ページ上のコンテンツの一部のみを変更する場合に使用します。[30]
- ドリル：ドリルはアプリのより深いところまでナビゲートするときに使われます。例えば、アイテムを選択した後にさらに情報を表示するなどです。[32]
- フェード：フェードインとフェードアウトにより、アイテムを視界に表示したり、視界から消したりします。[30]
- 視差：視差はオブジェクトを異なる速度で動かします。背景は上にあるコンテンツよりもゆっくりと動きます。例えば、リストは背景画像よりも速くスクロールし、動きに加えて奥行き効果を生み出します。[33]
- プレスフィードバック:項目が押されると、その項目は一時的に背景に消え、その後元の位置に戻ります。プレスフィードバックの例としては、スタートメニューのライブタイル、アクションセンターのクイックアクション、Microsoft Edgeの アドレスバーボタンなどがあります。[34]
材料
 | |
材料 アクリル 雲母 煙 Fluent Designで使用されるさまざまな素材 |
マテリアルはUXサーフェスに適用される視覚効果です。Fluent Designでは、遮蔽マテリアルと透明マテリアルの2種類のマテリアルが主に存在します。アクリルやマイカなどの遮蔽マテリアルは、インタラクティブなUI要素の下のベースレイヤーを形成します。煙のような透明マテリアルは、没入感のあるサーフェスを強調するために使用されます。[35]
- アクリル:アクリル素材は、わずかなノイズ効果を伴う半透明のぼやけた効果を生み出します。Windows 10 では、アクリルは大きな表面 (サイド パネルなど) に使用されていました。Windows 11 では、主要な表面でアクリルが使用されなくなり、代わりにマイカが使用されています。代わりに、アクリルはコンテキスト メニュー、ツールヒント、検索ボックスの予測などの一時的な表面に使用されます。
- マイカ:マイカは、Windows 11 で導入された新しい不透明素材で、ユーザーの壁紙の色合いを帯びます。[36]一時的な表面 (コンテキスト メニューなど) 用に設計されたアクリルとは異なり、MMC は長期間使用される主要な表面で使用するように設計されています。アプリは、異なる不透明度を使用することで、視覚的な階層を作成できます。
- スモーク：スモークはWindows 11で導入されました。メインウィンドウとポップアップの間に階層を作成するために、ライトモードまたはダークモードに関係なく、半透明の黒い背景になります。[35]
アプリが選択されていない場合、特定のウィンドウではアクリルとマイカの両方が無効になります。さらに、透明度が無効になっている場合、バッテリー節約モードが有効になっている場合、または低スペックのハードウェアを使用している場合は、両方ともシステム全体で無効になります。バックグラウンドアクリルは、ウィンドウの選択が解除されている場合、またはWindows 10 Mobile、HoloLens、またはタブレットモードの場合に無効になります。[37]
規模
アプリは、さまざまなフォームファクタ、ディスプレイサイズ、0Dから3Dまで対応しています。要素は画面サイズに適応し、複数の次元で利用できます。[38] [39]意識的なコントロールもスケール内に分類されます（例：スクロールバーや、さまざまな呼び出し方法に適応する入力）[40] [41]
図像学
アプリアイコン
アクリル素材を使用した新しいアイコンは、2018年にOfficeアプリ、2019年にChromiumベースのMicrosoft Edgeから始まり、Microsoftプログラム向けに作成されました。 [42] [43] [44]最終的なアイコンの予備バージョンは、「Office 365の新しいアイコンをご覧ください」ビデオで発見され、[45] Windows 10Xが発表されたときにさらに発見され、[46] 2019年12月12日に正式に発表されました。[47]これらのアイコンは、メールとカレンダーから始めて、 Microsoft Storeのアプリのアップデートを通じて表示され始めました。[48] [49]
Segoe Fluentアイコン
Segoe Fluent Iconsは、 Segoe UIフォント（Segoe UI Variable）の再設計と合わせて、Microsoftが自社の製品やサービスで使用するためにデザインしたアイコンのセットです。 [50]アイコンは、Windows 10時代に主流だった角張った直線的なSegoe MDL2アイコンとは異なり、丸みを帯びています。[51]
流暢な絵文字
2021年7月15日、マイクロソフトはFluent Designに合わせるために絵文字ライブラリを全面的に再設計すると発表しました。 [52]マイクロソフトはWindowsを可能な限り一貫性がありアクセスしやすいものにすることを目指して、2022年8月10日に1,500以上の絵文字をオープンソース化しました。 [53] [54]これらの新しいFluent絵文字は、Windows 10で使用されていた以前の絵文字ライブラリのフラットでアウトラインされたスタイルから離れ、代わりに3DのPlay-Doh感覚を採用しています。[52]さらに、マイクロソフトはそれらのほとんどをアニメーション化する計画を表明しています。[55] 3Dアニメーション絵文字はMicrosoft TeamsやSkypeなどのアプリで見ることができますが、Windows 11ではフラットなバリアントが使用されています。
実装
Fluentデザインガイドラインはクロスプラットフォームであり、さまざまなフレームワークで実装できます。[56] Fluent UI Reactは、MicrosoftのFluent Design Systemを実装するReactコンポーネントのセットです。Windows 、iOS、Android、macOS、Web用のアプリケーションを構築するために使用できる、事前に構築されたコンポーネントのセットを提供します。さらに、WinUIはWindowsアプリを構築するためのネイティブユーザーインターフェイスフレームワークです。Fluent Design System上に構築されており、事前に構築されたコントロールのセットを提供します。[57]
参照
参考文献
- ^ 「Fluent UI React」。NPM。2024年9月6日。 2024年9月9日閲覧。
- ^ 「Release Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml」。GitHub。2020年4 月 12 日。2024年 9 月 9 日に取得。
- ^ 「リリース 0.0.11: microsoft/develop · microsoft/fluentui-android からのプル リクエスト #44 をマージ」。GitHub。2021年2 月 12 日。2021年 3 月 16 日閲覧。
- ^ 「リリース バンピング バージョン アップデート (0.2.3) · microsoft/fluentui-apple」。GitHub。2021年3 月 9 日。2021年 3 月 16 日閲覧。
- ^ 「リリース Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft/microsoft-ui-xaml」。GitHub。2021-03-17。2021-03-18に取得。
- ^ “@fluentui/react-native - npm”. npm . 2021-03-15.
- ^ Microsoft 365 チーム (2020-03-12)。「UI Fabric が Fluent UI に進化 - Microsoft 365 開発者ブログ」。Microsoft 365 開発者ブログ。2021-03-16 に閲覧。
{{cite web}}: CS1 maint: 数値名: 著者リスト (リンク) - ^ Lewkowicz, Jakub (2020-03-16). 「Microsoft が UI Fabric を Fluent UI に変換 - SD Times」. ST Times . 2021-03-16閲覧。
- ^ Office Dev (2015-08-15)。「Office UI Fabric の紹介 - Office のアドインを設計するための鍵 - Microsoft 365 ブログ」。Microsoft 365 ブログ。2021年 3 月 16 日閲覧。
- ^ Tung, Liam (2020-03-16). 「Microsoft の Fluent デザインの大きな推進: Web 開発者は新しい Office UI Fabric を利用できるようになります」ZDNet 。2021-03-16閲覧。
- ^ ab 「Fluent Design は、Windows など向けの Microsoft の新しいモダン UI です」。The Verge。2017年 5 月 11 日。2017年 5 月 11 日閲覧。
- ^ ab 「Windows Developer on Twitter」。Twitter 。 2017年5月11日閲覧。
- ^ 「Fluent Design Language」。Microsoft 。 2017年5月12日閲覧。
- ^ 「新しい Windows のルック アンド フィール、Neon は正式に「Microsoft Fluent Design System」」。Ars Technica。2017年 5 月 11 日。2017年5 月 11 日閲覧。
- ^ 「Microsoft、Windows 10のFluent Designの変更点を披露」The Verge 。 2017年10月29日閲覧。
- ^ 「Microsoft の Fluent Design System は Windows の見栄えを良くする恐れがある」Ars Technica 。 2017 年 10 月 29 日閲覧。
- ^ 「Xbox One のメジャーアップデートでダッシュボードが Fluent Design で刷新」The Verge 2017 年 10 月 29 日閲覧。
- ^ 「Xbox One は本日、より高速なダッシュボードを含むメジャーアップデートを実施」The Verge . 2017 年 10 月 29 日閲覧。
- ^ 「デュアルスクリーン向けMicrosoftの新Windows 10Xオペレーティングシステム初見」The Verge 2020年2月11日。 2020年4月19日閲覧。
- ^ 「Panos Panay、Instagramで「チームはWindows 10で10億MADを達成したことを記念してこの動画を制作しました。皆さんと共有したいと思いました。今、このような状況です…」」Instagram 。2020年3月19日。 2021年12月25日時点のオリジナルよりアーカイブ。 2020年4月19日閲覧。
- ^ Parmar, Mayank (2022-02-13). 「Microsoft、Windows 11でWindows 7 Aeroのようなデザインを予告」. Windows Latest . 2023-04-05閲覧。
- ^ ab mijacobs. 「ハイライトの表示 - UWP アプリケーション | Microsoft Docs」。docs.microsoft.com 。 2017 年 12 月 22 日閲覧。
- ^ ブログ、Windows Developer (2017-08-04)。「ビジュアル レイヤーでのマテリアルとライトの作成」。Windows Developer ブログ。2023-04-04に取得。
- ^ cphilippona (2020-09-24). 「フォーカスの表示 - UWP アプリケーション | Microsoft Docs」. docs.microsoft.com . 2018-03-30に取得。
- ^ ab "質問: reveal を返すことは可能ですか? · Issue #4011 · microsoft/microsoft-ui-xaml". GitHub . 2021 年 7 月 15 日取得。
- ^ Bowden, Zac (2017-05-19). 「Microsoft が Fluent Design System で「Z 深度レイヤー」3D 機能を披露」. Windows Central . 2017 年 12 月 22 日閲覧。
- ^ Joyce, Kevin (2017-05-20). 「Microsoft、Windows 10 Mixed Reality デバイス向けの Z 深度レイヤーを発表」。VRFocus。2020年 8 月 13 日時点のオリジナルよりアーカイブ。2017年 12 月 22 日閲覧。
- ^ ab hickeys. 「Windows 11 でのレイヤーと昇格 - Windows アプリ」. learn.microsoft.com . 2023 年 4 月 4 日閲覧。
- ^ mijacobs (2020-09-24). 「UWP アプリのモーションとアニメーション - UWP アプリケーション | Microsoft Docs」。docs.microsoft.com 。 2017 年 12 月 22 日閲覧。
- ^ abc mijacobs (2020-09-24). 「UWP アプリのモーションとアニメーション - UWP アプリケーション | Microsoft Docs」。docs.microsoft.com 。 2018 年 3 月 30 日閲覧。
- ^ mijacobs (2020-09-24). 「接続されたアニメーション - UWP アプリケーション | Microsoft Docs」。docs.microsoft.com 。 2017 年 12 月 31 日閲覧。
- ^ davidvkimball (2020-09-24). 「WUP アプリでのページ遷移 - UWP アプリ」. docs.microsoft.com . 2019-11-27に取得。
- ^ mijacobs (2020-09-24). 「ParallaxView コントロールを使用してアプリに奥行きと動きを追加する方法 - UWP アプリケーション | Microsoft Docs」。docs.microsoft.com 。2017-12-22に取得。
- ^ mijacobs (2020-09-24). 「UWP アプリでのポインター クリック アニメーション - UWP アプリケーション | Microsoft Docs」。docs.microsoft.com。2017年12 月 31 日閲覧。
- ^ ab hickeys. 「Windows 11 アプリで使用されるマテリアル - Windows アプリ」. learn.microsoft.com . 2023 年 4 月 4 日閲覧。
- ^ 「Windows 11 アプリで使用されるマテリアル - Windows アプリ」。docs.microsoft.com。2021年 7 月 5 日閲覧。
- ^ mijacobs. 「アクリル マテリアル - UWP アプリケーション | Microsoft Docs」。docs.microsoft.com 。 2017 年 12 月 22 日閲覧。
- ^ 「Fluent Design System」。fluent.microsoft.com。2018年 3 月 1 日時点のオリジナルよりアーカイブ。2018 年 2 月 18 日閲覧。
- ^ Verma, Adarsh (2017-05-12). 「Fluent Design System とは何か? Microsoft はいかにして最も美しいオペレーティング システムを構築しているのか?」Fossbytes . 2018-02-18に閲覧。
- ^ muhsinking. 「スクロール ビューアー コントロール - UWP アプリケーション | Microsoft Docs」。docs.microsoft.com 。 2017 年 12 月 22 日閲覧。
- ^ 「Windows 10 向け Microsoft Fluent Design System 'wave one' の新機能」Windows Central 2017 年 6 月 29 日2017 年 12 月 22 日閲覧。
- ^ 「新しい仕事の世界を取り入れるためにOfficeアプリアイコンを再設計する」。Medium 。 2018年11月29日。 2020年4月19日閲覧。
- ^ 「Microsoft、Internet Explorerに似なくなった新しいEdgeブラウザのロゴを発表」The Verge 2019年11月2日2020年4月19日閲覧。
- ^ hickeys. 「Windows アプリアイコンのデザインガイドライン - Windows アプリ」. learn.microsoft.com . 2023 年 4 月 4 日閲覧。
- ^ 「Office 365 の新しいアイコンをご紹介します」。YouTube。2018年11 月 29 日。2020 年4 月 19 日閲覧。
- ^ “#MicrosoftEvent Live”. YouTube . 2019年10月2日. 2020年4月19日閲覧。
- ^ 「The Icon Kaleidoscope」. Medium . 2019年12月12日. 2020年4月19日閲覧。
- ^ 「Iconic Icons: Designing the World of Windows」. Medium . 2020年2月20日. 2020年4月19日閲覧。
- ^ 「Microsoft、Windows 10のカラフルな新アイコンを発表」The Verge 2020年2月20日2020年4月19日閲覧。
- ^ hickeys. 「Windows 11 のアイコン - Windows アプリ」. learn.microsoft.com . 2023 年 4 月 4 日閲覧。
- ^ hickeys. 「Segoe MDL2 Assets アイコン - Windows アプリ」. learn.microsoft.com . 2023 年 4 月 4 日閲覧。
- ^ ab 「Microsoft の新しい Fluent Emoji デザイン」。Emojipedia。2021年 7 月 15 日。2023年 4 月 4 日閲覧。
- ^ Carrasqueira, João (2022-08-10). 「Microsoft が Windows 11 の絵文字を誰でも使えるようにオープンソース化」XDA Developers . 2023-04-04閲覧。
- ^ Design、Microsoft (2022-08-10)。「オープン ソースでの設計」。Microsoft Design。2023年 4 月 4 日閲覧。
- ^ デザイン、Microsoft (2021-11-22)。「職場での感情」。Microsoft デザイン。2023-04-04閲覧。
- ^ 「ホーム - Fluent UI」。Microsoft 。 2023年4月5日閲覧。
- ^ Bridge, Karl. 「Windows UI ライブラリ (WinUI) 3 - Windows アプリ」。Microsoft。2023年4月 5 日閲覧。
- ^ 「Fluent UI React」。FluentUI 。2023年4月5日閲覧。
- ^ VitaRox. 「Fluent UI React v9: 新機能と相違点」Microsoft . 2023 年4 月 5 日閲覧。
- ^ 「fluentui/packages/web-components at master · microsoft/fluentui」。GitHub 。2023年4月5日閲覧。
- ^ brookdozer. 「Fluent UI Web コンポーネントの概要」。Microsoft。2023年4 月 5 日閲覧。
外部リンク
- 公式サイト
- 「UWP アプリの設計とコーディング」。Microsoft。
- Gusmorino, Paul; Ostojic, Bojana (2017 年 5 月 8 日)。「Fluent Design の紹介」。Channel 9。MSDN。