.NET開発者のためのブログメディア
Bootstrapで管理画面（ダッシュボード）作成！【おすすめの無料テンプレート紹介】
ホームページやブログサイトを作る際は必ず、管理者だけがアクセスできる「管理画面」が必要です。とはいえ、一から管理画面を作成するのは意外と大変です。そこで活躍するのが「Bootstrap」。今回は、Bootstrapを使ったテンプレートを紹介しながら、実際に管理画面を作成していきたいと思います。
- PG
- BootstrapはHTML、CSS、JavaScriptから構成されたWebフレームワークでしたね。
- PL
- はい。Bootstrapのテンプレートを使用すれば、デザイン性と機能性双方を兼ね備えた管理画面を作成することだってできるんですよ。
目次
すべて無料｜Bootstrapで管理画面を作成する際のおすすめテンプレート
はじめに、Bootstrapで管理画面を作成する際のおすすめテンプレートを3つ紹介していきたいと思います。
おすすめテンプレート1｜Admin LTE
Admin LTEは、Bootstrap3ベースのダッシュボードテンプレートです。ご覧のとおり、スッキリとしたシンプルなデザインが特徴となっており、上記のような表やグラフを簡単に組み込むことができます。
おすすめテンプレート2｜BlurAdmin
「THE・スタイリッシュ」をそのまま提言したようなテンプレートであるBlurAdmin。amChartsやChart.jsなどのチャートライブラリがサポートされていることも人気の理由です。
おすすめテンプレート3｜Startmin
多様なナビゲーションバーやドロップダウンリストを使えるStartmin。
余分な要素が一切ない、フラットデザインが特徴です。
実際にBootstrapで管理画面を作成してみよう
テンプレートをいくつか紹介したところで、実際に管理画面を作成したいと思います。※今回は一番はじめにご紹介した「Admin LTE」を使っていきます。
- Admin LTEをダウンロード
- 展開して「starter.html」を開く
ダウンロードページより、Admin LTEをダウンロードしてください。
※今回はAdminLTE-3.0.0を使用しています。
最初の画面はこのようになっていますので、ここから必要な要素を
に追加していきましょう。※必要な要素はディレクトリの中にすべて入っています。（例）
ボタン：pages > UI > buttons.html
図：pages > charts > chartjs.html
- PG
- これらがすべて無料というのは驚きですね。
- PL
- 有料の方が良いことは間違いありませんが、基本機能だけで良ければ無料でも十分間に合いますよ。
Bootstrapのテンプレートを使えば早く綺麗な管理画面が作成できる
ここでは、Bootstrapのテンプレートを用いながら実際の管理画面を作成しました。テンプレートを使うメリットは、やはり「短い時間で作成できること」そして「デザイン性と機能性が高いこと」です。管理画面を早く作りたい方は、活用してみてはいかがでしょうか。
