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を使うと、見やすくデザイン性も高いものになりそうです。

bootstrapのお仕事に関するご相談

Bageleeの運営会社、palanではbootstrapに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

2

0

AUTHOR

eishis

Eishi Saito 総務

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

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

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

簡単に自分で作れるWebAR

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

palanARへ
palanar

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

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

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

yamakawa

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

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

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

sugimoto

sugimoto

CONTACT PAGE TOP