2014年にGoogleが提唱した「マテリアルデザイン」ですが、
ここにきてどんどん増えているように感じます。
最近Wordpressのテーマでも「SANGO」や「JIN」など徐々にマテリアルデザインのものが増えています。
しかしマテリアルデザインのガイドラインには非常に多くの注意点があり、実装するのに苦労します。
そこで活躍するのがCSSのフレームワークで、
これを使用することで簡単にマテリアルデザインを実装することができます。
マテリアルデザインのCSSフレームワークには多くの種類があり、
いったいどれを選んだ方がよいか迷ってしまいます。
今回はマテリアルデザインを簡単に実装できるCSSフレームワークを紹介していきたいと思います。
下にマテリアルデザインのガイドラインのリンクを張っておきますので確認しておいてください。
なお今回紹介するCSSフレームワークはドキュメントがしっかりと用意されているものを紹介します。
Materialize：オススメ度★★★
マテリアルデザインが最も簡単に始めることが出来るのが「Materialize」です。
更新やメンテナンスは大学生が行っており、なにより手軽にマテリアルデザインを始めることができます。
このCSSフレームワークはCSSの知識が少なくてもWebページを作成することができます。
無料のテンプレートとして「ランディングページ」、「ブログ」なども用意されているためCSSを勉強するのにもオススメです。
テンプレートや拡張フレームワークも多く存在するので今後の広がりにも期待が持てます。
下の記事で簡単な利用方法をまとめていますので確認してみてください。
最新バージョンは1.00.2ですので注意してください。
Material Design for Bootstrap：オススメ度★★★
Bootstarpのマテリアルデザインが「Material Design for Bootstrap」です。
Bootstampの記述方法そのままにマテリアルデザインが実装できるのがこのフレームワークです。
また既にVersion 4まで進んでおり、ドキュメントも豊富で有料の拡張テンプレートも既に多く揃っています。
Bootstampを使用したことがある人には大変オススメのCSSフレームワークです。
Material Design for Bootstrap公式
Material Components for the Web：オススメ度★★
Googleが制作・管理しているのが「Material Components for the Web」です。
このフレームワークは「Material Design Lite」の後継であり、現在も開発が続いています。
利用者数はあまりいませんがこれから伸びてくる可能性があるCSSフレームワークです。
Material Components for the Web公式
MUI：オススメ度★★
MUIも昔から人気のCSSフレームワークなのが「MUI」になります。
ドキュメントもしっかりしていますが、シンプルで使いやすくなっております。
フレームワーク内に含まれてる機能は、「Angular」や「React」などのJavaScriptライブライと合わせて使うことも可能です。
無料のテンプレートとして「ランディングページ」、「ブログ」なども用意されているためCSSを勉強するのにもおすすめです。
一から勉強するならばマテリアルデザイン入門がおすすめ
一からマテリアルデザインを勉強したいならば「マテリアルデザイン入門」がオススメです。
初心者にもわかりやすく書かれており、ボリュームも500超もあるためコスパも高い本になっています。
Unreal Engine 4 マテリアルデザイン入門 第2版posted with ヨメレバ
茄子/もんしょ 秀和システム 2017年09月15日
