Goalist Developers Blog

【2017年】マテリアルデザインのライブラリをかんたんに比較

こんにちは。ゴーリスト開発の飯尾です。

今回のお題は
マテリアルデザイン

material.io

現代っぽくスマートですね。
Googleが推奨しているというのだから乗るしかない、このビッグウェーブに
最近ではGoogleカレンダーのUIもマテリアルデザインに変わりましたね

GoogleカレンダーのWeb版がデザインを一新 | TechCrunch Japan

フレームワークどれ使う?

さて、このマテリアルデザインを実現するためのCSSフレームワーク
いろいろあります

おなじみBootstrapのCSSをマテリアルっぽくしたものとか

JSフレームワーク別に最適化されたものも

何使ったらいいんだ!とおもったのでちょっと調べてみました。

1. Material Design Lite

getmdl.io

  • Googleの開発者がメンテ
  • GitHub Star 20,006(ユーザー多め)
  • 開発がすでに「Material Components for the Web」に移行しているためサポートは限定的(ぐぬぬ)

2. Material Components for the Web

material.io

  • Material Design Liteの後続
  • ド公式のGoogleが管理してる最新版(安心)
  • GitHub Star 6,613(まだあまり普及してないのかね)

3. Materialize

materializecss.com

  • GiuHub Star 30,010(一番人気)
  • 充実のコンポーネント(マジパネッス)(リッチなWebサイト作るならこれ)
  • サイズはデカイ

4. MUI - Material Design CSS Framework

www.muicss.com

  • 軽量!簡素!
  • GitHub Star 3,679(う〜ん)
  • Angular対応してるのか〜とおもったらAngularJSだった(がっかりさせおって)



だいたいわかってきたぜえ

まあ私が個人的に使いたいのはAngularで組むWebアプリなんで
Angular Material 一択ですが!フハハ!ハハ!

皆さまも素敵なビッグウェ〜ブライフをお楽しみください🍌