マテリアルデザイン
Googleのデザインシステム
From Wikipedia, the free encyclopedia
マテリアルデザイン（英語: Material Design）は、Googleが開発したデザイン言語[1]、および、それを実現する開発技術や手法、デザイン、試みなどの総称である[2]。
2014年6月25日
- Web: material-components-web
- Android: material-components-android
- iOS: material-components-ios
- Flutter: material-components-flutter
言語 HTML, CSS, Sass (v4), JavaScript, AngularJS, Angular, Java, Objective-C, Swift, Dart
|
| |||||||||
 Android 12上のマテリアルデザイン3 | |||||||||
| 開発元 | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| 初版 |
2014年6月25日 | ||||||||
| |||||||||
| プログラミング 言語 | HTML, CSS, Sass (v4), JavaScript, AngularJS, Angular, Java, Objective-C, Swift, Dart | ||||||||
| 使用エンジン | Skia、Impeller | ||||||||
| 対応OS | Android、iOS | ||||||||
| プラットフォーム | Android, iOS, Web | ||||||||
| サポート状況 | 開発中 | ||||||||
| 種別 | Design language | ||||||||
| ライセンス |
| ||||||||
| 公式サイト |
www | ||||||||
概要
Googleは2014年6月にGoogle I/O conferenceにおいて、新しいユーザーエクスペリエンス設計体系として「マテリアルデザイン」を発表した。マテリアルデザインは、ユーザーが接する画面にマテリアル（物質）、メタファーの概念を用いて一貫性のある世界をつくりつつ、ユーザーの操作を補助するものである[3]。
スマートフォンやタブレットなどの様々なデバイスにおいて、マテリアルデザインによる統一感のあるデザインを取り入れることにより、操作するデバイスが変わっても操作感に統一性を期待できることで、ユーザーはストレスを感じずに様々なデバイスを操作することができる。
この設計体系は、デザインを簡略化するフラットデザインに、他の物質の質感に近づけるために装飾を施すスキューモーフィズムを取り入れた「フラット2.0」の一例として取り上げられることがある[4]。
Material Components
マテリアルコンポーネント（Material Components、MDC）は、マテリアルデザインに従った（マテリアルデザインを実装する）UI要素ライブラリ群の総称である[5][6]。
開発者・デザイナーが各UI要素に対して1つ1つマテリアルデザインを適用しなくても、MDCを利用することで容易かつ系統的にマテリアルデザインを全UIへ適用できる。ネイティブ（スマートフォン）やウェブ、特定のデザインパッケージ用のライブラリが用意されている。
| プラットフォーム | 名前 | 短縮名称 | 補足 | page | repository |
|---|---|---|---|---|---|
| Android | Material Components for Android | MDC-Android | |||
| iOS | Material Components for iOS | MDC-iOS | |||
| Web | Material Components for the web | MDC Web | |||
| Web/WebComponents | Material Web Components | MDC Web + LitElement[7] | demo | ||
| Web/React | Material Components for React | MDC React | |||
| Web | Material Design Lite | MDL | 開発中止、MDC Webへ移行 | ||
| Flutter | Material Components for Flutter | MDC-Flutter |
