マテリアルデザイン
マテリアルデザイン（英語: 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へ適用できる。ネイティブ（スマートフォン）やウェブ、特定のデザインパッケージ用のライブラリが用意されている。
| プラットフォーム | 名前 | 短縮名称 | 補足 | 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 |
脚注
- Material Design is a design system created by Google. Material Design
- Material design, Introduction Google Material design
- 福田ミホ (2014年7月8日). “マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー”. GIZMODO. 2019年11月10日閲覧。
- 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日アーカイブ分）
- Material Components are interactive building blocks for creating a user interface.Components
- “Components” (英語). Material Design. 2020年1月8日閲覧。
- Built on top of the Material Components Web project and LitElement, Material Web Components GitHub
関連項目
外部リンク
- Material Design - Google
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.