home/資料/デザイン検討/

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でも対応できるようになっていく必要がある

デザインを起こす上での具体的なガイド

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

サイズ

角丸

https://docs.microsoft.com/ja-jp/windows/apps/design/style/rounded-corner image.png

  • 基本的には 4px
  • 手前に来る要素に関しては 8px
    • モーダルやツールチップ等

アイコン

質感

image.png

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

表示フォーカス

https://docs.microsoft.com/ja-jp/windows/apps/design/style/reveal-focus

mosが考えたこと

  • 採用する上での問題点
    • CSSで表現しきれるか、
    • Webに向かない部分もある（向いている部分もある）
  • Webフレームワークはあるようなので、それをベースにGROWIの新デザインを構築する必要がある
MOS作業メモ
  • Fluent UI について調査しWikiに記述。mosが説明できるようになる
  • XDに色を登録する
  • GROWIの記事ページをFluent で再構成してみる