Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmaterialです。

materialの使い方

materialはフレームワークと言うよりもテンプレートに見えます。

カード風デザイン。

水平なカード。

カラーリングも可能。

アクション付き。

モーダル。

下の方にトーストが出ています。

タブ。

タイル。

ボタン。

フォームエレメント。

ラジオボタンとチェックボックス。

入力値チェック付き。

フローティングラベル。入力を開始するとプレイスホルダーがラベルになります。

こんな感じです。

アイコン付きフォームエレメント。

カレンダー入力。

アイコン。

サイドカラム。

ログインデザイン。Googleっぽい感じですね。

materialはまさにGoogleでよく見られるようなデザインを作ることができます。グリッドなど、フレームワークによくある部品はありませんが、十分にこったデザインのサイトを作ることができるでしょう。

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

Daemonite/material