ITエンジニア/デザイナ向けにオープンソースを毎日紹介

レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。

主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。

Materializeの使い方

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

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

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

タイポグラフィ。
タイポグラフィ。

グリッド。
グリッド。

フォーム。
フォーム。

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

ラジオボタン。
ラジオボタン。

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

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

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

ナビゲーションバー。
ナビゲーションバー。

カード。
カード。

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

モーダル。
モーダル。

タブ。
タブ。

パララックス。
パララックス。

アコーディオン。
アコーディオン。

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

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

Materialize - Documentation

Dogfalo/materialize

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch