マテリアルデザイン

出典: フリー百科事典『ウィキペディア(Wikipedia)』
ナビゲーションに移動 検索に移動
マテリアルデザインを実現するコンポーネントの例

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

概要[編集]

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

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

Material Components[編集]

マテリアルコンポーネント(Material Components, MDC)は、マテリアルデザインに従った(マテリアルデザインを実装する)UI要素ライブラリ群の総称である[4][1]

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

表: Material Componentsライブラリ
platform name short name notes page repository
Android Material Components for Android MDC-Android [2] [3]
iOS Material Components for iOS MDC-iOS [4] [5]
Web Material Components for the web MDC Web [6] [7]
Web/WebComponents Material Web Components MDC Web + LitElement[5] demo [8]
Web/React Material Components for React MDC React
Web Material Design Lite MDL discontinued, moved to MDC Web [9] [10]
Flutter Material Components for Flutter MDC-Flutter [11] [12]

脚注・参考文献[編集]

  1. ^ Material Design is a design system created by Google. Material Design
  2. ^ Material design, Introduction Google Material design
  3. ^ マテリアル・デザインって何? Androidデザイン責任者にインタヴュー GIZMODO 2014年7月8日
  4. ^ Material Components are interactive building blocks for creating a user interface. Components
  5. ^ Built on top of the Material Components Web project and LitElement, Material Web Components GitHub

関連項目[編集]

外部リンク[編集]