1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="Cb0cCEShWe"><a href="https://uxdaystokyo.com/articles/glossary/fluent-design-system/">フルーエントデザインシステム</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/glossary/fluent-design-system/embed/#?secret=Cb0cCEShWe" width="600" height="338" title="“フルーエントデザインシステム” — UX TIMES" data-secret="Cb0cCEShWe" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2017/05/fluent-design-system-eye-catching.jpg400400Fluent Design Systemとは、Microsoftが開発したデザインシステムです。 Fluentというのは「雄弁な」という意味であり、携帯電話、タブレット、PC、HoloLensなど多様なデバイスを、雄弁に解釈するかのようにつなぎ、統一的にデザインを構築することがねらいです。 https://www.youtube.com/watch?v=vcBGj4R7Fo0 Microsoftによる紹介サイト http://fluent.microsoft.com https://developer.microsoft.com/en-us/windows/apps/design なぜ新しいデザインシステムがうまれたか？ 新しいデザインシステムがうまれた背景としては、以下のような理由が考えられます。 (1) 従来のWindowsのデザインシステムの反省 従来のWindowsのデザインシステムとして、Windows 8やWindows Phoneで採用されたModan UI (Metro UI)がありました。 フラットデザインの先がけであり、当時としては斬新で画期的でしたが、「どこが押せるのか分からない」「階層関係が分かりづらい」「異なるデバイスで一貫性を保てない」「アニメーションの統一感」…など様々な問題もありました。 (2) 異なるデザインシステムの連続性 フラットデザインを改善するかのように、後続のGoogleによるMaterial Designがうまれ、「紙」と「インク」のメタファーを使ってそれらを上手く改善し、普及していきました。 しかし、ユーザは様々なデバイスと共に暮らし、Windows OSでは「Modern UI」、Googleのウェブサービス上では「Google Material Design」、iPhoneでは「Apple Design System」を使うともなれば混乱し、 ユーザはおのおののデザインシステムを解釈しながら、操作する必要がありました。また、アプリ開発者はマルチプラットフォーム対応する際に、それぞれのデザインシステムに解釈しなおして設計する必要がありました。 (3) 異なる次元のデバイスの誕生 ここ数年で情報環境は大きく変化し、PCと携帯だけでなく、時計や眼鏡のようなデバイスから、AR/VRといった新しい情報表現も主流になりました。 ともすれば、様々な画面のサイズへの対応といった２次元インタフェースの対応だけでなく、実環境に重ね合わせて表示されるHoloGlassのような３次元インタフェースも対応も求められるようになりました。さらには、スマートスピーカーのような0次元インタフェースもあり、従来のデザインシステムだけでは対応できなくなりました。 Fluent Design Systemの主な特徴 スタイリングの特徴としては、従来のフラットデザインを踏襲しつつも、奥行きがあったり、透明感のあるアクリル(Acrylic)表現が使われている点が異なります。 Fluent design systemを表す特徴として、5つの原則「Light(光),Depth(奥行),Motion(動き),Material(素材),Scale(次元)」があります。  (1) Light (光) 光は注意を引いたり、ナビゲーションする要素として用いられています。 光のメタファを使うことによって、3D空間では従来のマウスカーソルに変わる表現として使われています。 画面のないデバイスについても、注意を引く要素として用いられるでしょう。 Reveal 光によってマウスカーソルなどの空間認知を助ける。 (2) Depth (奥行) フラットデザインの弱点であった階層関係を奥行きによって補っています。 影であったり、アクリルの透明表現などによって奥行きを示します。 特に、アクリル表現はこのデザインシステムの特徴でもあります。 Acrylic 要素が半透明であり、階層関係が分かりやすい。 Parallax 視差効果によって奥行きを知らせる。 (3) Motion (動き) 動きは、項目間の関係を示したり、自然で楽しい表現として用いられています。 動きは静止画で表現することが難しいため、細かいタイミングやアニメーションのスピードなど今後整備されていくのではと思います。 connected animation 共通の項目をアニメーションさせて、項目間の関係を明瞭にしている。 (4) Material (素材) コンテンツを引き立てる要素として、素材が用いられます。 素材の表面や、曲がる、伸びる、跳ねるなどの物理現象をシミュレーションし 素材によるアフォーダンス(触りたくなるような)を醸成します。 Acrylic: https://docs.microsoft.com/ja-jp/windows/uwp/style/acrylic 表面がざらざらしており、物理的な表面をエミュレーションしている。 Reveal: https://docs.microsoft.com/ja-jp/windows/uwp/style/reveal 細かい光の反射をエミュレーションしている。 (5) Scale (スケール) ２次元デザイン(GUI)だけでなく、0次元から3次元まで様々な新しいデバイスへの対応を考えます。ここで、0次元とは音声インタフェースのような画面のないもの、3次元とはHoloLensまたは、タンジブルインタフェースについて示しています。 他のデザインシステムとの違い Fluent Design Systemが他のデザインシステムと異なるのは以下のようなところです。  (1) Scaleという概念 GUIだけでなく、0次元から3次元まで様々な新しいデバイスへの対応を考えている点は、他にないポイントでしょう。 これから、音声インタフェースやAR/VRの盛り上がりに先がけてデザインシステムを構築してきたのではと思います。  (2) 他のデザインシステムをも包含するデザインシステム ひとりで複数台のモバイル端末を所有する時代になり、それらの連続性も考える必要がでてきました。 その中で、Fluent Design Systemの5つの原則の中に、Materialがあったり、MacやiOSなどを彷彿させるAcrylicのスタイリングが用いられているなど、他のデザインシステムとの関係も考慮されているような印象があります。  (3) 対話的なデザインシステム Fluent Design Systemの説明の中で、「Co-Creation」という言葉がありますが、これからデザインシステムをみんなで育てていきましょうという意図が感じられます。 このあたりは、特にAppleによるものと異なったりするかもしれません。 デザインテンプレート illustrator, Photoshop, XD, Sketch などのデザインテンプレートがこちらで公開されています。 https://medium.com/microsoft-design/rapid-prototyping-uwp-apps-88ad238f7ef6 https://docs.microsoft.com/ja-jp/windows/uwp/design-downloads/index