管理画面を作成する時に有用なツールまとめ

管理画面って?

ウェブサイトやアプリケーションの開発を依頼された時に、よく付加的に依頼されるのは管理画面やダッシュボードのページです。

ただ、この画面を1から作成していると結構時間を取られるので、サクッと開発出来るデザインやツールを調べてみました。

デザインテンプレート

管理画面のデザインは様々な有料・無料のものが既にあるので、是非活用しましょう。正直無料のテンプレートがたくさんあるので、特定の機能やデザインにこだわりがなければ無料で十分かと思います。

おすすめのフリーの管理画面デザインをいくつか紹介します。

Lumino: Free Bootstrap Admin Template

https://medialoot.com/item/lumino-admin-bootstrap-template/

無料。(一部有料)UIも見やすく、で使いやすいデザインです。テーマで色も選ぶことができます。

SB Admin 2

https://startbootstrap.com/themes/sb-admin-2/

無料。少しポップなイメージの管理画面。

Adminator HTML5 Admin Template

https://github.com/puikinsh/Adminator-admin-dashboard

無料。スタイリッシュで機能豊富な管理画面。デモはこちら

Laravelを使用している場合

Laravel-admin

https://laravel-admin.org/docs/

Laravelを使用している人にはとても有用なツール。デザインも機能も提供してくれます。composerを使って簡単にインストール可能。

基本的なCRUDの管理画面を作るにはすぐに作れるのでもってこいだが、更新時の処理やデザインに少しカスタマイズを入れようとすると少々手間がかかる印象です。また、最初の学習コストが少し高いです。

インストール方法はこちら

Voyager

https://voyager.devdojo.com/

こちらも管理画面用のツール。上記の画面のようなデザインの管理画面が作成可能です。Laravel-admin よりも気持ちリッチなデザインの管理画面となります。

データベースの作成やユーザー権限の設定等をブラウザから直感的に操作可能です。

Ruby On Railsを使っている場合

ActiveAdmin

https://activeadmin.info/

見た目のデザインはちょっと味気ない感じですが、サクッとインストールできて、DSLを記述するだけで使える管理画面。こちらもCRUDを超える事をしようとすると大変な印象。

その他のフレームワーク・またはフレームワークを使用していない場合

Pigeon Framework

https://pigeon-fw.com/

時間がない人向け。データベースだけ用意すれば、後はPigeon Frameworkをインストールして設定ファイルを編集するだけで即時リッチなデザインの管理画面が作成可能です。

ユーザー権限・ログ・CSVダウンロード/アップロード機能等、管理画面で必要そうな機能は一通り揃っています。

hook機能により高度なカスタマイズも可能です。

デモはこちら。