管理画面 / ダッシュボードを作成しようとした時に集めた情報ログ

## ダッシュボードUI フロント作成時のメモ

### 背景
- フリーでフロントエンドをやっていると、高い確率で「管理画面」をリニューアルしたい、新規作成したいという依頼を受ける
- デザイナー先行でもサーバーサイド先行でも管理画面系UI設計は難しいため、フロント先行で行くため、認識共有のためにも見本となるものが欲しかった
- フロントらしくjavaScriptフレームワーク連動のものも探した

### 懸念点
- 色々見つかったものの海外の管理画面ってこんなにゴリゴリのグラフ表示ばかりなのだろうか
  - 実務で結局必要なUIはテーブルとフォーム

# メモです

## ダッシュボードUI10選
[Bootstrap製ダッシュボード管理画面テンプレ10選](https://goo.gl/xejRjn)

## UI考察
UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと
https://www.webprofessional.jp/26-steps-product-dashboard-design/

ひどいダッシュボードの法則
http://postd.cc/the-laws-of-shitty-dashboard/


---


### 参考UI

> Pinterest
https://goo.gl/cKVQGY

デザインKit
http://janlosert.com/store/dashboard-ui-kit

ダッシュボードデザインショーケース
https://www.nxworld.net/inspiration/admin-dashboard-design-showcase-1.html


有料ダッシュボードUI
http://binarytheme.com/free-bootstrap-admin-template-siminta/
$5
![](https://gyazo.com/56fb6ab58fba497105b9c70bd9a16922.png)

---



### BlueBox
https://webthemez.com/bluebox-free-bootstrap-admin-template/
$9
![](https://i.gyazo.com/39cd22a5382f982c6cc527ebc5155078.png)


### Materialデザイン
- Free
- BootStrap
http://demos.creative-tim.com/material-dashboard/examples/dashboard.html
![](https://i.gyazo.com/1a53e23f604b7bdaff7af16a45908015.png)


### フレームワーク使用のダッシュボード

Angular
https://www.creative-tim.com/product/paper-dashboard-angular#
![](https://t.gyazo.com/teams/devcap/91dfdc4ae66ea91d4aaae88f6fa939c8.png)

Vue
https://www.creative-tim.com/product/vue-paper-dashboard#
![](https://t.gyazo.com/teams/devcap/b07c66d78a1eac27e12c982279f3833d.png)

React
https://www.creative-tim.com/product/light-bootstrap-dashboard-react
![](https://t.gyazo.com/teams/devcap/68493339eb0a2f5f61b809b9a39177f9.png)


---

### 有料
http://coderthemes.com/velonic_3.0/index.html
$20
![](https://t.gyazo.com/teams/devcap/09230c8738687b387d18994b22f8a606.png)

https://themequarry.com/theme/ample-admin-the-ultimate-dashboard-template-ASFEDA95
$22


## 結果
- 結局日本企業の使う管理画面の殆どは９割テーブルでエクセルと変わらないものが多く、リニューアルとまではなかなか行かなかった
- フロント知見の薄い企業だと、リアクションに難しい感じでした
- すでにBootstrap製のフリーのダッシュボードを導入している企業さんには、必要応じてモジュールとしてGoogle製グラフjsなどを当てて、拡張アップデートなどもボチボチ実装した
- 別途プレゼン力も必要だと思いました
- UIデザイナー兼エンジニアを担当するモチベーションが必要です

## グラフ系jsプラグイン
- 既存の管理画面にものようなjsグラフプラグインは入れたり出来ますね
- 頑張ればある程度レスポンシブにも出来ます

<p data-height="800" data-theme-id="dark" data-slug-hash="MOGBjY" data-default-tab="js,result" data-user="agdg" data-pen-title="Google Charts Basic Bar&LineChart / Responsive Block" class="codepen">See the Pen <a href="https://codepen.io/agdg/pen/MOGBjY/">Google Charts Basic Bar&LineChart / Responsive Block</a> by Asagiri (<a href="https://codepen.io/agdg">@agdg</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### テーブルソートは活用出来そうです
<p data-height="600" data-theme-id="dark" data-slug-hash="eyeXwp" data-default-tab="js,result" data-user="agdg" data-pen-title="Google Chart Ver.2 format JSON" class="codepen">See the Pen <a href="https://codepen.io/agdg/pen/eyeXwp/">Google Chart Ver.2 format JSON</a> by Asagiri (<a href="https://codepen.io/agdg">@agdg</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

---

### 今後

ひとまず今後ゼロイチでCoreUIをVueで制作してみようと思います。
またはフレームワーク不使用でも出来そうであれば公開していくかもしれません。
https://coreui.io/vue/