Googleからマテリアルデザインのマニュアルが公開されました。
https://material.google.com/jp/

マテリアルデザインとは
マテリアルデザインは、2014年6月にGoogleが「Google Material Design」として発表したデザインガイドラインです。ユーザーにとってわかりやすいデザインを提供することを目標とし、スマートフォンやタブレット、テレビ、眼鏡、腕時計……に至るまで、様々なデバイスで統一されたマテリアルデザインを取り入れています。これにより、操作性も統一され、デバイスが変わっても使いやすいUI・UXを実現できると言われています。

0002.jpeg
マテリアルデザインでは、オブジェクト同士の階層構造が重要な意味を持ち、縦のx軸・横のy軸だけでなく、高さのz軸を持っているのが特徴です。

0000.jpeg

高さを表現するために、影を用いることで、そこにあたかも物体が存在しているかのようにデザインを表現しています。

また、物理法則を適用している点、直感的な操作性を実現するためのルール作りが徹底されている点が特徴的です。人間が慣れ親しんでいる直感的な動きを採用することで、その動作でどんなアクションが起こるのか想像しやすくなることが目的です。


また、Googleがマテリアルデザインを動画で説明してくれています。音声は英語ですが、日本語字幕が付いているので親切です。

上記をまとめると以下の概念にまとめることが出来ます。

マテリアルデザインの概念

マテリアルデザインは紙とインクの比喩(メタファー)である
マテリアルデザインはオブジェクトの重なりをZ軸と影を用いることで表現している
マテリアルデザインは人の触覚の特徴を使用している


ではそれぞれもう少し深掘りして見ていきましょう。

マテリアルデザインは紙とインクの比喩(メタファー)である
「マテリアルデザインは紙とインクの比喩(メタファー)である」というのはどういう意味なのでしょうか。簡単に前述しましたがもう少し深く見ていきましょう。

「紙」なので、オブジェクト同士がすり抜けたりすることは無く、スライドなどを用いてオブジェクト同士が入れ替わることで位置が変わります。そして、紙の上に表現されるコンテンツやオブジェクトは全て「インク」によるものと認識されます。
画面をタッチしたときに、色が変わるコンテンツなどは「インク」で表現されますが、動きは液状化されて表現されます。波紋がゆっくり大きくなるのはこのインクの動きを表現しているためです。

マテリアルデザインはオブジェクトの重なりをZ軸と影を用いることで表現している
0001.jpeg
マテリアルデザインは紙のオブジェクトが厚みを持っているのが特徴です。
厚みを持っているのでオブジェクト同士が重なった際に、影が表現されます。上記画像では左が正しく、右は正しくないということになります。

マテリアルデザインは人の触覚の特徴を使用している
マテリアルデザインは、人はアクションを起こしたときに想像する反応をそのまま表現でも活かします。

フラットデザインとの違い
フラットデザインとは、装飾性を出来るだけ抑えたシンプルなデザインのことを指します。装飾などが過剰に施されたデザインに溢れた時代において、フラットデザインのようなシンプルなデザインは急速に受け入れられました。しかし、シンプルなだけに色々なデメリットもありました。例えば

平面的なので何がボタンなのかわかりづらい
色が多すぎて重要なコンテンツがわかりづらい


などのデメリットも存在していました。コンテンツを表現するデザインなのに、コンテンツがわかりづらいというのはかなり問題です。そこで誕生したのがマテリアルデザインでした。

マテリアルデザインはシンプルな装飾という系統は活かしつつ、光・影・質量を用いることで何が重要なのか分かりやすく表現出来ます。

代表的なデザイン手法とマテリアルデザインの強み
マテリアルデザインの登場までに、覚えておきたいデザイン手法が2つあります。
それが、「スキューモーフィズム」と「フラットデザイン」です。

Webデザインの手法の一つである「スキューモーフィズム」は、参考にするモデルケースに寄せてデザイン制作を行い、ユーザーが直感的に理解しやすいようにする手法になります。例えば、紙製のカレンダーに似せてカレンダーのソフトウェアをデザインする、というようなイメージです。
もう一つの「フラットデザイン」は、2014年頃から一気に主流となったデザイン手法です。こちらの手法は、装飾性をできるだけ抑えたシンプルな平面的なデザインが特徴です。

そして、特にフラットデザインでよく課題として挙げられた、”シンプルなデザインが逆に本文やラベルなどの存在感を打ち消してしまう”という点をなくしたのが、「マテリアルデザイン」となります。マテリアルデザインは、光や影、奥行きのある表現を追加することで、よりわかりやすいUI・UXを作り出すことができます。

マテリアルデザインのポイント
・要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持つ
・わかりやすいUXを実現するアニメーション・インタラクション



元ソース http://link.ferret-plus.com/e/156311/ium-email-utm-campaign-content/5s2kw/160091824

0 Comments

Add your comment