シンプルで使いやすい！マテリアルデザインの優良リソース15選

2018年01月31日

デザイン

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

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

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

参考：
マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選
 Googleが推奨！マテリアルデザインの2016年のトレンドを学ぼう

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

1. Material Design

https://material.io

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

2. Material Design Guidelines

https://material.io/guidelines/

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

3. Material Palette

https://www.materialpalette.com

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

4. Material Icons

https://material.io/icons/

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

5. Device Metrix

https://material.io/devices/

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

6. Material Design Colors

https://material.io/guidelines/style/color.html

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

7. Material Design for Android

https://developer.android.com/design/material/index.html

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

8. Polymer Paper Elements

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

https://getmdl.io

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

10. Angular Material

https://material.angularjs.org/latest/

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

11. Materialize

http://materializecss.com

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