AdminLTEの導入手順を解説 - エンジニア日記

はじめに

Laravelで管理画面を作りたい人向けに、無料で高機能なUIテンプレート「AdminLTE」を導入する方法を解説します。

この記事では、Laravel 12 に AdminLTE のCSSとJSを組み込む方法を、なるべくシンプルに紹介します。

1. AdminLTEとは？

AdminLTE は Bootstrapベースの管理画面テンプレートで、以下の特徴があります：

ダッシュボードやテーブル、チャートなどが豊富
無料・商用利用OK（MITライセンス）
Bootstrap 4 または 5 に対応（AdminLTE v3 / v4）

👉 AdminLTE公式サイト

2. AdminLTEのインストール

※Laravelプロジェクトは既に作成されているものとします。

AdminLTEをLaravelに統合するのに手っ取り早いのは jeroennoten/laravel-adminlte のパッケージをインストールすることです。 composerを利用してインストールしてみましょう。

composer require jeroennoten/laravel-adminlte

インストールが終わったらアセットをプロジェクトに展開します。

php artisan adminlte:install

/config/adminlte.php や /public/vendor 配下にAdminLTEを利用するにあたって必要なCSSやJavaScriptが展開されています。

3. AdminLTEをLaravelに設定

/resources/views に adminlte.blade.php を以下で作ってみましょう。こちらの内容は 👉公式のwiki にも載ってます。

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

@section('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    <script> console.log("Hi, I'm using the Laravel-AdminLTE package!"); </script>
@stop

作成できたら /routes/web.php に以下を追加します。

Route::get('/adminlte', function() {
    return view('adminlte');
});

追加できたら以下でサーバを起動して http://localhost:8000/adminlte にアクセスしてみましょう。そうすると以下のような画面が表示されると思います。

簡単にAdminLTEを導入できましたね。

4. ログイン画面を作ってみる

管理画面なのでログイン画面も作ってみたいですよね。以下のコマンドを実行してみましょう。

php artisan adminlte:install --only=auth_views

そうすると /resources/views/auth に色々とファイルが作成されます。

そうしたら /routes/web.php に以下を追加してみましょう。

Route::get('/login', function() {
    return view('auth.login');
});

サーバを起動した状態で http://localhost:8000/login にアクセスすると以下のような画面が表示されます。

こちらは /vendor/jeroennoten/laravel-adminlte/resources/views/auth/login.blade.php を使用しているので、カスタマイズしたい場合はこちらのファイルをコピーして触ってみましょう。

5. おすすめ教材📘

Laravelの教科書バージョン10対応 [ 加藤じゅんこ ]

価格:3300円
(2025/6/27 22:37時点)

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内直人 ]

価格:2420円
(2025/6/27 22:39時点)

6. まとめ

Viteやnpmを使わず、すぐにUIを確認できる
ロゴなどを触りたい場合は /config/adminlte.php に設定を変更すれば簡単

エンジニア日記

現役エンジニアの役に立てばいいなと思い立ち上げたブログ

【Laravel 12対応】AdminLTEを導入する手順