2015年12月9日パフィコ横浜で開催されたGoogle Playの開発デベロッパー向けのイベント「Google for Mobile」に参加しました。

特に印象に残ったセッションをいくつか紹介していきたいと思います。

セッション1　Develop Track「マテリアルデザインでよりよいユーザー体験を実現しよう」

マテリアルデザインはユーザーが理解しやすく、美しく、適応性の高い、モーションにあふれたデザインを実現させます。
また、各サービスを異なるプラットフォーム・異なるデバイスでも統一させるのが目的の1つです。 GoogleのGmailも昔は、PC、スマホ、アプリでUIデザインは統一されていなかったそうです。

そこで取り入れられたのが、マテリアルデザインの考え方です。
大きく分けて下記4つの要素があります。

1.タンジブルサーフェイス

一見平面的なデザインでも、実は高さ（奥行）がある構造になっています。
さらにユーザーに注意を促したい所には、影をつけたり、インパクトのある色を持ってきています。

出典：youtube

2.印刷物のようなデザイン

ベースライン、グリッド、キーラインをしっかり決める印刷物特有なデザイン法則も取り入れています。
コンテンツが主役になるような、意図的な余白、大胆かつ洗練されたデザインを行います。

3.意味があるアニメーション

昔はアニメーションは装飾の部類でしたが、今は、ユーザーが画面遷移など道筋を理解させるために使用されることが多くなっています。

カレンダーアプリを例として紹介していました。
日付をタップすると、その日付が拡大しながらアニメーションします。
そのアニメーションでユーザーにどのような画面遷移があったのかを伝えることができました。 これが、もしパッとその日の詳細が表示されても、直感的には理解できないでしょう。

出典：youtube

4.アダプティブデザイン

ユーザーが使用する様々な環境や状況や目的に合わせて、最適なデザインで表示させるデザインです。

webで多く採用されていつレスポンシブデザインに近いですが、単純に画面サイズでの変化ではないので、アダプティブデザインの方がよりユーザに合わせた最適化を行っています。

参考サイト：LIG「レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える」

Google のデザインガイドラインサイト「Google Design」

これらの情報は、Google Design‎　というサイトで詳しく公開されています。
デザインに関するガイドラインやイベント情報など、すべて英語ですが、役立つ情報がたくさんあります。
もちろん、このサイト自体がマテリアルデザインで、すごく見せ方が参考になります。

その他にも、デバイスごとの画面サイズ情報や、アイコンの提供を無償で行っています。

アイコン：
https://www.google.com/design/icons/

デバイス情報：
https://design.google.com/devices/

マテリアルデザインを説明した動画

マテリアルデザインを取り入れて成功したアプリ実例

ニューヨークタイムズのアプリは、マテリアルデザインを取り入れることで、 40％ユーザー数が増加したそうです。 その他、実例は、下記から見られます。 https://play.google.com/store/apps/collection/promotion_3001769_io_awards

マテリアルデザインのアプリを説明した動画