ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

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

2014年にGoogleからマテリアルデザインのガイドラインが発表され、2015年7月にはGoogle公式のマテリアルデザインコンポーネントであるMaterial Design Liteが発表されました。ここ最近注目を集めているマテリアルデザインのフレームワークサイトをまとめてみました。

Material Design Lite

Material Design Lite
Material Design Lite
Google公式のマテリアルデザインコンポーネント。スタイルの接頭辞にmdl-がついています。コンポーネントの他にコンポーネントを組み合わせて作ったテンプレートが5種類あります。勉強のためにも一通り見ておくと良いでしょう。

Ionic

Ionic
Ionic
スマートフォンの大きさでプレビューができ、スマートフォンファーストの時代に適したマテリアルデザインコンポーネントです。Googleマテリアルデザインに準拠したWebサイトを作れます。ダウンロードはトップページもしくはプレビューページからで、Githubからダウンロードすることも可能です。

Materialize

Materialize
Materialize
マテリアルデザインに基づいたフレームワークです。ダウンロード・セットアップについて様々な方法で丁寧に解説されています。ダウンロードについてはHTML、Sass(.scssファイル)、CDN、NPM、Bowerでのダウンロード方法が、セットアップについてはHTML、Sassについて書かれています。コンポーネントを組み合わせたテンプレートが2種類ありますので何もないところからでもサイトを作り始めることができます。

Material UI

Material UI
Material UI
Googleマテリアルデザインに準拠したフレームワークです。トップページにDemoとあり、コンポーネントのプレビューをすぐに見ることができるので、このフレームワークで何ができるのかのイメージが膨らみやすいです。ダウンロードはnpm packageのみの対応です。慣れていないと苦戦するかもしれません。

MUI

MUI
MUI
Googleマテリアルデザインガイドラインに準拠したフレームワークです。Web、Email、React、iOS、Android、WebComponentsに対応しています。HTMLメールに対応している点は特徴の一つかと思われます。


いかがでしたでしょうか。マテリアルデザインのフレームワークを駆使すれば、フロントエンドのコーディングが楽になるでしょう。様々なフレームワークを試して、自分に合う使いやすいものを見つけていきたいですね。