マスジョイ
PR
Laravel
更新:2025/03/15

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

はるか
はるか
エラーページ、味気ないと離脱増える。カスタマイズする？
ふゅか
ふゅか
そうね！Laravelなら簡単にカスタムできるわよ！404とか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ファイルを作成しておくだけで、対応するエラーページを自動的に呼び出せます。

はるか
はるか
Blade使えば、エラーページを作れる。resources/views/errors/ に配置するだけ。
ふゅか
ふゅか
そうそう！例えば `404.blade.php` を作成すれば、404エラー時に自動で表示されるわ！

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() を呼び出すようにすれば、意図的にエラーページを確認できます。

PR
ホームに戻る