マテリアルデザイン

ロゴタイプ

マテリアルデザインを実現するコンポーネントの例

マテリアルデザイン（英語: Material Design）は、Googleが提唱したデザインシステム（設計体系）の一種^[1]、および、それを実現する開発技術や手法、デザイン、試みなどの総称である^[2]。

概要

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

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

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

Material Components

マテリアルコンポーネント（Material Components、MDC）は、マテリアルデザインに従った（マテリアルデザインを実装する）UI要素ライブラリ群の総称である^[5][6]。

開発者・デザイナーが各UI要素に対して1つ1つマテリアルデザインを適用しなくても、MDCを利用することで容易かつ系統的にマテリアルデザインを全UIへ適用できる。ネイティブ（スマートフォン）やウェブ、特定のデザインパッケージ用のライブラリが用意されている。

表: Material Componentsライブラリ

プラットフォーム	名前	短縮名称	補足	page	repository
Android	Material Components for Android	MDC-Android		[1]	[2]
iOS	Material Components for iOS	MDC-iOS		[3]	[4]
Web	Material Components for the web	MDC Web		[5]	[6]
Web/WebComponents	Material Web Components		MDC Web + LitElement[7]	demo	[7]
Web/React	Material Components for React	MDC React
Web	Material Design Lite	MDL	開発中止、MDC Webへ移行	[8]	[9]
Flutter	Material Components for Flutter	MDC-Flutter		[10]	[11]

脚注

1. Material Design is a design system created by Google.　Material Design
2. Material design, Introduction Google Material design
3. 福田ミホ (2014年7月8日). “マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー”. GIZMODO. 2019年11月10日閲覧。
4. Kate Moran. “Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users” (英語). Nielsen Norman Group. 2019年11月10日閲覧。 - 日本語訳：フラットデザイン：起源、問題、フラット2.0のほうが望ましい理由 - ウェイバックマシン（2019年5月12日アーカイブ分）
5. Material Components are interactive building blocks for creating a user interface.Components
6. “Components” (英語). Material Design. 2020年1月8日閲覧。
7. Built on top of the Material Components Web project and LitElement, Material Web Components GitHub

関連項目

• ユーザインタフェース
• ソフトウェア開発工程

外部リンク

• Material Design - Google