マテリアル デザイン フレームワーク の比較調査

 ■ はじめに

 * マテリアル デザインを、少しずつ勉強していく...
  => デザインは流行り廃りがあるから、どうせ直ぐに使えない技術になるだろーが...

■ マテリアル デザイン (Material Design)

 * Googleが提唱するデザイン指針

公式サイト
https://material.io

 フレームワーク一覧

 * Polymer
 * Material Design for Bootstrap 4 (MDB)
 * Material Design Lite (MDL)
 * Materialize
 * Material framework
 * Surface
 * MUI
 * Material UI
 * Framaterial Framework
 * Ionic Material
 * Leaf
 * Phonon Framework
 * AdminBSB Material Design
 * LumX
 * Ember Paper
 * Vuetify
 * vue material

メモ

選定は、人それぞれなので、より多くデモを触って、
要件や条件に合うものを選べばいいかと 
# 個人的には「Surface」か「Materialize」がいい

 【1】Vuetify

* Vue.js対応 
* MIT License (商用利用可能)
* 詳細は、以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2020/12/26/000242

 【2】Polymer




 【3】Material Design for Bootstrap 4 (MDB)

* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2018/07/10/220319

 * MIT License; 商用利用可能

https://mdbootstrap.com/license/
 注意点

 * 無料版 / 有料版 とあり、無料版は機能が限られている
  => 詳細は、以下の関連記事を参照のこと。

 公式サイト
https://mdbootstrap.com/
https://fezvrasta.github.io/bootstrap-material-design/
examples
https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/examples/
icon
http://mervick.github.io/material-design-icons/
https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/list-groups/

 【4】Material Design Lite (MDL)

 * Google製
 * Apache-2ライセンス

 デメリット

公式サイト

https://github.com/google/material-design-lite/blob/mdl-1.x/README.md

より抜粋 

Feature requests
MDL is currently in limited support mode
# Material Design Lite (MDL)は、現在、限定的なサポートモードになっています。

 公式サイト
https://getmdl.io/

リファレンス(これ見ながらできる) 

https://getmdl.io/components/index.html

テンプレート(これも助かる) 

https://getmdl.io/templates/index.html

 【5】Materialize

 公式サイト
https://materializecss.com/
Getting Started
https://materializecss.com/getting-started.html
Templates
https://materializecss.com/templates/starter-template/preview.html
https://materializecss.com/templates/parallax-template/preview.html

 【6】Material framework

 * 公式サイトにチュートリアル的なデモがある
  => (あくまで個人的な感想だが)簡単に使えそうだが、アニメーションの気持ちよさがいまいち

 公式サイト
http://nt1m.github.io/material-framework/

 【7】Surface

 * CSS Only (すご!)
 * MIT License; 商用利用可能
 *  個人的には、使いやすそうだし、アニメーションもいい感じ

 公式サイト
http://mildrenben.github.io/surface/index.html

 【8】MUI

 公式サイト

個人的には「Getting Started」だけでなく
「Example Layouts」が用意されているのは助かる 

https://www.muicss.com/

 【9】Material UI

 * インストールが必要そう
 * MIT License; 商用利用可能

 公式サイト
https://material-ui.com/

 【10】Framaterial Framework

 公式サイト
http://framaterial.github.io/framaterial/

 【11】Ionic Material

 * MIT License; 商用利用可能

 公式サイト
http://ionicmaterial.com/

 【12】Leaf

 公式サイト
http://getleaf.com/

 【13】Phonon Framework

 公式サイト
http://phonon.quarkdev.com/

 【14】AdminBSB Material Design

 公式サイト
https://gurayyarar.github.io/AdminBSBMaterialDesign/

 【15】LumX

 * AngularJS使用

 公式サイト
http://ui.lumapps.com/

 【16】Ember Paper

 公式サイト
http://miguelcobain.github.io/ember-paper/

 【17】vue material

* Vue.js対応 

 公式サイト
https://vuematerial.io/

 参考文献

http://shared-blog.kddi-web.com/webinfo/16
https://goworkship.com/magazine/material-design-frameworks/
https://webdesign-trends.net/entry/2276
https://furien.jp/columns/223/
https://lab.sonicmoov.com/markup/best-material-design-template/
http://uxmilk.jp/49116
https://hota1024.com/2018/02/11/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81materialdesign%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF10%E9%81%B8/
http://tech-blog.applican.com/entry/2015/03/17/120000

関連記事

Material Design for Bootstrap 4 ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2018/07/10/220319
Vuetify ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/12/26/000242