このページの本文へ

ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素

2017年10月18日 08時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System(フルーエントデザインシステム)」。コンセプトと実装へ反映する方法を解説します。

独自のデザイン言語やGoogleのMaterial Design(マテリアルデザイン)など既存の言語を実装して、統一のとれた堅牢なユーザーエクスペリエンスを提供しているリーディングカンパニーが増えてきました。デザイン言語を、直感的・魅力的で見栄えの一貫したアプリやWebサイトを作成できる「確立されたガイドライン」と考えてください。

最近マイクロソフト社は、Windows 10ベースのデバイスにおける広範な使用(つまりユニバーサルWindowsプラットホーム(UWP)アプリ対応)を目的としたFluent Design Systemを発表しました。既存の「Microsoft Design Language 2」(いわゆる「Metro」としていまも広く知られている)を拡張したものです。この記事の執筆時点でFluent Design Systemの80%はマイクロソフトの既存Webフレームワーク「Microsoft Web Framework(MWF)」に統合されています。

紹介するデザインコンセプト「Fluent Design System」がWebとアプリの双方に実装できることは注目に値します。Fluent Design Systemの主要な特性を順に挙げて使い方を説明し、この言語をWindows UWPにどう実装するか解説します。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く