レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。

Materializeの使い方

今回はスクリーンショット多めに紹介します。

アイコン。これはGoogleが提供しているマテリアルアイコンを使っています。

影。細かい指定が可能です。

タイポグラフィ。

グリッド。

フォーム。

フォーカスが当たると下線が表示されます。

ラジオボタン。

チェックボックス。チェックするとアニメーションが入ります。

ボタン。マウスオーバーで影が入ります。

大きいボタンと無効なボタン。

ナビゲーションバー。

カード。

ダイアログ。右上に出ています。

モーダル。

タブ。

パララックス。

アコーディオン。

Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。

MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

Materialize - Documentation Dogfalo/materialize