2014年にGoogleからマテリアルデザインのガイドラインが発表され、2015年7月にはGoogle公式のマテリアルデザインコンポーネントであるMaterial Design Liteが発表されました。ここ最近注目を集めているマテリアルデザインのフレームワークサイトをまとめてみました。
Material Design Lite Google公式のマテリアルデザインコンポーネント。スタイルの接頭辞にmdl-がついています。コンポーネントの他にコンポーネントを組み合わせて作ったテンプレートが5種類あります。勉強のためにも一通り見ておくと良いでしょう。
Ionic スマートフォンの大きさでプレビューができ、スマートフォンファーストの時代に適したマテリアルデザインコンポーネントです。Googleマテリアルデザインに準拠したWebサイトを作れます。ダウンロードはトップページもしくはプレビューページからで、Githubからダウンロードすることも可能です。
Materialize マテリアルデザインに基づいたフレームワークです。ダウンロード・セットアップについて様々な方法で丁寧に解説されています。ダウンロードについてはHTML、Sass(.scssファイル)、CDN、NPM、Bowerでのダウンロード方法が、セットアップについてはHTML、Sassについて書かれています。コンポーネントを組み合わせたテンプレートが2種類ありますので何もないところからでもサイトを作り始めることができます。
Material UI Googleマテリアルデザインに準拠したフレームワークです。トップページにDemoとあり、コンポーネントのプレビューをすぐに見ることができるので、このフレームワークで何ができるのかのイメージが膨らみやすいです。ダウンロードはnpm packageのみの対応です。慣れていないと苦戦するかもしれません。
MUI Googleマテリアルデザインガイドラインに準拠したフレームワークです。Web、Email、React、iOS、Android、WebComponentsに対応しています。HTMLメールに対応している点は特徴の一つかと思われます。
いかがでしたでしょうか。マテリアルデザインのフレームワークを駆使すれば、フロントエンドのコーディングが楽になるでしょう。様々なフレームワークを試して、自分に合う使いやすいものを見つけていきたいですね。