Laravelで開発されたWebアプリケーションにおいて、存在しないページにアクセスされた場合には404エラーが発生します。この時に表示されるエラーページが無機質であれば、ユーザーはすぐにサイトを離脱してしまう可能性が高くなります。
この記事では、Laravelでユーザー離脱を防ぐためのカスタム404エラーページの作成方法と、UXを意識したデザインの工夫について解説します。
Laravelのエラーページの仕組み
Laravelでは、HTTPエラー（404、500など）に対応するエラーページは、resources/views/errors ディレクトリにBladeテンプレートとして格納されています。
404エラー時には、errors/404.blade.php が表示されます。存在しない場合は、フレームワークが提供するデフォルトのエラー画面が表示されます。
404エラーページの作成手順
1. ファイルを作成する
以下の場所にファイルを作成します：
resources/views/errors/404.blade.php
2. エラーページの内容を記述する
下記は、基本的な404エラーページの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページが見つかりません</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 50px; }
h1 { font-size: 48px; color: #e74c3c; }
p { font-size: 18px; }
a { display: inline-block; margin-top: 20px; text-decoration: none; color: #3498db; }
</style>
</head>
<body>
<h1>404 Not Found</h1>
<p>お探しのページは見つかりませんでした。</p>
<a href="{{ url('/') }}">トップページに戻る</a>
</body>
</html>
スタイルやレイアウトを調整して、サイト全体のデザインと統一感を持たせるとより効果的です。
UXを意識した改善ポイント
ただ「404 Not Found」と表示するだけではユーザーは離脱してしまいます。以下のような工夫を加えることで、ユーザー体験を向上させることができます。
- トップページやサイトマップへのリンクを設置
- 検索フォームを設置し、目的の情報へ誘導
- 人気の記事やおすすめページのリンクを表示
- 親しみやすいイラストやユーモアのある文言を加える
ルーティングレベルでの制御は不要
Laravelでは、存在しないルートにアクセスされた場合は自動的に404例外がスローされ、上記のカスタムエラービューが適用されます。特別な設定やミドルウェアは必要ありません。
ステータスコードの明示も可能
Bladeファイルの中でHTTPステータスコードを明示的に指定することもできます：
@php(http_response_code(404))ただし、通常はerrors/404.blade.phpに配置されていれば、Laravelが自動で処理します。
まとめ
404エラーページは「表示されないことを前提」にされがちですが、実はユーザーの信頼感や回遊率に大きな影響を与える重要な要素です。Laravelではresources/views/errors/404.blade.phpにファイルを置くだけで簡単にカスタマイズができるため、ぜひ積極的に整備しておきましょう。
ユーザー目線の導線設計を心がけることで、「迷子になったユーザー」を自然に本来のページへと導くことができます。
