MaterialDesign?

Googleが発表したモダンなデザイン。

この記事ではそのMaterialDesignのコンポーネントを簡単に使えるフレームワークを紹介していきます。

1. Material Design Lite

公式ページ

おそらくいちばん有名なCSSMaterialDesignフレームワーク。

Googleが開発している信頼できるフレームワークです。

たった3行<head>に記述するだけで使えます。

untitled

<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
<link rel=”stylesheet” href=”https://code.getmdl.io/1.3.0/material.indigo-pink.min.css”>
<script defer src=”https://code.getmdl.io/1.3.0/material.min.js”></script>

コンポーネントも必要最低限あり非常に軽量です。

メリット

  • 初心者でも簡単に扱える。
  • 軽量
  • Google製で安心

デメリット

  • クラス名が長すぎて直感的に使えない
  • コンポーネントが最低限過ぎて欲しいものが見つからないときがある。

2. Materialize

公式ページ

こちらもすごく有名なCSSフレームワークです。

レスポンシブ対応でメールHTMLにも対応している恐ろしいフレームワーク。

これも必要最低限のコンポーネントしかありませんが、JavaScriptAPIが豊富。

メリット

  • レスポンシブデザインのサイトを作りたい人におすすめ

デメリット

  • Navbarコンポーネントがちょっと思ってたのと違うと僕は思った

3. Material Design for Boostrap 4

公式ページ

Bootstrap 4に対応したMaterialDesignフレームワーク。

とにかくコンポーネントが多い!

既存のBootstrapのコンポーネントがMaterialDesignになっているのでBootstrap経験者はすぐにMaterialDesignが実装できる。

メリット

  • Bootstrapなのでレスポンシブデザイン対応
  • 新しいコンポーネントも沢山
  • 様々なフロントフレームワークに対応(AngularJS,Vue.js)

デメリット

  • 無償でも使えますが、有料のコンポーネントもある

4. Angular Material

公式ページ

AngularJS用のMaterialDesignフレームワーク。

コンポーネントも沢山あってしっかりしてる。

リファレンスもとても見やすい。

メリット

  • コンポーネントのMaterialDesignがちゃんとしてる。
  • AngularJS対応は嬉しい

デメリット

  • リファレンスはTypeScriptで載ってるのでTSやったことない人だときつい
  • NPMなのでサーバーが・・・
  • AngularJS公式ではない

5. AngularJS Material

公式ページ

こちらもAngularJS用のMaterialDesignフレームワーク。

コンポーネントもたくさんありしっかりしてる。

AngularJS公式

メリット

  • CDNもあるのでAngular Materialを使えない人におすすめ
  • リファレンスが見やすいしJavaScript
  • AngularJS対応は嬉しい
  • コンポーネントが沢山ありしっかりしてる

デメリット

このフレームワークは非の打ち所がないといえます。

ものすごくおすすめです。

6. Material Design for Bootstrap

公式ページ

これもBootstrap4対応のMaterialDesignフレームワーク。

リファレンスがすごく見やすく出来てる。

メリット

  • 全て無償で使えるのですごくおすすめ

デメリット

  • 少し不具合がある

7. Material Design for Bootstrap

公式ページ

先程はBootsrap4対応でしたがこちらはBootstrap3対応のMaterialDesignフレームワーク。

このHotalogでも使われています。

メリット

  • 不具合がなく安定している

デメリット

  • Bootstrapのコンポーネントは全て対応しているみたいだけど、ちょっとコンポーネントを足してほしい

8. Vue Material

公式ページ

Vue.js用のMaterialDesignフレームワーク。

コンポーネントも多めでしっかりしてる。

CDNもあり手軽にできる。

メリット

  • Vue.js対応
  • CDNもある
  • コンポーネントが多めでしっかりしてる

デメリット

これも非の打ち所がないフレームワークです。

9. Material UI

公式ページ

かなり有名なReactのフレームワーク。

コンポーネントが多くしっかりしてる。

カスタマイズも手軽に出来てかっこいい。

メリット

  • コンポーネント多めでしっかりしてる
  • カスタマイズが容易

デメリット

  • NPMなのでサーバーが・・・

10. MUI

公式ページ

なんと、CSS、AngularJS、React、HTMLメールに対応しているフレームワーク。

コンポーネントもしっかりしてる。

メリット

  • たくさんのSPAフレームワークなどに対応している
  • コンポーネントがしっかりしてる

デメリット

非の打ち所がない。

まとめ

今回はこの10個のフレームワークを紹介しました。

どれもこれもそれぞれ個性があります。

自分の使っているフレームワークなどに対応しているMaterialDesignフレームワークが見つかるといいですね。