コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

マテリアルデザイン

出典: フリー百科事典『ウィキペディア(Wikipedia)』
ロゴタイプ
マテリアルデザインを実現するコンポーネントの例

マテリアルデザイン英語: 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

関連項目

[編集]

外部リンク

[編集]