{"id":"material-design","no":503,"name":"Material Design","ja":"マテリアルデザイン","era":"2014–","family":"Google UI","kind":"スタイル","collection":"Dictionary expansion 25","addedAt":"2026-08-19","source":{"title":"Material Design — Google","url":"https://m3.material.io/"},"reference":{"status":"verified","pageUrl":"https://m3.material.io/","credit":"Material Design — Google","gallery":[{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Material%20Design.svg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Material%20Design.svg","credit":"Google《Material Design》のUIコンポーネント — Wikimedia Commons / Public domain"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Material%20Design%203.svg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Material%20Design%203.svg","credit":"Google《Material Design 3》のコンポーネント 2021 — Wikimedia Commons / CC BY 4.0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Material%20you%20light.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Material%20you%20light.png","credit":"Google《Material You》ライトテーマの画面 2021 — Wikimedia Commons / CC BY 4.0"}]},"essence":"紙とインクという物理の比喩を、影と重なりの規則へ落とし込んだ設計体系。要素に高さを与え、影で階層を示し、動きに物理的な因果を持たせる。以後のUI設計が「体系として配布される」ことの雛形になった。","cues":["高さで表す階層と影","紙のような面の重なり","因果を示すモーション","規格化された余白の単位"],"intents":["信頼","技術","遊び"],"works":["複数プラットフォームで一貫した挙動を配る","階層の深さを視覚的に伝える"],"recipe":{"type":"一つの書体族で階層を組み、太さと級数で差をつける","layout":"8の倍数の格子に要素を載せ、余白を規格化する","material":"面に高さを与え、影の濃さで前後を示す"},"avoid":"影を飾りとして足さない。高さの規則が破れた瞬間に階層の情報が嘘になる。","colors":["#e9e6dd","#67635d","#171615"],"motif":"graphic","pair":["material-you","flat-design"],"study":["2014年の初版仕様","高さと影の対応表","Material Youへの変化"],"en":{"essence":"A design system that reduces the physical metaphor of paper and ink to rules of shadow and overlap. Elements are given elevation, shadow states the hierarchy, and motion carries physical cause and effect. It became the model for UI design being distributed as a system.","cues":["Hierarchy and shadow expressed by elevation","Surfaces overlapping like sheets of paper","Motion that shows cause and effect","A standardized unit of spacing"],"works":["Distributing consistent behavior across several platforms","Communicating the depth of a hierarchy visually"],"recipe":{"type":"Build the hierarchy from one type family and separate levels by weight and size.","layout":"Place elements on a grid of multiples of 8 and standardize the spacing.","material":"Give surfaces elevation and show front and back by the density of the shadow."},"avoid":"Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie.","study":["The first specification of 2014","The table matching elevation to shadow","The change into Material You"]}}