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

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

Material Design Lite

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

Ionic

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

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

Material UI

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