フルーエント2
Fluent 2 / 2022– / スタイル / Microsoft UI
色・文字・間隔・角丸・奥行きをトークン化し、Solid、Acrylic、Mica、Smokeという素材を用途ごとに使い分けてMicrosoft製品を横断する。
ひと目で判断
見た目の特徴
- MicaとAcrylic
- 中立色の階層
- 柔らかな角丸
- トークン化された奥行き
向いている用途
- WindowsやMicrosoft 365に馴染む業務UIを複数チームで揃えるとき
- 複数製品で一貫するテーマと状態表現を、既存製品へ段階的に置き換えるとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 文字サイズと行間をトークンで定義し、画面側に直接の値を書かない
- 構成
- 間隔を一つの基準値の倍数に固定し、密度違いは別トークンで持つ
- 素材
- 窓の地にはMica、Acrylicは一時的に現れる面へ限って使う
- 注意
- ぼかしや影を面の役割とウィンドウ状態、ライト、ダーク、高コントラストに対応させる。画面ごとに一点物の色や余白を足すと、統一のための仕組みが維持対象を増やすだけになる。
- 関連研究
- Fluent 2 / Acrylic / Mica / design tokens
関連項目
- グラスモーフィズム（Glassmorphism）共通する印象：静けさ。フルーエント2とグラスモーフィズムの違いを見る
- マテリアルデザイン（Material Design）共通する印象：信頼 / 技術。フルーエント2とマテリアルデザインの違いを見る
Microsoft UIをさらに見る
同じ「Microsoft UI」から、共通する印象が多い順に次の項目を選んだ。
- メトロ（Metro）共通する印象：技術 / 信頼。
- Windows 95 インターフェース（Windows 95 Interface）共通する印象：信頼 / 技術。
- リボン（Ribbon）共通する印象：信頼 / 技術。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/fluent-design
- Markdown
- [フルーエント2（Fluent 2） — デザインスタイル辞典](https://indexstyle.org/ja/styles/fluent-design)
- HTML
- <a href="https://indexstyle.org/ja/styles/fluent-design">フルーエント2（Fluent 2） — デザインスタイル辞典</a>