Laravel10でエラーページをカスタマイズ!400・500エラーをデザインする方法



「エラーページが味気なく、ユーザーが離脱してしまう…」 そんな悩みを抱えていませんか?
Laravelではデフォルトのエラーページが用意されていますが、無機質な画面が表示されるだけでは、ユーザーの印象も悪くなりがちです。特に、404(ページが見つからない)、500(サーバーエラー)などのエラーページは、適切にカスタマイズすることで、ユーザーの離脱を防ぎ、より良い体験を提供できます。
本記事では、Laravelのカスタムエラーページの作成方法を 初心者でも簡単に実践できる手順 で解説します。
✔ エラーページを統一デザインにする方法
✔ 汎用的に使えるエラーページの作成
✔ 例外ハンドリングを活用したカスタマイズ
これらのポイントを押さえれば、オリジナルデザインのエラーページを作成し、より使いやすいWebサイトを構築できます!
それでは、具体的な手順を見ていきましょう!
1. エラーページの基本的なカスタマイズ
Laravelでは、以下のHTTPステータスコードに対応したBladeテンプレートを resources/views/errors/
ディレクトリに配置するだけで、カスタムエラーページを表示できます。
ステータスコード | 意味 |
---|---|
404.blade.php |
ページが見つからない |
500.blade.php |
サーバー内部エラー |
403.blade.php |
アクセス権限なし |
419.blade.php |
CSRFトークン期限切れ |
このように、ステータスコードごとにBladeファイルを作成しておくだけで、対応するエラーページを自動的に呼び出せます。


2. 具体的なカスタムエラーページの作成
2.1. 例: 404エラーページ
まずは、404エラー時に表示されるページを作成してみましょう。
resources/views/errors/404.blade.php
を新規作成し、以下のコードを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページが見つかりません</title>
@vite("resources/css/app.css")
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="text-center">
<div class="flex items-center justify-center h-screen bg-gray-100">
<div class="text-center">
<h1 class="text-6xl font-bold text-red-500">404</h1>
<p class="text-xl text-gray-600 mt-4 mb-8">お探しのページは見つかりませんでした。</p>
<a href="{{ url('/') }}" class="mt-6 px-4 py-2 bg-blue-500 text-white rounded-lg">ホームへ戻る</a>
</div>
</div>
</div>
</body>
</html>
上記のように、通常のBladeテンプレートと同様にHTMLを記述すればOKです。cssはtailwindcssを使っています。
3. 全てのエラーページのデザインを統一する
複数のエラーページを作っていくと、共通のデザイン(ヘッダーやフッターなど)を使い回したくなることが多いです。そこで、以下のようにエラーページのレイアウトの継承を行ってみましょう。
3.1. 共通レイアウト layout.blade.php
resources/views/errors/layout.blade.php
を作成し、デザインをまとめて管理します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="text-center">
@yield('content')
<a href="{{ url('/') }}" class="mt-6 px-4 py-2 bg-blue-500 text-white rounded-lg">ホームへ戻る</a>
</div>
</body>
</html>
3.2. 404ページを共通レイアウトに適用
上記のレイアウトファイルを継承し、404.blade.php
を以下のように変更します。
@extends('errors.layout')
@section('title', '404 - ページが見つかりません')
@section('content')
<h1 class="text-6xl font-bold text-red-500">404</h1>
<p class="text-xl text-gray-600 mt-4">お探しのページは見つかりませんでした。</p>
@endsection
これで、layout.blade.php
に書いたデザインが自動的に読み込まれ、全てのエラーページで統一された見た目を実現できます。
4. ローカル環境でエラーページを確認する
実際にエラーページをテストしたい場合は、abortを使うことで強制的にエラーを発生させます。
abort(404);
abort(500);
abort(403);
例えば、ローカルのルートにテスト用のエンドポイントを作成し、abort()
を呼び出すようにすれば、意図的にエラーページを確認できます。