マイクロソフトの開発者向けカンファレンス「Build 2017」では、新しいデザインシステム「Fluent Design System」が発表されました。
このデザインシステムは以前「Project Neon」というコードネームで呼ばれていましたが、今年の秋以降に登場する「Windows 10 Fall Creators Update」に搭載されると言われています。

かつては「Metro」と呼ばれるデザインを採用したMicrosoftですが、実際にこのデザインシステムはそれほど人気がありませんでした。
フラットデザインにも似た「Metro」スタイルに対して、Googleは個性的な「Material Design」(マテリアルデザイン)の普及に努め、今ではマテリアルデザインシステムは多くのデザインで活用されています。

しかしながら、Microsoftは今回、「Fluent」をデザイン言語やデザインスタイルではなく、デザインシステムと呼び、マテリアルデザインと同じ立ち位置に立とうとしています。
Fluentを発表することで、Microsoftは単なる「見た目」としてのデザインスタイルではなく、インタラクティビティも強調しようとしているようです。

今回は、Microsoftが提唱する「Fluent Design System」の概要をご紹介します。
Fluentは、これまでのMetroやマテリアルデザインとは何が違うのでしょうか。

Fluentは2次元を超えたデザイン手法

Fluentは単にスクリーンで表示される見た目の部分に関する枠組ではなく、革新的なUIを含めたユーザー体験全体を変える、新しい考え方のデザインシステムです。
つまり、デスクトップやスマートフォン、タブレットはもちろん、AR・VR・MRやウェアラブル、ゲームコンソールなどを含めた世界観を表現するものだと、Microsoftは考えています。

もちろん、MicrosoftはSurface StudioやHoloLensといった多くのデバイスをリリースしていますが、実際のところ、Microsoftは2Dでデザインすることを考えていないようです。
というのも、FluentはこれまでのMicrosoftのデザイン言語とは違って、ジェスチャーや音声、ペンなどを使ったインプット方法を取り入れているので、タイポグラフィや見せ方に重きを置いているMetroとは一線を画しています。

Fluentの5つの構成要素

fluent.gif

先ほども述べたように、Fluentはあらゆるデバイスを3D空間上でデザインすることを想定しており、かつユーザー体験そのものに重点を置いています。
そして、こうした「Fluentな世界」を構成するものが、「Light」「Depth」「Motion」「Material」「Scale」の5つです。

1. Light

light.gif

光によってユーザーはどのUIのどのインタラクションに集中すればいいのかが分かり、ユーザーを適切にガイドすることができるようになります。

2. Depth

depth.gif

Fluentでは、要素やオブジェクトのスタイルを合わせるような複数のレイヤーを使用します。

3. Motion

motion.gif

Fluentでは、単なる画面上の動きだけではなく、さまざまなデバイスを通して同時に動くような動きも想定しています。

4. Material

material.gif

操作の対象をしっかりと伝えるために、「物質的な」デザインを追求しています。

5. Scale

scale.gif

ARやVRといった比較的新しいデバイスで、2Dを超えた表現方法として紹介されています。