Googleが2014年に発表した*「マテリアルデザイン」*。
もはやトレンドというよりも、モバイルアプリデザインにおけるスタンダードになりつつあります。

マテリアルデザインの大きな人気の理由のひとつが、その操作性です。
Googleが配布しているアプリのほとんどでマテリアルデザインが採用されていますが、どのUIも直感的で分かりやすく、操作しやすいのです。
そういうわけで、マテリアルデザインは2017年も引き続き多くの場面で見ていくことになるでしょう。

今回は、2017年のマテリアルデザインにも大活躍しそうな、使い勝手のよい優良リソースをご紹介していきます。
使えそうなものから試してみてください。

参考：
マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選

マテリアルデザインの優良リソース15選

1. Material Design

1_materialdesign.jpeg
https://material.io

マテリアルデザインの総合情報サイトです。
ガイドラインやリソース、制作に役立つツールなどが紹介されています。

2. Material Design Guidelines

2_mdintroduction.jpeg
https://material.io/guidelines/

マテリアルデザインの基本的な制作方針やルールについてまとめられています。
部品デザインだけでなく、アニメーションやオンボーディングについても、実はしっかりとした決まりがあります。
Googleの基本的なデザインのガイドラインなので、まだ読んでいないひとは一読しておきましょう。

3. Material Palette

3_colorpalette.jpeg
https://www.materialpalette.com

マテリアルデザインでよく使われる配色パターンをカラーパレットで紹介しています。
プライマリーカラーとアクセントカラーの2色を選ぶだけで、そのほか活用できる色もパレットとして提案してくれます。

4. Material Icons

4_icons.jpeg

マテリアルデザインでよく使われるアイコンのセットです。
Webアイコンフォントとして使うことで、ホームページ上でも以下のように簡単にアイコンを表示することができます。

icon.png

5. Device Metrix

5_devicemetrix.jpeg
https://material.io/devices/

マテリアルデザインはモバイル端末でも大活躍します。
そこで、こちらのページでは、スクリーンサイズや縦横比、解像度などをデザインしやすいようにまとめています。

6. Material Design Colors

6_colorpatterns.jpeg
https://material.io/guidelines/style/color.html

先ほどはマテリアルデザインの原色を中心としたカラーパレットをご紹介しましたが、こちらは各色別に濃淡まで掲載しています。
プライマリー・セカンダリー・アクセントカラーの選び方のガイドラインも掲載されています。

7. Material Design for Android

7_forandroid.jpeg
https://developer.android.com/design/material/index.html

アンドロイド端末でのマテリアルデザインでの設計の注意点が掲載されています。
シャドウやクリッピング、ドローアブルなどの説明も記載されています。
アンドロイドでのマテリアルデザインに興味のある方は、一読しておきましょう。

8. Polymer Paper Elements

8_polymer.jpeg
https://www.webcomponents.org/author/PolymerElements

Polymerとは、JavaScriptのUIフレームワークで、Web Componentsをモダンブラウザ以外でも利用できるようにしたライブラリです。
Web Componentsとは今後Web標準になる予定の技術で、Webページで利用する各パーツをコンポーネント化し、ページを作成します。
パーツをコンポーネント化することで、何度でも簡単に再利用することができるようになります。

Polymer Paper Elementsは、Polymerを使ったマテリアルデザインの基盤となるUIフレームワーク集で、Polymerを使ったことがあるひとなら簡単にマテリアルデザインを使ったWebアプリケーションを作ることができます。

9. Material Design Lite

9_designlite.jpeg
https://getmdl.io

Material Design Liteはマテリアルデザインを簡単に実装することができるライブラリです。
CSSとJavaScriptを読み込めば、あとは簡単なコーディングでマテリアルデザインを使ったホームページを作成することができます。

10. Angular Material

10_angularmaterial.jpeg
https://material.angularjs.org/latest/

AngularJSを使ったマテリアルデザインのフレームワークです。
JavaScriptがベースとなっているので、オートコンプリートやデートピッカーなど、動的なUIコンポーネントを作成することもできます。

11. Materialize

11_materialize.jpeg
http://materializecss.com

こちらもCSSとJavaScriptを使ったUIフレームワークです。
サードパーティからSassファイルが提供されており、関数を組んでコンパイルを行うこともできます。
また、ドラッグアウトメニュー(左からスワイプして出すメニュー)やトースト(ボタンを押すと下から出てくるメッセージ)などユニークなUIもそろっています。

12. Random Material Generator

12_randomgenerator.jpeg
https://codecrafted.net/randommaterial/

こちらもいわゆるカラーパレットですが、プライマリー・セカンダリー・アクセントの各カラーを選ぶと、コピー＆ペースト用のコードを自動生成してくれます。
配色はリアルタイムプレビューで確認することもできるので、直感的に配色を選ぶことができます。

13. MProgress

13_mprogress.jpeg
http://lightningtgc.github.io/MProgress.js/

マテリアルデザイン風のプログレスバーを実装するためのフレームワークです。
ページ内部だけでなく、ページ上部にくっつけることもできます。

14. Material Design Iconic Font

14_iconicfont.jpeg
http://zavoloklom.github.io/material-design-iconic-font/

マテリアルデザイン用のアイコンをはじめからWebフォント化したパッケージです。
さまざまな種類のアイコンが777種類用意されています。
Font Awesomeを使ったことのあるひとには馴染みやすいかもしれません。

15. Material Design for Bootstrap

15_mdbootstrap.jpeg
http://mdbootstrap.com/material-design-for-bootstrap/

Bootstrapをベースにマテリアルデザイン用に改変・拡張したフレームワークです。
Flexboxも同梱されていてレスポンシブ対応がしやすいです。
非常に簡単にマテリアルデザイン調のかっこいいサイトを構築できます。

まとめ

以上、マテリアルデザインで使える、さまざまな優良リソースをご紹介しました。

マテリアルデザインは、見た目の美しさだけではなくユーザーの使い勝手まで意識されたデザインです。

とりわけフレームワークやライブラリは、１つ採用するだけでデザインの効率が劇的に上がるので、ぜひ使ってみてください。