
フラット、マテリアルの次?Microsoftが提唱する「Fluent Design System」とは?
マイクロソフトの開発者向けカンファレンス「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はあらゆるデバイスを3D空間上でデザインすることを想定しており、かつユーザー体験そのものに重点を置いています。
そして、こうした「Fluentな世界」を構成するものが、「Light」「Depth」「Motion」「Material」「Scale」の5つです。
1. Light
光によってユーザーはどのUIのどのインタラクションに集中すればいいのかが分かり、ユーザーを適切にガイドすることができるようになります。
2. Depth
Fluentでは、要素やオブジェクトのスタイルを合わせるような複数のレイヤーを使用します。
3. Motion
Fluentでは、単なる画面上の動きだけではなく、さまざまなデバイスを通して同時に動くような動きも想定しています。
4. Material
操作の対象をしっかりと伝えるために、「物質的な」デザインを追求しています。
5. Scale
ARやVRといった比較的新しいデバイスで、2Dを超えた表現方法として紹介されています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
ツール紹介記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング
- フォーム作成
- CRM(顧客管理)
その他のカテゴリ
