モダンなWebアプリケーション開発に携わるようになって半年以上たっているのですが、ずっと気になっていることがありました。
マテリアルデザインとフラットデザインは何が違うの？
僕たちのチームにはデザイナーはおろか、デザインに詳しい人がいません。
いつも雰囲気で今っぽい感じの装飾をしているのですが、最近お客さん側のお偉いさんから同じような質問を頂いてしまいました（笑）
さすがに適当に答えるわけにもいかず「これはちゃんと回答しないとまずいぞ……」ということで、お仕事として顧客に回答する体で調べてみました。
同じようになんとなくやってる新米ディレクターさんや、微妙な立ち位置のエンジニアさんの参考になれば幸いです。
マテリアルデザインとフラットデザインの違い
僕なりに一言でまとめると以下の通りです。
| フラットデザイン | 装飾を抑えたシンプルなデザイン |
| マテリアルデザイン | フラットデザインに質量を追加したデザイン |
フラットデザインの特徴
平面的
奥行きや立体感は表現されない。
2012年頃から普及した。
特にガイドラインなどはない。
マテリアルデザインの特徴
立体的
奥行きや重なりを表現する。
現在の主流。
Googleが2014年にガイドラインを発表している。
マテリアルデザインのいいところ
フラットデザインは世界的なアプリケーションが次々と採用したことにより、一気に広まりました。
ただ、フラットデザインには次のような問題がありました。
- 平面的すぎてボタンやインプットボックスが判別できない
- シンプルすぎて、各要素が何を意味しているのかわからない
本末転倒ですよね（笑）
そこで登場したのがマテリアルデザインです。
基本理念は「紙とインク」
マテリアルデザインは「現実世界の物理原則」を守ります。
そのためユーザは直感的になにをすべきか、なにができるのか判断がつくのです。
紙の上にはボタンやバーがあります。
紙の上にあるので、ボタンやバーには影がつきます。
また、紙は正方形や長方形がほとんどですよね。そのためマテリアルデザインでは紙は複雑な形にはなりません。三角錐とか。
インクは紙の上にしかありません。
また、色を自由に変えることができます。
このように、現実世界と同じように考えるのがマテリアルデザインです。
詳しくはこちらの動画で説明してくれています。
まとめ
マテリアルデザインとフラットデザインの違いは、質量があるかどうかです。
よくよく考えてみると、スマートフォンの普及と共にここ5年くらいで目にすることが多くなったと思いますのでピンとくる方も多いのではないでしょうか。
このブログは白を基調としたシンプルなデザインにしていますが、どこかのタイミングでGoogleのガイドラインに従って、マテリアルデザインに変更してみようと計画しています！
