マテリアルデザインが流行っています。Androidアプリ向けが基本と思われますが、アプリに限らずWebでも利用が進んでいます。Google+のように導入が進んでいるサイトもありますし、これからマテリアルデザインを導入しようと考えている方もいるでしょう。 今回はそんなマテリアルデザインのテンプレートMaterial Design Liteを紹介します。Google製のテンプレートだけに機能が充実し、彼らの考えるマテリアルデザインが体現されていると言えるでしょう。

Material Design Liteの使い方

まずはデモから。

パララックスエフェクトになっています。

こんなAndroid風サイトも。

メニューが上に貼り付くようになっています。

下に薄い影が入っています。完全なフラットという訳ではないのもマテリアルっぽさと言う感じでしょうか。

ダッシュボード風。

テキストのみでも見やすく仕上がっていますね。

ブログ風。

ここからは部品の紹介です。まずはバッジ。

ボタン。

カード。

レイアウト。

スピナー。

メニュー。

スライダー。

トグル。

テーブル。

テキストフィールド。

フォーカスするとplaceholderが上にスライドするパターンもあります。

ツールチップ。

最後にタイポグラフィです。

Material Design LiteはあくまでもWebサイト用になりますので、スマートフォン、タブレット、デスクトップと様々なデバイス向けに最適なUI/UXを提供したい時に役立ちそうです。アプリはネイティブのマテリアルデザイン、WebもMaterial Design Liteと共通できるのが良いですね。

Material Design LiteはHTML5/CSS3製のオープンソース・ソフトウェア（Apache License 2.0）です。

Material Design Lite google/material-design-lite