マテリアルデザインとマテリアルデザインライトのお話

「マテリアルデザインライト」という言葉を最近色んな記事を見ている中で目にしました。

そもそも「マテリアルデザイン」だけでも、

なんとなくこういうものだ！というのはわかるものの、

きちんと説明できるレベルでなかったので、これを機にお勉強しました。

マテリアルデザインとマテリアルデザインライトってなに？

まとめていきます。

マテリアルデザインとは

マテリアルデザインとは、現実世界の物質が持つ性質をデザインに取り入れたものです。

これはもともとどのようなデバイスでも直感的に理解できるような

デザインを作成する必要があるということで、

現実世界のルールをデザインにも反映させよう！といった流れで誕生したようです。

フラットデザインのようなシンプルさを持ちながら、

現実世界にあるものを用いてわかりやすさを追求したものを、

マテリアルデザインと言います。

現実世界を表現するためには、3次元で表現する必要があります。

3次元をデザイン上で表現するために光と影をうまく利用しています。

現実世界を表現するためのルールはたくさんあって、

それを全て守ってデザインをするのは難しいので、

テンプレやフレームワークを用いて作成することが多いようです。

マテリアルデザインライトとは？

マテリアルデザインライトとは、マテリアルデザインの概念を引き継ぎ、

あらゆるデバイスで最適化されたものと言われています。

いうなれば、マテリアルデザインの進化版のようなもので、

特に目的などは変わっていません。一貫して使いやすさを目的にしています。

マテリアルデザインライトにもテンプレやガイドラインがあるので、

それを用いて作成できるようです。

マテリアルデザインよりもコンポーネントが沢山あるようなので、

部分的に活用することもできるみたい！

まとめ・感想

調べていくうちに、マテリアルデザインとマテリアルデザインライトは

概念は同じで、ユーザーの使いやすさ、わかりやすさを追求したものだということがわかりました。

大きな違いは残念ながら見つけることはできなかったのですが、

どうやらテンプレートやガイドラインがバージョンアップしていて

さらに使い勝手がよくなったものらしい。

普段デザインをしていてテンプレなどは使ったことがないので、

今度使ってみようかな・・？

今までそういったことがあったのか他のデザイナーにも聞いてみます。

テンプレなどを使わなくても、現実世界の表現を参考にすることは多く、

影の付け方とかはかなり意識しています。

「実際ものを重ねた時、影はどう映るかな？」

と実際ものを重ねて観察してデザインに反映させることもあります。

ユーザーが違和感を感じることがないように、

ユーザーが理解しやすく、使いやすくするためにできることは、

積極に取り入れていきたいものです。

デザインのトレンドの変化を調べていくと、

時代の変化にデザインも追いつこうと必死なんだなあ・・ということがわかります。

いろんなデバイスでいつでもどこでもサイトを見られる時代だからこそ、

ルールを統一してデザインをわかりやすくする必要がある。

世の中から見にくいサイトが消えていくのも時間の問題だろうな。

と思いました。

ユーザーありきのデザインって大変だ！