Googleの公式映像でマテリアルデザインの基礎をおさらいしよう!

まずはこちらの映像をご覧ください。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です。マテリアルデザインを使ったサイトの実装に活用できます。パーツが豊富に揃っており、実装が楽です。フレームワークを活用する場合は、デザインもフレームワークに則って行うと効率的です。

フレームワーク
Welcome – Polymer 1.0