Googleだけじゃない!?最新マテリアルデザインフレームワーク25選

Pocket

マテリアルデザインのフレームワークまとめ
フラットデザインも浸透して一段落、次のデザイントレンドは?ということで注目されているのがこのマテリアルデザイン。最近Googleでマテリアルデザインのためのフレームワークがこちらで公開されました。

デバイス間で統一されたユーザー体験を提供するのが目的で、とくにモバイルファーストの考え方を導入されているサイトでは有効なデザイン手法になりそうです。

Bootstrapの登場以降、フレームワークを下地にするのが当たり前になりつつあるということもあり、このページではマテリアルデザインのためのおすすめフレームワークを紹介したいと思います。フレームワークを使えば1から開発する手間も省けるので工数の削減にもなってGoodなんです!

マテリアルデザインフレームワークまとめ

Material Design Lite
クロスデバイスユースに最適化されたフレームワーク。マテリアルデザインのフレームワークの中でもとくに有名で新しいものです。
マテリアルデザインンフレームワークまとめ-01

Materialize
Bootstrapに慣れている人なら簡単に使えるフレームワーク。いくつかテンプレートも用意されており、勉強になります。
マテリアルデザインンフレームワークまとめ-02

Material UI
Googleのマテリアルデザインのコンセプトを取り入れたフレームワーク。デザインも洗練されていて使いやすい印象です。
マテリアルデザインンフレームワークまとめ-03

Ionic Material
セクシーでクールなフレームワーク。公式サイトではデザインサンプルを見ることができます。
マテリアルデザインンフレームワークまとめ-04

Material Design For Bootstrap
でもやっぱりBootstrap使いたい!という人にぴったりなのがこちら。Bootstrapをマテリアルデザインに最適化したテーマになっています。
マテリアルデザインンフレームワークまとめ-05

Angular Material
AngularJS使いならこちらもおすすめ。AngularJSにマテリアルデザインを実装したテーマです。デモページからはコードを取得することができるので簡単に使用可能。
マテリアルデザインンフレームワークまとめ-06

続きはこちら:25+ Best Material Design Frameworks

まとめ

最新のデザイントレンドになりそうなだけあってどのデザインも非常にハイクオリティですよね!あと海外のフレームワークの何がいいかって、きちんとドキュメントが用意されているところ。

自分でソースコード読んで解析して...なんていう作業はしなくて良いので本当に助かります。英語できる人なら書籍化されるのを待つことなく使いこなせるのではないでしょうか。

Bootstrapのテーマとして提供されているものもあるので、Bootstrapユーザーにとってはありがたいです。