マテリアルデザイン()は、Googleが開発したデザイン言語Material Design is a design system created by Google. Material Design、および、それを実現する開発技術や手法、デザイン、試みなどの総称であるMaterial design, Introduction Google Material design。

概要 Googleは2014年6月にGoogle I/O conferenceにおいて、新しいユーザーエクスペリエンス設計体系として「マテリアルデザイン」を発表した。マテリアルデザインは、ユーザーが接する画面にマテリアル(物質)、メタファーの概念を用いて一貫性のある世界をつくりつつ、ユーザーの操作を補助するものである。

スマートフォンやタブレットなどの様々なデバイスにおいて、マテリアルデザインによる統一感のあるデザインを取り入れることにより、操作するデバイスが変わっても操作感に統一性を期待できることで、ユーザーはストレスを感じずに様々なデバイスを操作することができる。

この設計体系は、デザインを簡略化するフラットデザインに、他の物質の質感に近づけるために装飾を施すスキューモーフィズムを取り入れた「フラット2.0」の一例として取り上げられることがある - 日本語訳:。

Material Components マテリアルコンポーネント(Material Components、MDC)は、マテリアルデザインに従った(マテリアルデザインを実装する)UI要素ライブラリ群の総称であるMaterial Components are interactive building blocks for creating a user interface.Components。

開発者・デザイナーが各UI要素に対して1つ1つマテリアルデザインを適用しなくても、MDCを利用することで容易かつ系統的にマテリアルデザインを全UIへ適用できる。ネイティブ(スマートフォン)やウェブ、特定のデザインパッケージ用のライブラリが用意されている。 +表: Material Componentsライブラリプラットフォーム名前短縮名称補足pagerepositoryAndroidMaterial Components for AndroidMDC-AndroidiOSMaterial Components for iOSMDC-iOSWebMaterial Components for the webMDC WebWeb/WebComponentsMaterial Web ComponentsMDC Web + LitElementBuilt on top of the Material Components Web project and LitElement, Material Web Components GitHubdemoWeb/ReactMaterial Components for ReactMDC ReactWebMaterial Design LiteMDL開発中止、MDC Webへ移行FlutterMaterial Components for FlutterMDC-Flutter

脚注

関連項目 ユーザインタフェース ソフトウェア開発工程

外部リンク