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

フロントエンドフレームワーク

 ■ はじめに

マテリアル デザインを、少しずつ勉強していく...
今回は、マテリアル デザインに準拠したフレームワークを調べてみた。

  => デザインは流行り廃りがあるから、
　　どうせ直ぐに使えない技術になるだろーが...
  => 現状(2022～2023年)は、以下の関連記事を参考にして決めてもいいかも。

The State of CSS 2022
https://dk521123.hatenablog.com/entry/2023/01/01/220655

目次

【１】マテリアル デザイン (Material Design)
【２】フレームワーク一覧
　１）Vuetify
　２）Polymer
　３）Material Design for Bootstrap (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
　１７）vue material

【１】マテリアル デザイン (Material Design)

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

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

 【２】フレームワーク一覧

１）Vuetify
２）Polymer
３）Material Design for Bootstrap (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
１７）vue material

メモ 

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

 １）Vuetify

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

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

 ２）Polymer

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

Polymer ～ 初期設定編 ～
https://dk521123.hatenablog.com/entry/2018/06/18/233411
Polymer ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2018/06/19/165900

 ３）Material Design for Bootstrap (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/

４）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

 ５）Materialize

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

Materialize ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2022/12/31/235908

 ６）Material framework

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

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

 ７）Surface

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

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

８）MUI

 公式サイト 

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

https://www.muicss.com/

 ９）Material UI

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

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

１０）Framaterial Framework

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

 １１）Ionic Material

 * MIT License; 商用利用可能

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

 １２）Leaf

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

 １３）Phonon Framework

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

 １４）AdminBSB Material Design

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

 １５）LumX

 * AngularJS使用

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

 １６）Ember Paper

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

 １７）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
Polymer ～ 初期設定編 ～
https://dk521123.hatenablog.com/entry/2018/06/18/233411
Polymer ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2018/06/19/165900
Materialize ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2022/12/31/235908
The State of CSS 2022
https://dk521123.hatenablog.com/entry/2023/01/01/220655