まずはこちらの映像をご覧ください。2014年に発表された映像なので、既に見たことがある方も多いと思いますが、マテリアルデザインのポイントがよくまとまっています。
マテリアルデザインは、Googleが2014年に発表した、新しいデザインのガイドラインです。
その後、Googleの各製品や、他の企業のWebサービスへも導入が進み、今では標準的なデザイン手法の一つになっています。
マテリアルデザインのポイントは2つあります。
現実世界のルールを取り入れる
1つ目のポイントは、Webデザインに現実世界のルールを取り入れることです。それは、奥行きや影、重なりなど、私たちが周りを見回したときに、自然とそこにあるルールです。
これらのルールは私たちが生まれて時から当然のように学んできたものであり、ほぼ無意識のうちに感覚として捉えることができます。
例えば、下記の画像では、3番目のボックスが手前に浮かんでいることが分かります。
これは、手前のボックスを少し大きくしたり、影を濃くするなど、現実世界と同じルールで演出することによって表現されています。
現実世界のルールは世界中の誰もが、生まれた時から学んできた共通のルールです。そこには、文化や言語の壁はありません。
そして、このルールを2次元で表現する手法は、遠近法や光と影の演出として、人類が長年、芸術という文化の中で培ってきた技術です。
Webサービスは、たった1つのサービスを世界中の人が使います。ある国や地域でしか通じない表現では、他の国や地域の人の使い勝手が損なわれてしまいます。誰もが無意識に理解できるルールを取り入れることで、世界中の人が理解できる表現をする、これがマテリアルデザインの一つ目のポイントです。
体験をデザインする
2つ目のポイントは、体験（モーション）を分かりやすく、気持よくデザインすることです。
画面をタップしたり、スワイプした際に、自分が行った操作がどのような影響を与えたのか、分かりやすいモーションで表現します。
例えば、下記の画像では、再生ボタンを押すことで、プレイヤーの操作画面が表示され、音楽の再生が開始されたことが一目で分かります。
このように、操作とその結果をシームレスなモーションで繋いで、ユーザーの体験をスムーズに、気持よく演出することがマテリアルデザインの2つ目のポイントです。
マテリアルデザインのコンセプトを抑えることで、ユーザーの体験満足度を向上させることができます。
マテリアルデザインに役立つサービス
最後に、マテリアルデザインの勉強や実装に役立つサービスを紹介します。
マテリアルデザインを体験できるデモアプリ
マテリアルデザインのデモを体験できるGoogleアプリです。インストールすると、実際に画面を操作して、マテリアルデザインのモーションを体験することができます。まずは、このアプリで感覚を掴みましょう。
Material Library Demo – Google Play の Android アプリ
Google公式のガイドライン
Google公式のマテリアルデザインのガイドラインです。マテリアルデザインの法則やデザインのポイントについて、下記のような動画を使って分かりやすく解説しています。
Material design – Google design guidelines
フレームワーク
マテリアルデザインのフレームワークは色々ありますが、おすすめはpolymer.jsです。マテリアルデザインを使ったサイトの実装に活用できます。パーツが豊富に揃っており、実装が楽です。フレームワークを活用する場合は、デザインもフレームワークに則って行うと効率的です。
