Material Dashboard - Googleの提唱するマテリアルデザインを採用した無料の管理画面テンプレート

S 20180625 192507

Googleは現在、新しいデザイン手法「マテリアルデザイン」を提唱し、自社のさまざまプロダクトで採用を進めています。

本日紹介する「Material Dashboard」は、このマテリアルデザインにインスパイアされた無料のBootstrap管理画面テンプレートです。

Web開発者向けのさまざまなリソースを公開しているCreative Timによって公開されているソフトウェアで、マテリアルデザインを採用した管理画面、ユーザープロフィール画面、CMS、CRMなどを素早く作成する事が可能になっています。

基本はBootstrap上に構築されているものですがHTML5版のほかReact、Vue、Angularを採用したバリーエションが存在し、Chrome、Firefox、Edge、Safari、Operaなど各社の主要なブラウザの最新2世代に対応しています。

Material Dashboard の使用方法

Material Dashboardを使用する場合、以下のような方法が利用できます。好みの方法でインストール・ダウンロードすれば良いでしょう。

ダウンロードしたファイルの構造は以下のようになっています。

material-dashboard/
├── assets/
|   ├── css/
|   |   ├── bootstrap.min.css
|   |   ├── material-dashboard.css
|   |   └── demo.css
|   ├── js/
|   |   ├── bootstrap-notify.js
|   |   ├── bootstrap.min.js
|   |   ├── chartist.min.js
|   |   ├── demo.js
|   |   ├── jquery-3.1.0.min.js
|   |   ├── material-dashboard.js
|   |   └── material.min.js
|   ├── sass/
|   |    ├── md
|   |    └── material-dashboard.scss
|   └── img/
|
├── documentation/
├── examples/

examples以下にダッシュボードやユーザープロフィール画面、テーブル、地図などの各種サンプルが格納されています。

実際の画面は以下の通りです。

S 20180625 192507

▲重要な情報を一覧して表示出来るダッシュボード画面です。左側にサイドバー、右側にメインコンテンツという構成になっています。画面右側にある歯車アイコンをクリックするとサイドバーの色やバックグラウンドイメージを変更することができます。

S 20180625 192942

▲ユーザーの情報を表示するユーザープロフィール画面です。

S 20180625 192959

▲多数のデータを一覧表示できるテーブル画面のサンプルです。

S 20180625 193015

地図画面のサンプルです。

S 20180625 193029

通知画面のサンプルです。つうちのスタイルや状態、場所などが設定可能です。

まとめ

Material DashboardはGoogleの提唱するマテリアルデザインを採用した管理画面テンプレートです。無料版のほかさらに多くのコンポーネントやプラグイン、サンプルページを同梱した有料のPROバージョンも販売されています。無料版に機能が不足している場合、有料版を検討するのもありだと思います。

スポンサーリンク