マテリアルデザイン
Material Design / 2014– / スタイル / Google UI
紙とインクという物理の比喩を、影と重なりの規則へ落とし込んだ設計体系。要素に高さを与え、影で階層を示し、動きに物理的な因果を持たせる。以後のUI設計が「体系として配布される」ことの雛形になった。2021年の改訂では、端末の壁紙から色体系を導いて利用者ごとに配色が変わる仕組みが加わった。
ひと目で判断
見た目の特徴
- 高さで表す階層と影
- 紙のような面の重なり
- 因果を示すモーション
- 規格化された余白の単位
向いている用途
- 複数プラットフォームで一貫した挙動を配る
- 階層の深さを視覚的に伝える
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 一つの書体族で階層を組み、太さと級数で差をつける
- 構成
- 8の倍数の格子に要素を載せ、余白を規格化する
- 素材
- 面に高さを与え、影の濃さで前後を示す
- 注意
- 影を飾りとして足さない。高さの規則が破れた瞬間に階層の情報が嘘になる。
- 関連研究
- 2014年の初版仕様 / 高さと影の対応表 / Material Youへの変化
関連項目
- ホロ（Holo）同じ「Google UI」の系統。マテリアルデザインとホロの違いを見る
- フラットデザイン / ベクターミニマリズム（Flat Design / Vector Minimalism）共通する印象：信頼 / 遊び。マテリアルデザインとフラットデザイン / ベクターミニマリズムの違いを見る
取り違えられやすい
Google UIをさらに見る
同じ「Google UI」から、共通する印象が多い順に次の項目を選んだ。
- Material You（Material You）共通する印象：遊び / 技術。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/material-design
- Markdown
- [マテリアルデザイン（Material Design） — デザインスタイル辞典](https://indexstyle.org/ja/styles/material-design)
- HTML
- <a href="https://indexstyle.org/ja/styles/material-design">マテリアルデザイン（Material Design） — デザインスタイル辞典</a>