Fluent UI に関する調査

参考リンク集

Fluent Design System とは

Microsoft発のデザインシステム。 Windows10の時点で提唱され　、Windows 11で大幅にアップデートされた。

Windows8まで使われていた従来のMetro UI では以下の問題点があった
- 「どこが押せるのか分からない」
- 「階層関係が分かりづらい」
- 「異なるデバイスで一貫性を保てない」
- 「アニメーションの統一感」
巷のデザインシステムがごちゃついていた(原文ママ)
フラットデザインを改善するかのように、後続のGoogleによるMaterial Designがうまれ、「紙」と「インク」のメタファーを使ってそれらを上手く改善し、普及していきました。しかし、ユーザは様々なデバイスと共に暮らし、Windows OSでは「Modern UI」、Googleのウェブサービス上では「Google Material Design」、iPhoneでは「Apple Design System」を使うともなれば混乱し、ユーザはおのおののデザインシステムを解釈しながら、操作する必要がありました。また、アプリ開発者はマルチプラットフォーム対応する際に、それぞれのデザインシステムに解釈しなおして設計する必要がありました。
異なる次元のデバイスの台頭
- 今までは2次元のディスプレイで表示できればよかったが、これからはXRの時代
- デザインシステムがVRやARでも対応できるようになっていく必要がある

（別ページに分割するかも）

半透明でブラーのかかる板を使うことがある
- しかしAppleとは違うポイント
  - Appleは色なしに対して、白・黒または色付きのパターンも有る
  - ザラザラの質感が加わっている（アクリル板のイメージ）

ここから探してあるものを使う
- 探しやすいし、種類も豊富
- https://uifabricicons.azurewebsites.net/ external_link
ただし従来どおり基本的にはoutline系を使う
新たにアイコンを自作する場合は以下のガイドラインに準拠する
- Windows 10 アイコンの作成ガイドライン external_link

https://uifabricicons.azurewebsites.net/ external_link から探す
- 探したら右クリック → Copy Friendly Name
https://developer.microsoft.com/en-us/fluentui#/styles/web/icons external_link
- SVG icons のタブをクリック
- ブラウザ文字列検索
- さっきコピーした文字列を検索
開発者ツールでSVGコードをコピー
XDにペースト

ここの"Segoe UI と Fabric MDL2 アイコンフォント"からフォントファイルをDL
- https://docs.microsoft.com/ja-jp/office/dev/add-ins/design/design-toolkits external_link
(macの場合)Fonf Book からアイコンをコピーペースト

※コストの低い順