Webサイトを運営していて、URLの入力ミスで味気ない「404 Not Found」や、システムエラー時に無機質な「500 Internal Server Error」の画面が出てくると、ユーザーは一気に冷めて離脱してしまいます。
これらのエラー画面を、サイトのデザインに合わせたオシャレなオリジナル画面に変えることは、ユーザー体験（UX）を高める上で非常に重要です。
今回は、Nginxでエラー画面をカスタマイズする方法を、「①サーバー全体で一括設定するパターン」と「②プロジェクト（WEBサイト）ごとに個別に設定するパターン」の2つのアプローチで、ステップ・バイ・ステップで解説します！
共通の準備：まずはカスタムエラー画面を作る
どちらのパターンを実装するにしても、まずは表示するためのオリジナルHTMLファイルが必要です。今回は例として、/var/www/html/error/ というディレクトリを作って、そこにファイルを配置してみましょう。
# エラー画面専用のディレクトリを作成
sudo mkdir -p /var/www/html/error
# 404用のHTMLを作成して編集
sudo nano /var/www/html/error/404.html404.html のサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページが見つかりません (404)</title>
<style>
body { text-align: center; font-family: sans-serif; background: #f9fafb; color: #4b5563; padding: 50px; }
h1 { font-size: 48px; color: #ef4444; }
p { font-size: 18px; }
a { color: #3b82f6; text-decoration: none; font-weight: bold; }
</style>
</head>
<body>
<h1>404 - Page Not Found</h1>
<p>お探しのページは移動したか、削除された可能性があります。</p>
<p><a href="/">トップページへ戻る</a></p>
</body>
</html>同じ要領で、500エラー用の 500.html も作成しておいてください。
パターン1：サーバー全体で一括設定する(グローバル設定)
1台のサーバーで複数のWEBサイトを運営している場合、すべてのサイトで共通の「会社のロゴ入りエラー画面」などを一括適用したい場合に便利です。
Step 1：メインの設定ファイルを開く
Nginxの根幹の設定ファイルである nginx.conf を開きます。
sudo nano /etc/nginx/nginx.confStep 2：http ブロック内に追記する
ファイル内にある http { ... } のブロックの中に、以下の error_page の設定を書き加えます。
http {
# ... 既存の各種設定 ...
# 404と500エラーの共通カスタマイズ設定
error_page 404 /global_error/404.html;
error_page 500 502 503 504 /global_error/500.html;
# エラーファイルの実際の置き場所をNginxに教えてあげる
location /global_error/ {
alias /var/www/html/error/;
internal; # ⚠️超重要：ブラウザから直接「/global_error/404.html」にアクセスされるのを防ぐ
}
}Step 3：テストと反映
# 設定のチェック
sudo nginx -t
# 問題なければリロード
sudo systemctl reload nginxこれで、どの設定ファイル（バーチャルホスト）でエラーが起きても、この共通画面が表示されるようになります。
パターン2：各プロジェクト(設定ファイル毎)で個別に変更
「プロジェクトAはポップなデザイン」「プロジェクトBはシックなコーポレートサイト」というように、WEBサイトのデザインやブランドに合わせて個別にエラー画面を切り替えたい場合の王道の手順です。
前回の記事で作った sk.conf（または対象の個別設定ファイル）を編集します。
Step 1：個別設定ファイルを開く
sudo nano /etc/nginx/sites-available/sample.confStep 2：server ブロック内に追記する
対象となるサイトの server { ... } の中に設定を記述します。今回は、そのプロジェクト専用のディレクトリ（例：/ver/www/html/errors/）にHTMLが置いてあると仮定します。
server {
listen 80;
server_name example.com;
# プロジェクトAのメインルート
location / {
root /var/www/html;
index index.html;
}
# --- ここからエラー画面の個別設定 ---
error_page 404 /project_error/404.html;
error_page 500 502 503 504 /project_error/500.html;
# エラー画面の読み込み先（aliasを使用）
location /project_error/ {
alias /var/www/html/errors/;
internal; # 直接アクセス禁止のセキュリティ設定
}
}Step 3：テストと反映
設定を書き換えたら、必ずNginxをリロードして反映させます。
sudo nginx -t
sudo systemctl reload nginx💡 Nginxエラーカスタマイズの「重要な落とし穴」と対策
設定したのにうまく動かない場合、以下のNginxの仕様に引っかかっている可能性が高いです。
1. 512バイト未満のエラー画面はInternet Explorerや一部ブラウザで無視される
作成したカスタムHTMLファイルのファイルサイズ（容量）が512バイト未満（文字数が非常に少ない）の場合、ブラウザ（特に古いブラウザや一部のスマホブラウザ）が「中身がスカスカだから、ブラウザ標準のエラー画面を出そう」と気を利かせてしまい、カスタム画面が無視されることがあります。
対策: HTMLのコメント文（
<!-- コメント文をたくさん書く -->）などを入れて、ファイルサイズを1KB以上に膨らませておくと確実に表示されます。
2. internal ディレクティブの効果
設定内の location ブロックに書いた internal; は、「Nginxの内部システムからの転送（エラー発生時など）の時だけこのフォルダを開く」という意味になります。これを入れておかないと、悪意あるユーザーが
に直接アクセスして、システムエラーでもないのにエラー画面を閲覧できてしまうため、セキュリティ上必ず記述してください。
3. どうやってテストする？（500エラーの起こし方）
404エラーは存在しないURL（http://IP/hogehoge）を叩けば簡単にテストできますが、500エラーは意図的に起こすのが難しいです。
確認したい場合は、一時的に設定ファイル内に以下のような「即座に500エラーを返すルート」を作ってブラウザからアクセスすると、安全にテストできます。
# テストが終わったら消してください
location /test500 {
return 500;
}まとめ
| 設定パターン | メリット | 主な用途 |
| 全体設定（グローバル） | 1箇所の書き換えで全サイトに適用できる | 会社独自の共通エラー画面、メンテナンス画面 |
| プロジェクト別設定 | サイトのデザインや世界観を完全に統一できる | サービスごとの個別ブランディング、LP、アプリ |
エラー画面をただの「バグ報告」にするのではなく、「迷子になったユーザーを優しくナビゲーションする場所」としてデザインすることで、サイトの品質は一段と上がります。ぜひ試してみてください！
コメント