
シンプルで使いやすい!マテリアルデザインの優良リソース15選
- 2017年2月14日
- ニュース
Google
が2014年に発表した「マテリアルデザイン」。
もはやトレンドというよりも、モバイル
アプリ
デザインにおけるスタンダードになりつつあります。
マテリアルデザインの大きな人気の理由のひとつが、その操作性です。
Google
が配布している
アプリ
のほとんどでマテリアルデザインが採用されていますが、どの
UI
も直感的で分かりやすく、操作しやすいのです。
そういうわけで、マテリアルデザインは2017年も引き続き多くの場面で見ていくことになるでしょう。
今回は、2017年のマテリアルデザインにも大活躍しそうな、使い勝手のよい優良リソースをご紹介していきます。
使えそうなものから試してみてください。
参考:
マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選
Googleが推奨!マテリアルデザインの2016年のトレンドを学ぼう
マテリアルデザインの優良リソース15選
1. Material Design
マテリアルデザインの総合情報サイトです。
ガイドラインやリソース、制作に役立つ
ツール
などが紹介されています。
2. Material Design Guidelines
https://material.io/guidelines/
マテリアルデザインの基本的な制作方針やルールについてまとめられています。
部品デザインだけでなく、アニメーションやオンボーディングについても、実はしっかりとした決まりがあります。
Google
の基本的なデザインのガイドラインなので、まだ読んでいないひとは一読しておきましょう。
3. Material Palette
https://www.materialpalette.com
マテリアルデザインでよく使われる配色パターンをカラーパレットで紹介しています。
プライマリーカラーとアクセントカラーの2色を選ぶだけで、そのほか活用できる色もパレットとして提案してくれます。
4. Material Icons
マテリアルデザインでよく使われるアイコンのセットです。
Webアイコンフォントとして使うことで、ホームページ上でも以下のように簡単にアイコンを表示することができます。
5. Device Metrix
マテリアルデザインはモバイル端末でも大活躍します。
そこで、こちらの
ページ
では、スクリーンサイズや縦横比、解像度などをデザインしやすいようにまとめています。
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
Material Design Liteはマテリアルデザインを簡単に実装することができるライブラリです。
CSS
と
JavaScript
を読み込めば、あとは簡単なコーディングでマテリアルデザインを使ったホームページを作成することができます。
10. Angular Material
https://material.angularjs.org/latest/
AngularJSを使ったマテリアルデザインの
フレームワーク
です。
JavaScript
がベースとなっているので、オートコンプリートやデートピッカーなど、動的な
UI
コンポーネントを作成することもできます。
11. Materialize
こちらも
CSS
と
JavaScript
を使った
UI
フレームワーク
です。
サードパーティからSassファイルが提供されており、関数を組んでコンパイルを行うこともできます。
また、ドラッグアウトメニュー(左からスワイプして出すメニュー)やトースト(ボタンを押すと下から出てくるメッセージ)などユニークな
UI
もそろっています。
12. Random Material Generator
https://codecrafted.net/randommaterial/
こちらもいわゆるカラーパレットですが、プライマリー・セカンダリー・アクセントの各カラーを選ぶと、コピー&ペースト用のコードを自動生成してくれます。
配色はリアルタイムプレビューで確認することもできるので、直感的に配色を選ぶことができます。
13. MProgress
http://lightningtgc.github.io/MProgress.js/
マテリアルデザイン風のプログレスバーを実装するための
フレームワーク
です。
ページ
内部だけでなく、
ページ
上部にくっつけることもできます。
14. Material Design Iconic Font
http://zavoloklom.github.io/material-design-iconic-font/
マテリアルデザイン用のアイコンをはじめからWeb
フォント
化したパッケージです。
さまざまな種類のアイコンが777種類用意されています。
Font Awesomeを使ったことのあるひとには馴染みやすいかもしれません。
15. Material Design for Bootstrap
http://mdbootstrap.com/material-design-for-bootstrap/
Bootstrapをベースにマテリアルデザイン用に改変・拡張した
フレームワーク
です。
Flexboxも同梱されていてレスポンシブ対応がしやすいです。
非常に簡単にマテリアルデザイン調のかっこいいサイトを構築できます。
まとめ
以上、マテリアルデザインで使える、さまざまな優良リソースをご紹介しました。
マテリアルデザインは、見た目の美しさだけではなく ユーザー の使い勝手まで意識されたデザインです。
とりわけ フレームワーク やライブラリは、1つ採用するだけでデザインの効率が劇的に上がるので、ぜひ使ってみてください。