マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。
最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。
そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。
Materialize
Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの1つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。
ShowcaseページにはMaterializeを使ったサイトが掲載されているので、参考にしてみてください。
【特徴】
・マルチクラス
・一部コンポーネントにflexboxを利用
・CSSファイルサイズ約115KB(minified)
・IE10以降をサポート
・商用可(MIT License)
Material Design Lite
Material Design Lite(MDL)は、Google謹製のCSSフレームワークです。必要最低限のコンポーネントは揃っていますが、Bootstrapに比べるとやや少ないという印象です。
【特徴】
・クラスの命名規則にBEMを採用
・全てのクラスにプレフィックスとして「.mdl-」がつく
・レイアウトにflexboxを利用
・CSSファイルサイズ約139KB(minified)
・バージョン1ではIE10以降(IE9は一部)をサポート
・商用可(Apache License 2.0)
MUI
MUIはマテリアルデザインをベースとした軽量なCSSフレームワークです。React、Angular、Web ComponentsなどのJavaScriptライブラリのほか、HTMLメールでも利用できるのが特徴です。
MDLと同じくコンポーネントは必要最低限が揃っているという印象なので、MUIをベースにプロジェクトに合わせてカスタマイズしていくといった使い方が良さそうです。
【特徴】
・外部ライブラリに依存しない
・React、Angular、Web Componentsでも利用できる
・HTMLメールでの利用をサポート
・IE10以降をサポート
・CSSファイルサイズ39KB(minified)
・商用可(MIT License)
Phonon
MUIと同じく、さまざまなJavaScriptライブラリをサポートする軽量CSSフレームワークです。さらに、HTML5でiPhone/Android向けアプリを作成できるApache CordovaとPhoneGapのサポートもされているので、簡単にHTML5ベースのハイブリッドモバイルアプリを作成することができます。
【特徴】
・外部ライブラリに依存しない
・RiotJS, AngularJS, RequireJS, VueJSをサポート
・アプリを作成できる(Apache Cordova、PhoneGap)
・CSSプリプロセッサとしてStylusを使用
・IE10以上を(IE9は部分的に)サポート
・商用可(MIT License)
Material Design for Bootstrap
Bootstrapをマテリアルデザインにするテーマです。Bootstrapに加えてこのテーマファイル(約109KB)を読み込む必要があるので、ファイルサイズはやや大きくなります。ほかにも、Bootstrapベースのテーマには、Paperなどがあります。
【特徴】
・Bootstrapテーマ
・Bootstrap 3.0以上/jQuery 1.9.1が必要
・CSSファイルサイズ約95KB(minified)
・IE11以降をサポート
・商用可(MIT License)
Material-UI
マテリアルデザインをベースとしたReactアプリケーションを作りたいならば、Material-UIがおすすめです。Call-Em-Allという企業によって作成されています。Reactの知識が必要になるほか、コンポーネントに細かい変更を加える際などはその都度コードを読む必要があるので導入ハードルは高めです。
【特徴】
・Reactコンポーネント
・npmパッケージとして提供
・IE11以降で正常に動作 *詳細
・商用可(MIT License)
Angular Material
AngularJS公式のマテリアルデザインをベースとしたCSSフレームワークです。Angular 1.3 以上が必要となります。公式ドキュメントは充実していますが、日本語の情報は少なめです。
【特徴】
・Angular 1.3 以上が必要
・IE11以降で正常に動作
・商用可(MIT License)
Polymer
Polymerは、GoogleによるWeb ComponentsのためのJavaScriptライブラリです。マテリアルデザインのためのフレームワークではないですが、Google謹製のものなのでマテリアルデザインをベースとしたものとなっています。Web Componentsを使いたいという場合以外は、選択肢にはならないでしょう。
【特徴】
・Web ComponentsのためのJavaScriptライブラリ
・IE11以上をサポート
・商用可(BSD License)
まとめ
マテリアルデザインをベースとしたフレームワークは、基本的なデザインやモーションはほぼ同じと言っても良いのでサイトに合わせて選ぶと良いでしょう。