魚返 真哉魚返 真哉 / 2017年2月8日

マテリアルデザインとその歴史

マテリアルデザインとはあまり聞きなれない人が多いと思いますが、必ずと言っていいほど見たことがあるようなデザインです。文字通りマテリアル、素材の良さを強調した表現で比較的シンプルに仕上げられていますが、統一感のある高級なイメージを持たせることのできる外見です。

よく似ていると比べられるものにフラットデザインがありますが、フラットデザインの特徴としては、「立体感や質感がほぼない」、「文字やエフェクトが最小限に抑えられている」、「各文の内容が一目でわかる」、「グラデーションを使わない」、「シンプルなレイアウト」というふうな特徴があります。
文字だけでも伝わるように圧倒的にシンプルかつ、内容のわかりやすいものになっています。似ていると言われるのも当たり前で、歴史的にはフラットから始まりそこに影をつけたフラットの様だけれど少し違うデザインが生まれました。あとはその繰り返しで少し違う編集が加えられ、最後にとてもシンプルに控えめに、それでいて存在感のある浮き出るようなものになったのがマテリアルデザインです。
マテリアルデザインの特徴は、まずシンプルです。ですが、平面的なシンプルさではなく確かにそこにある存在感を醸し出しながら控えめなイメージです。これを提唱したのはあのGoogleで2014年7月に公開されました。コンセプトは「紙とインクで表現した統一感のあるもの」で、紙は背景のボタンに当たるものでインクは文字です。それだけでは無く、プラスアニメーションをシンプルに滑らかに加える事であたかもそこに紙があるかの様な形になります。
そこにあるように見せるためにはもう一つ、レスポンスを加えることでした。
ボタンを押した時に跳ね返ってくる感覚、紙を移動させた時の残像、これらの一つ一つの動きを自然にアニメーションで表すことによって完成しました。
新しくも馴染のあるマテリアルデザイン、私達のとても身近なところにたくさん使われています。豆知識を少し持っていてもいいかもしれません。

同じテーマの記事

永富 咲永富 咲 / 2024年3月8日

UIを一瞬で生成してくれる「Galileo AI」実際どこまでできる?

高田 和弥高田 和弥 / 2024年2月13日

Notionカレンダーが登場!その魅力とは?

本田 顕本田 顕 / 2024年1月31日

テキスト型SNSの選択肢

齋藤 公一齋藤 公一 / 2024年1月30日

ブログの原稿執筆に「Ulysses」をこんな風に活用しています!

お問い合わせ

BtoBサービスのデザイン・開発に関することならお気軽にご相談ください

一緒に働く仲間を募集しています

採用情報

デザイナー、エンジニア共に募集をしています。

パートナー募集

現在は主に開発領域に対して募集しています。