ホームページやブログサイトを作る際は必ず、管理者だけがアクセスできる「管理画面」が必要です。とはいえ、一から管理画面を作成するのは意外と大変です。そこで活躍するのが「Bootstrap」。今回は、Bootstrapを使ったテンプレートを紹介しながら、実際に管理画面を作成していきたいと思います。

PG

BootstrapはHTML、CSS、JavaScriptから構成されたWebフレームワークでしたね。

PL

はい。Bootstrapのテンプレートを使用すれば、デザイン性と機能性双方を兼ね備えた管理画面を作成することだってできるんですよ。

すべて無料｜Bootstrapで管理画面を作成する際のおすすめテンプレート

はじめに、Bootstrapで管理画面を作成する際のおすすめテンプレートを3つ紹介していきたいと思います。

おすすめテンプレート1｜Admin LTE

Admin LTEは、Bootstrap3ベースのダッシュボードテンプレートです。ご覧のとおり、スッキリとしたシンプルなデザインが特徴となっており、上記のような表やグラフを簡単に組み込むことができます。

Admin LTEの公式サイトはこちら

おすすめテンプレート2｜BlurAdmin

「THE・スタイリッシュ」をそのまま提言したようなテンプレートであるBlurAdmin。amChartsやChart.jsなどのチャートライブラリがサポートされていることも人気の理由です。

BlurAdminの公式サイトはこちら

おすすめテンプレート3｜Startmin

多様なナビゲーションバーやドロップダウンリストを使えるStartmin。
余分な要素が一切ない、フラットデザインが特徴です。

Startminの公式サイトはこちら

実際にBootstrapで管理画面を作成してみよう

テンプレートをいくつか紹介したところで、実際に管理画面を作成したいと思います。※今回は一番はじめにご紹介した「Admin LTE」を使っていきます。

1. Admin LTEをダウンロード

   ダウンロードページより、Admin LTEをダウンロードしてください。
   ※今回はAdminLTE-3.0.0を使用しています。

2. 展開して「starter.html」を開く

   

   最初の画面はこのようになっていますので、ここから必要な要素を

   に追加していきましょう。※必要な要素はディレクトリの中にすべて入っています。
   （例）
   ボタン：pages > UI > buttons.html
   図：pages > charts > chartjs.html

PG

これらがすべて無料というのは驚きですね。

PL

有料の方が良いことは間違いありませんが、基本機能だけで良ければ無料でも十分間に合いますよ。

Bootstrapのテンプレートを使えば早く綺麗な管理画面が作成できる

ここでは、Bootstrapのテンプレートを用いながら実際の管理画面を作成しました。テンプレートを使うメリットは、やはり「短い時間で作成できること」そして「デザイン性と機能性が高いこと」です。管理画面を早く作りたい方は、活用してみてはいかがでしょうか。