読者です 読者をやめる 読者になる 読者になる

ウェブと食べ物と趣味のこと

IT企業で働いています。PCのTIPS、格安SIM、電力自由化、アフィリエイト、SEO関連の記事を書いてます。困った方の参考になる記事を心掛けます。

【CSSフレームワーク】Bootstrap3の管理画面用テンプレートまとめ【全部無料】

サイト運営

f:id:photoblg:20160616221701p:plain

こんにちは。Webデザインはあまり得意ではないケーです。

デザインが苦手なエンジニアでもレスポンシブ対応済みのページを割りと簡単に用意できるのがCSSフレームワークです。

そんなCSSフレームワークの中で最も有名なのがBootstrap(ブートストラップ)で、Twitter社が開発・提供、オープンソースで公開されているフロントエンドツール。

Bootstrapでも管理画面用のテンプレートというのがあるんですが、毎回テンプレ探しを繰り返しているのでまとめておきたいと思います。

SB Admin 2

SB Admin 2はブロックごとのパネルがスマートで気に入っています。シンブル好みの方にオススメ。

f:id:photoblg:20160616122611p:plain

f:id:photoblg:20160616122746p:plain

f:id:photoblg:20160616122809p:plain

|f:id:photoblg:20160616122957p:plain:w180 f:id:photoblg:20160616123047p:plain:w180 f:id:photoblg:20160616123140p:plain:w180

ライセンス

MIT License

デモ

http://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html

ダウンロード

SB Admin 2 - Free Bootstrap Admin Theme - Start Bootstrap

Admin LTE

Bootstrapっぽさが薄めのテンプレート。細かいUIがよく出来ており、ここまで必要になることはないんですが無駄に使ってみたくなるパーツが多い。

同サイトには有料のPremium Admin Templateも多数あるので他と違ったデザインを使いたい場合は20ドル程度なので購入してもよいかも。

f:id:photoblg:20160616124044p:plain

f:id:photoblg:20160616124114p:plain

f:id:photoblg:20160616124231p:plain

f:id:photoblg:20160616124253p:plain:w180 f:id:photoblg:20160616124344p:plain:w180 f:id:photoblg:20160616124422p:plain:w180

ライセンス

MIT License

デモ

https://www.almsaeedstudio.com/preview

ダウンロード

Free Bootstrap Admin Template

Bootstrap-Admin-Theme

つい最近使ってみたテーマ。派手さはないがシンプルで使いやすい。レスポンシブ時のメニューがデフォルトだと上部にそのまま残るのがやや野暮ったいが、まあ問題なし。

f:id:photoblg:20160616130743p:plain

f:id:photoblg:20160616130721p:plain

f:id:photoblg:20160616130810p:plain

f:id:photoblg:20160616130533p:plain:w180 f:id:photoblg:20160616130618p:plain:w180 f:id:photoblg:20160616130650p:plain:w180

ライセンス

MIT License

デモ

http://vinceg.github.io/Bootstrap-Admin-Theme-3/index.html

ダウンロード

https://github.com/VinceG/Bootstrap-Admin-Theme-3

Gentallela

多数のチャートとフォームが目を引くテンプレート。Errorページも用意されていて統一感のあるページが作れそう。Eコマース向けのページもあり用途に幅が広がりますね。今度使ってみたい。

f:id:photoblg:20160616212557p:plain

f:id:photoblg:20160616212755p:plain

f:id:photoblg:20160616212832p:plain

f:id:photoblg:20160616212943p:plain:w180 f:id:photoblg:20160616212903p:plain:w180f:id:photoblg:20160616213248p:plain:w180

ライセンス

MIT License

デモ

https://colorlib.com/polygon/gentelella/index.html

ダウンロード

GitHub - puikinsh/gentelella: Free Bootstrap 3 Admin Template

CHARISMA

9種類のテーマ(スキン)を選べるテンプレート。一度サイトで使ったことがあるが、パネル単位で隠したり、削除したりできるUIが弄っていて面白い。

f:id:photoblg:20160616214853p:plain

f:id:photoblg:20160616214439p:plain

f:id:photoblg:20160616215006p:plain

f:id:photoblg:20160616214244p:plain:w180 f:id:photoblg:20160616214325p:plain:w180f:id:photoblg:20160616214401p:plain:w180

ライセンス

Apache License v2.0

デモ

http://usman.it/themes/charisma/

ダウンロード

http://usman.it/free-responsive-admin-template/

Metro

Windows8のパネル(Metro)ライクなカラフルなテーマ。ToDoリストやTicketなどのパーツが充実。

f:id:photoblg:20160616220630p:plain

f:id:photoblg:20160616220645p:plain

f:id:photoblg:20160616220707p:plain

f:id:photoblg:20160616220734p:plain:w180f:id:photoblg:20160616220823p:plain:w180 f:id:photoblg:20160616220855p:plain:w180

ライセンス

MIT License

デモ

http://jiji262.github.io/Bootstrap_Metro_Dashboard/

ダウンロード

https://github.com/jiji262/Bootstrap_Metro_Dashboard

Dush Gum

ポップなデザインがかわいいテンプレート。無料版は15ページ、プレミアム版(15ドル)は33ページ+40個のプラグイン、4つの違うチャートプラグイン、Eメールページ、チャットページ、地図、アドバンスフォーム、テーブル、アップローダー、エディター、価格テーブル、完全なプロフィールページとかなり充実している。

f:id:photoblg:20160616223254p:plain

f:id:photoblg:20160616223342p:plain

f:id:photoblg:20160616223411p:plain

f:id:photoblg:20160616223435p:plain:w180f:id:photoblg:20160616223507p:plain:w180f:id:photoblg:20160616223536p:plain:w180

ライセンス

CC0

デモ

http://blacktie.co/2014/07/dashgum-free-dashboard/

ダウンロード

http://blacktie.co/2014/07/dashgum-free-dashboard/

Dark Admin

黒が基調のクールなテンプレート。

f:id:photoblg:20160616225141p:plain

f:id:photoblg:20160616225209p:plain

f:id:photoblg:20160616225233p:plain

f:id:photoblg:20160616225318p:plain:w180f:id:photoblg:20160616225335p:plain:w180f:id:photoblg:20160616225401p:plain:w180

ライセンス

MIT License

デモ

http://www.prepbootstrap.com/bootstrap-theme/dark-admin/preview/index.html

ダウンロード

http://www.prepbootstrap.com/bootstrap-theme/dark-admin/

Metis

通知関連のインターフェースが充実しているのでユーザー個別に何か出来るアプリなどでも使えそう。Bootstrapっぽくないデザインも好まれるかも。

f:id:photoblg:20160616221701p:plain f:id:photoblg:20160616221735p:plain f:id:photoblg:20160616221818p:plain

f:id:photoblg:20160616221858p:plain:w180f:id:photoblg:20160616221939p:plain:w180f:id:photoblg:20160616222029p:plain:w180

ライセンス

MIT license

デモ

https://colorlib.com/polygon/metis/

ダウンロード

https://github.com/puikinsh/Bootstrap-Admin-Template

最後に

いかがでしたでしょうか。無料でここまでクオリティの高いテンプレートが使えるなんて便利な世の中になりましたね!

この手のテーマは新しいのがどんどん出てくるので、また良いのがあったら随時更新していきたいと思います。