ある程度デザインされているので、そのまま使い易い
マテリアルデザインを使ったCSSフレームワーク・ライブラリ)は、色や影などがついているので、そのまま利用しても見栄えがそれなりに良い。
社内だけで使う業務アプリや管理画面などには、こうしたライブラリを使えばコンポーネント単位で柔軟に使えて良いと思う。
代表的なのは以下。
- Materialize:動的効果も含め、デザインはピカイチ。
- Material Components for the web:ReactやSvelteなどSPAライブラリと共に使われることもある。
マテリアル系のCSSフレームワークはオリジナルでデザインするときは不向き
前掲の裏返しで、デザイナーさんがオリジナルでデザインしたものをコーディングする際には不向き。
この場合、デザイン性のない、レイアウト(配置)、アニメーション(動的効果)だけを利用できるCSSフレームワークがよい。
例えば、以下のような軽量フレームワーク(CSSだけを使っている)。
- SPECTRE.CSS:凄くシンプル。逆にデザイン性はない。
- Milligram、:Node.jsの公式で使われている。
- Picnic CSS:ドキュメントのデザインが良い(見やすいかは別)
- Pure.css:標準的。
- HiQ:ビルドがPostCSS。
余談:JSをできるだけ排除し、小さい単位で使えるコンポーネント指向のCSSフレームワークがよい
最近は、React、Vue、Svelte、Angularなどコンポーネント指向でのフロント開発が多い。その場合、これらでつくったコンポーネントに対してスタイルを適用していくことになる。
そうなると、できるだけJSの依存性はなく、細かく利用できるものがよい。
この観点から軽量フレームワークであったり、「Material Components for the web」のようなコンポーネント指向のCSSフレームワークが使いやすい。
仮に、Javascriptを使っていても、webpackなどでのビルドがしやすい、名前空間の衝突とかのないものがよい。
Materializeは、デザインやエフェクトは一番良いのだが、コンポーネント指向、ビルドという点では、jQueryでの依存があったりするので、少しおすすめできない。
とはいえ、コンポーネント指向とかあんまり関係なく、見た目だけとりあえずいいなら、Materializeが一番だろう。