2018年6月26日

デザイン

Bootstrap 4による管理画面 Material Dashboard 【今日のGitHubトレンド】

目次

  1. はじめに
  2. Material Dashboardとは
  3. 使い方
  4. まとめ

はじめに

GitHubのトレンドリポジトリをご紹介していくこのシリーズ。
今回はマテリアルデザインによる管理画面をBootstrap 4ベースで作ることができる、Material Dashboardをご紹介します。

product.gif (908.0 kB)
公式リポジトリより

多くのWebサービス開発において、管理者用にデータの確認をしたり、編集をしたりする管理画面が必要となります。
どうしても管理画面のデザインはサービスのデザインに比べて手を抜いてしまうことが多く、またUIも使いづらくなりがちです。

以前の記事でtablerという管理画面をご紹介しましたが、今回ご紹介するMaterial Dashboardは、簡単にカスタマイズもしやすいマテリアルデザインの管理画面を作ることができるライブラリです。

Material Dashboardとは

Material Dashboardは先述の通り、Bootstrap 4製のマテリアルデザインによる管理画面ライブラリです。

Bootstrapとは

Bootstrapはモバイルファーストのフロントエンドフレームワークです。
最新のバージョンは4.1となっています。
レスポンシブデザインを手軽に実装できることから、デザイナーはもちろんエンジニアにも人気のフレームワークです。

マテリアルデザインとは

マテリアルデザインとは、Googleが提唱したデザインの概念です。
直訳すると「物質的なデザイン」となり、簡単に言ってしまうと、現実世界のものに触れたり操作しているようなUIにすることで、日常的に使われるインタフェースとなる、という考え方です。
別の記事で今後解説しますが、詳しくはこちらの公式ガイドラインを参考にしてみてください。

Material DashboardはこうしたBootstrapの実装しやすさ、マテリアルデザインのインタフェースとしての使いやすさを兼ね備えた管理画面を作ることができます。
 2018-06-26 12.11.08.png (381.4 kB)

こちらにデモがありますので、ぜひ触ってみてください。

使い方

では実際にMaterial Dashboardを使っていきます。

リポジトリをクローンする

こちらのコマンドでリポジトリをローカルにクローンします。
git clone git@github.com:creativetimofficial/material-dashboard.git

少しファイル数が多いですが、このようになります。

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/

実際にプロジェクトに使ってみる

では実際にMaterial Dashboardを使用してみましょう。

まずassets/cssassets/js ディレクトリを実際に使うCSSやJavaScriptのディレクトリにコピーします。

そしてファイルで必要なファイルを読み込んでいきます。

CSSのインポートはこちらです。
<link href="assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet" />

またJavaScriptはこちらを読み込みます。

<!--   Core JS Files   -->
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
<script src="assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>

<!--  Google Maps Plugin    -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>

<!-- Chartist JS -->
<script src="assets/js/plugins/chartist.min.js"></script>

<!--  Notifications Plugin    -->
<script src="assets/js/plugins/bootstrap-notify.js"></script>

<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="assets/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>

プラグインなどは必要に応じて外してください。
jQueryやpopper.js、bootstrap-material-designは依存している為、読み込むようにしてください。

フォントはGoogle FontsやFont Awesomeを使用します。

<!--     Fonts and icons     -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">

あとは公式リファレンスの通り作っていくだけですが、テンプレートとして用意されているtemplate.html、もしくはexamplesの中のhtmlファイルを雛形としていくのが良いでしょう。

template.htmlをブラウザで見るとこのようになっています。

 2018-06-26 17.20.43.png (36.0 kB)

見覚えのあるマテリアルデザインで管理画面が実装できそうですね!
template.htmlはこちらで確認できます。

まとめ

管理画面はデザイナーが入らず、エンジニア側だけで実装することも多いのではないでしょうか。
そんなときにこのMaterial Dashboardを使うと、見やすくデザイン性も高いものになりそうです。

2

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP