Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」

Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。

The Best Of Material Design, daily – MaterialUp
http://www.materialup.com/

マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。

アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE

MaterialUpのトップページはこんな感じ。カード型でいろんなデザインが表示してあり、画像左上に「TODAY March 16th」と表示されている通り、デザインのサンプルは毎日最大12個追加されていきます。

ウェブサイトの左上には「All」「Inspiration」「Tools」「Freebies」というカテゴリと、デザイナーや開発者を見つけるためのウェブサイトリスト「Jobs」が表示されています。トップページはAllカテゴリとなっており、カテゴリをInspirationに変更するとアプリやウェブサイトの画面のスクリーンショットやモックアップなどが表示さました。

「Tools」にはデザインツールや開発ツールにおけるマテリアルデザインが並んでいます。

「Freebies」はマテリアルデザインに使われている素材が無料でダウンロード可能。

ということで、MaterialUpに登録されているデザインを見ていきます。各デザインはカード型で表示され、画像の部分をクリックすると……

こんな感じで、ブラウザの右半分に大きくデザイン画像や情報が表示されました。拡大表示された画像をクリックすると、Dribbbleなど、画像を展示する外部のウェブサイトのほか、実際に公開されているマテリアルデザインを使っているウェブサイトに飛ぶので、デザインの実物をじっくり見ることも可能。

カード表示の右下にあるボタンからシェアボタンを表示できるので、デザインを誰かに教えるのも簡単です。

デザインへの情熱を持つ人々のためのコミュニティ「rgb.today」は落ち着いた色合いのマテリアルデザイン。

SNSアプリで使われていそうなプロフィール画面や……

Apple TVで提供される「HBO Now」の画面予想もありました。

アップロード機能のアニメーションも発見。

「Upload Something」というボタンをクリック。

するとアニメーションがスタートし、アップロードの経過時間がバーで表示されます。

アップロードが終わるとチェックマークが完了を教えてくれます。

マテリアルデザインの履歴書も発見。

このデザインサンプルはFreebiesカテゴリに属し、ダウンロードボタンがついていたので、クリックしてみます。

Twitterへのログインを求められるので「LOGIN WITH TWITTER」をクリック。

アカウントとパスワードを入力して「ログイン」をクリック。

メール・バイオグラフィ・所在地などの入力を求められるので、入力して「CONTINUE」をクリック。

するとウェブサイトに戻るので、先ほどクリックした緑色のダウンロードボタンをもう一度押せばダウンロードができます。

なお、「All」カテゴリでは日付別にさまざまなカテゴリのものが並んでおり、毎日ウェブサイトを訪れても最新のものがすぐに発見できます。