マテリアルデザイン

マテリアルデザイン

どうも中野です。
先日、マテリアルデザインについて詳しく調べることがあったので、マテリアルデザインとは何かを紹介したいと思います。

1.マテリアルデザインとは?

マテリアルデザインとは、2014年にGoogleが提唱したデザイン手法のことです。
スマホやタブレットの様なタッチデバイスの普及により、直感的に操作できるUIの必要性が高まってきたなかで生まれた概念です。

Googleがマテリアルデザインの公式ガイドを発表しています。

https://material.io/design/motion/understanding-motion.html#hierarchy

上記のサイトを読むだけで、マテリアルデザインとは何なのか、どうデザインしていけばいいのかがよくわかります。

2.マテリアルデザインの特徴

1.紙とインク

画面上に表示されるヘッダーやボタン、カード型のリストなどは「紙」と定義します。そして、紙の上に乗っている文字やアイコン、写真さらには動画といった要素は「インク」と定義します。

2.重なりと奥行き

マテリアルデザインでは、現実世界と似た環境を作りだすために、要素の重なりを物理的にとらえ、平面の中に明確な奥行きの概念を持たせた3D空間と、その場を照らす仮想の光が存在します。そのため、紙が重なりあう部分には「影」が生まれます。

3.自然で意味のあるモーション(動き)

表示されている画面でどのような操作ができるのか、自分が今行った操作はどのような影響なのかが直感的にわかるようにするため、多くのモーションが入れられます。
ただモーションを入れれば良いのではなく、意味のあるモーションをいれていくことが大切になります。