2017/12/16モダンなWebアプリケーション開発に携わるようになって半年以上たっているのですが、ずっと気になっていることがありました。マテリアルデザインとフラットデザインは何が違うの?僕たちのチームにはデザイナーはおろか、デザインに詳しい人がいません。いつも雰囲気で今っぽい感じの装飾をしているのですが、最近お客さん側のお偉いさんから同じような質問を頂いてしまいました(笑)さすがに適当に答えるわけにもいかず「これはちゃんと回答しないとまずいぞ......」ということで、お仕事として顧客に回答する体で調べてみました。同じようになんとなくやってる新米ディレクターさんや、微妙な立ち位置のエンジニアさんの参考になれば幸いです。まとめマテリアルデザインとフラットデザインの違い僕なりに一言でまとめると以下の通りです。奥行きや立体感は表現されない。2012年頃から普及した。ガイドラインなどはない。奥行きや重なりを表現する。Googleが2014年にガイドラインを発表している。Designマテリアルデザインのいいところフラットデザインは世界的なアプリケーションが次々と採用したことにより、一気に広まりました。フラットデザインには次のような問題がありました。平面的すぎてボタンやインプットボックスが判別できないシンプルすぎて、各要素が何を意味しているのかわからない本末転倒ですよね(笑)そこで登場したのがマテリアルデザインです。基本理念は「紙とインク」マテリアルデザインは「現実世界の物理原則」を守ります。そのためユーザは直感的になにをすべきか、なにができるのか判断がつくのです。紙の上にはボタンやバーがあります。紙の上にあるので、ボタンやバーには影がつきます。紙は正方形や長方形がほとんどですよね。そのためマテリアルデザインでは紙は複雑な形にはなりません。インクは紙の上にしかありません。色を自由に変えることができます。このように、現実世界と同じように考えるのがマテリアルデザインです。詳しくはこちらの動画で説明してくれています。まとめマテリアルデザインとフラットデザインの違いは、質量があるかどうかです。考えてみると、スマートフォンの普及と共にここ5年くらいで目にすることが多くなったと思いますのでピンとくる方も多いのではないでしょうか。名著と名高い「達人に学ぶSQL徹底指南書」をようやく読んだ感想スギモト(@sugimotonote)です。今年で31歳になりました。新卒で独立系SIerに入社して気がつけば8年。ここ何年かは某大手メーカーに常駐して社内SEとしてレガシーな業務システムをモダン化しています。