Googleが提唱する「マテリアルデザイン」って知ってる？？

どうも、ねごろんです。

たまには、WEBデザイナーらしい記事を書いてみたいと思います！w
2014年にGoogle社から、新しいUX体系だと発表されたのが「マテリアルデザイン」です。
近年でも、数多く採用されているデザインスタイルです！
さて、そんな「マテリアルデザイン」とはどんなものなのでしょうか？

「マテリアルデザイン」とは？

マテリアルとは直訳で「物質的な」「具体的な」という意味です。
物質的なデザインとは、現実世界にある物の動きや影、奥行きなどを表現する事によって直感的に理解できるようなデザインを指しています。
そうすることにより、ユーザーが平面の画面の中でも感覚で操作することができるのでストレスが少ないサービスを作ることができます。

「マテリアルデザイン」の特徴

出典：【怒りのUI】Googleのマテリアルデザインから学ぶUI設計インファクトスタッフブログ

直感的に理解しやすいマテリアルデザインは、視覚的に情報を取り込みやすくする工夫が多くあります。

・ベースの考え方
マテリアルデザインは、「紙」と「インク」のような考え方をします。
紙とは文字やアイコンなどの要素を配置するための土台となるものです。一方、インクは紙の上に配置された写真や文字といった要素を指します。
実際の画用紙に紙を重ねて貼り付けると厚みが出て影ができるのと同じように、マテリアルデザインも要素に影をつけることで、奥行きや高さ、幅などを立体的に見せることができます。

・おおまかな特徴
マテリアルデザインでは、ユーザーの注意を散漫させないために多くの色を使うことはありません。
フラットデザインに近いデザインスタイルになります。
ただ、フラットデザインと違って平面でも3Dのように立体的に見せるために、「影」を活用することが多いです。
影の広さや長さのバランスを使って、距離感や高さを表現します。

また、ユーザーが操作しているような感覚を演出をするためにボタンなどにアニメーションを入れることが多い印象です。

厳密なガイドライン

マテリアルデザインには、Googleが設定した超厳密なガイドラインが存在します。
ボタンの形や角の丸み、余白や色の使い方などまで「こうあるべき」というが指示されています。
ただ、このガイドラインに沿って作るだけである程度は使いやすいデザインになるというメリットもあります。

こんな所で採用されています。

Google＋

Google Trips

その他、Googleのサービス、アプリ、Webサイトのほとんどがマテリアルデザインで作られています。実際にどのように作られているかを見るのはとても勉強になります。

まとめ

フラットデザイン＋影で、マテリアルデザインという考え方は間違いです。
あくまで、分かりやすく、見やすくするために影を活用するだけであり、必ず影を使う訳ではありません。
もっと詳しく知りたい方は、ぜひガイドラインを一通り目読んでみるのをオススメします！
今度は、よく比較に使われるフラットデザインについても書いてみたいと思います！