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を使ったサンプルアプリがオープンソースで公開されています。

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

久しぶりに

最近、FacebookやTwitterやGoogle+に投稿する事が多いけど、せっかくなので、自分のブログの方も定期的に更新していこう。

とはいえ、特に毎日書くほどの記事が無いので粛々と淡々と。

てか、今気づいたら最後の投稿から約1年も経ってたのか。。。