Material Designのこれまでとこれから(2024)

## Android 創生期
Android の出始めは Material Design はもちろん、ベースとなるデザインが本当に何もない時代でした。
今ほどアプリのデザインにおいてベストプラクティスのようなものもない時代だったので手探りしながらそれぞれのアプリがそれぞれデザインしていました。


## Holo Theme
Holo Theme 自体は Android 3.0 と同時に登場しました。
そして Android 4.0 のタイミングでこの Holo Theme がさらに改善されて、活用する動きがありました。

![Screenshot_2011-11-17-22-19-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/b8971f90-61f7-237c-9285-390f67c8e5cc.png)

Android 3.x 以前では端末メーカーごとにシステムのテーマが異なっていたため、システムのテーマを使用するとアプリが実行される端末ごとにデザインが異なっていました。
Holo Theme は端末メーカーによるカスタマイズが許されておらず、端末メーカーが提供するテーマをアプリに適用するのではなくて、アプリごとにテーマを固定で適用させるといった意味もありました。

https://android-developers.googleblog.com/2012/01/holo-everywhere.html



## [Material Design 1](https://m1.material.io/)
そして Android 5.0 と同時に Material Design が登場します。
Material Design の登場には、スマホやタブレットだけではない、アプリだけでなくさまざまなプラットフォームでユーザの一貫した体験を提供しよう、という背景がありました。そのためにさまざまなスクリーンサイズで動くように、Adaptive Layout のコンセプトが Material Design 1 の時点から含まれていました。
また、Material Design は単純なデザインシステムではなく、ブランドやアイデンティティを表現できるデザインシステムとして作られています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg?si=VOiMvmaRplFpNqsE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


Material Design ではメタファーとして「紙」と「インク」が使われています。これは一貫性のあるデザインを作るためで、現実世界にあるものの物理的性質や動きを画面の中で再現しています。

https://gizmodo.com/googles-design-mastermind-explains-the-future-of-androi-1596880308

<iframe width="560" height="315" src="https://www.youtube.com/embed/Tk_O_NdqS9M?si=meFgm8rFf8I-bmoD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

この先、Android のエコシステムはこの Material Design を基盤に構築されるようになります。



## [Material Design 2](https://m2.material.io/)
Material Design 1 ですが、これを利用するとアプリが Google のデザインぽくなる、という課題が新たに出てきました。それを改善したものが Material Design 2 です。
ブランドのデザインをもっと反映できるようにしようということで、Material Theming や新たなコンポーネントが追加されます。
また Material Theming によるデザインのトークン化により、Dark Theme もこのタイミングで Material Design の中へ組み込まれることになります。


https://m3.material.io/blog/google-material-custom-theme

<iframe width="560" height="315" src="https://www.youtube.com/embed/3VUMl_l-_fI?si=_uRMj_xF4_XEOqwg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## [Material Design 3](https://m3.material.io/)
Material Design 1 から 2 への更新は順当にわかりやすく改良されていましたが、Material Design 3 はこれまでとは少し異なるものとなります。
それが Material You と呼ばれる、個々のユーザが自分らしくカスタマイズできたりパーソナライズするといった、コンセプトになります。


<iframe width="560" height="315" src="https://www.youtube.com/embed/rLKtIGY2Mgc?si=wHEHW6ftwR08UMxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

これまでのブランドを表現するためのデザインシステムからユーザに合わせて変化するデザインシステムにターゲットが変わっているように見えますが、Material Design 1 の頃から慣用性のようなユーザの体験を改善するのが目的ではあったので、これまで以上にデザインシステム全体でユーザに対して重きが置かれた形になっています。
Material You の一環で Dynamic Color と呼ばれる壁紙からアプリの色を抽出しアプリの色を統一することで手元の端末を自分らしくする機能も追加されています。
また、このタイミングでメタファーが「紙」と「インク」ではなくなっており、感情であったりユーザのさまざまなものを表現できるように Material の対象が変わっています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/vnDhq8W98O4?si=Ci2kvc1PRoAa01mz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Material Design 3 の Color Theming は色を自動生成が前提となっており、色のコントラストが保証されるようになっているため、アクセシビリティに関しても重要視されています。


## [Android XR](https://www.android.com/xr/) の登場

2024 年の終わりに Android にも空間コンピューティングがやってきました。
Material Design 3 を拡張し、Android XR 向けに既存コンポーネントを変更するといった形になっています。
Material Design 自体がマルチデバイスで動かすものであるために、XR においても Material Design が使われるのは自然な流れですね。

https://m3.material.io/blog/material-design-xr-dev-preview

Android XR で動かす Android アプリは Material Design 3 であれば Spatializing(空間化) される仕組みも用意されています。

![unnamed (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/3700c6ee-1765-0fed-680f-0ac29f131731.gif)


* * *

Material Design は常に進化し続けるデザインシステムになっており、空間コンピューティングの登場でフラットなスクリーンから空間へと移り変わろうとしているため、今後も更に進化していきそうですね。