Material Design のリソースなどなど

ここ最近、Material Design についてお話しさせていただく機会が多いのですが、

その際に良く Material Design に関するアップデートや事例はどこを見たら良いかという質問をいただくので、こちらに現時点(2015年10月) のをちょっとまとめてみますね。

リソース

Material Design Specs 

こちらは、本家の Material Design のサイトですね。一番良く見るのはこちらのサイトだと思います。何気にちょこちょことアップデートされてまして、去年1年間で4回に渡ってアップデートが行われています。

Google Design 

Google Design のサイトでは、Material Design だけではなく、「どうやって Material Design をフレームワークと使いつつ、自社ブランドを魅力的に見せるか」などのコンテンツも掲載されています。

Device Metrics Tool

device-metrics-tool

Device Metrics Tool は様々なデバイスのスクリーンサイズ、解像度、画角などが一覧出来るツールです。また、Material Design を使う際には、”Material Metrics” という項目を参照すると、Material Design を使う際の 推奨 Toolbarのサイズや余白のサイズを教えてくれます。

例えば上記のキャプチャでは、Nexus 5 を選択した時の例なのですが、Toolbar は 56dp, 余白は 16dp が推奨と教えてくれるので、便利ですね!

Material Design Lite

material-design-lite

Material Design Lite は、HTML, CSS, JavaScript で Material Design を利用できるフレームワークです。様々なテンプレートも公開されているので、HTML ベースで Material Design を活用する際に使えそうですね!

事例

Best-In-Class Android Design

Best-in-class-android-design

こちらは、Google Play 上の特設ページですが、Material Design を活用した事例アプリ(B&H, New York Times, Pocket, Tumbler など)が掲載されています。

Materialup 

materila-up

Materialup は、毎日様々な Material Design の事例やコンポーネントが紹介されているので、アプリだけでは無くデザインのパーツをみるだけでも参考になります。

サンプルコード

Cheesesquare Sample

こちらは、Android Design Support Libraryを使ったサンプルアプリがオープンソースで公開されています。

これ以外にも様々なリソースを見つけ次第アップデートしていきますね。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s