マイクロソフトの開発者向けカンファレンス「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を超えた表現方法として紹介されています。

まずはUWPで体感

しかし、こうしたFluentのデザインシステムはまだ発表されたばかりであり、今年の秋以降に登場する「Windows 10 Fall Creators Update」に搭載されると言われています。
Googleの各種サービスが徐々にマテリアルデザインを適用させていったように、Windowsのシェル(本体)、アプリ、サービスなども徐々にFluentに移行されるようです。

実際にはFluentとは似て非なるものだとされていますが、UWP(the Universal Windows Platform)と呼ばれるデザインシステムがすでに公開されています。
デスクトップやスマートフォンはもちろん、Xbox OneやHoloLensといったさまざまなデバイスに適用することができるデザインツールキットで、Fluentの土台ともなりそうです。

それでは、UWPの主な要素についても見ていきましょう。

1. Acrylic Material (アクリル・マテリアル)

acrylic_lighttheme_base.png
Source: Microsoft

その名の通り「アクリル板」のようなUIが、この*「Acrylic Material」(アクリル・マテリアル)*です。
背景の光を通すような半透明のレイヤーは、Fluentの言うところの「Light」や「Depth」、「Material」とも結びつくでしょう。

acrylic_app-pattern_double-vertical.png
Source: Microsoft

Acrylic MaterialはApp内のナビゲーションやポップアップウィンドウ、通知などに使用することが推奨されており、2重にナビゲーションを置くときには、「80％」「60％」と透明度を変えて設置することがガイドラインに記載されています。

2. Connected Animation (連続アニメーション)

connected.gif
Source: Microsoft

*「Connected Animation」(連続アニメーション)*は2つの異なるビューを切り替える時に使うトランジション効果です。
いわゆるマイクロインタラクションの一種ですが、ビューの切り替えに連続してアニメーションを加えていくことで、ビューがひと続きでスムーズに見えます。

coordinated.gif
Source: Microsoft

その中でも、「Coordinated Animation」と呼ばれるものは、「Connected Animation」のターゲットとなる要素をそのまま別の場所に動かすようなトランジション効果を加えます。

3. Reveal (リビール)

reveal.gif
Source: Microsoft

*「Reveal」(リビール)*は選択したコンテンツをマウスホバーしたり選択することで見せるUIの挙動について説明します。
通常UWPのUIではまわりの線が隠されていますが、ホバーすることによってRevealが働き、インタラクションのフィードバックを与えます。

Revealには「Hover Reveal」(ホバー・リビール)とBorder Reveal(ボーダー・リビール)という2つの要素があり、前者は直接ホバーした要素に適用され、後者はホバーアイテムとその周りの要素にも適用されます。

まとめ

AppleもGoogleも独自のデザインシステムを持っていますが、実際のところこうした企業のデザインシステムも試行錯誤の末現在に至ります。
それゆえに、Microsoftがこの秋Windowsに持ち込むFluentが大きく広がっていくのか、あるいはMetroのように広がらずに終わってしまうのか、多くの関係者が注目しています。

デザイナーやWeb関係者なら、この秋に備えてFluentなデザインについて勉強したり、デザインを考えてみるのはいかがでしょうか。