MENU
  1. ホーム
  2. Apache
  3. Apacheでモバイルとデスクトップ別にエラーページを設定する方法

Apacheでモバイルとデスクトップ別にエラーページを設定する方法

Apache

Apacheを使用するウェブサイトでは、ユーザーが存在しないページにアクセスした際に表示されるエラーページのカスタマイズが重要です。特にモバイルユーザーとデスクトップユーザーでは画面サイズや使用環境が異なるため、それぞれに適したエラーページを設定することで、ユーザーエクスペリエンスを向上させることができます。

本記事では、Apacheを使ってモバイルとデスクトップで異なるエラーページを表示する方法を詳しく解説します。mod_rewriteを活用したUser-Agentの判別方法や、.htaccessファイルを用いた具体的な設定例を紹介します。これにより、モバイルファーストのサイト設計や、ブランドイメージを損なわないカスタムエラーページを実現できるようになります。

目次

Apacheでカスタムエラーページを設定する基本方法


Apacheでは、特定のエラーコードに対してカスタムエラーページを設定するために、ErrorDocumentディレクティブを使用します。これにより、404 Not Foundや500 Internal Server Errorなどのエラーが発生した際に、デフォルトのシンプルなエラーメッセージではなく、オリジナルのエラーページを表示できます。

ErrorDocumentディレクティブの基本構文


ErrorDocumentディレクティブは、以下のような形式で記述します。

ErrorDocument 404 /custom_404.html
ErrorDocument 500 /custom_500.html
  • 404: ステータスコード（例：404は「ページが見つからない」エラー）
  • /custom_404.html: 表示するHTMLファイルのパス

エラーページの配置


エラーページのHTMLファイルは、Apacheのドキュメントルート（/var/www/html/など）に配置します。以下の例では、custom_404.htmlをドキュメントルートに設置します。

/var/www/html/custom_404.html

設定を有効にする方法


.htaccessファイル、またはApacheのメイン設定ファイル（httpd.confやapache2.conf）にErrorDocumentディレクティブを追加します。
設定を反映させるためには、以下のコマンドでApacheを再起動します。

sudo systemctl restart apache2

これで、404エラーが発生した際にcustom_404.htmlが表示されるようになります。次のステップでは、モバイルとデスクトップで異なるエラーページを設定する方法を解説します。

モバイルとデスクトップのリクエストを識別する方法


モバイルとデスクトップで異なるエラーページを表示するには、クライアントのリクエストから「どのデバイスがアクセスしているか」を判別する必要があります。Apacheでは、mod_rewriteモジュールを使用してUser-Agentを基にリクエストを識別できます。

User-Agentとは


User-Agentとは、ブラウザやデバイスがウェブサーバーに送信する情報で、アクセス元のデバイスやブラウザの種類を示します。
例えば：

  • デスクトップブラウザ: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
  • モバイルブラウザ: Mozilla/5.0 (Linux; Android 10; Pixel 4)

このUser-Agentを解析して、モバイルとデスクトップを区別します。

mod_rewriteの導入と有効化


まずmod_rewriteが有効になっているか確認し、有効でない場合は以下のコマンドで有効化します。

sudo a2enmod rewrite
sudo systemctl restart apache2

モバイルとデスクトップの判別例


以下の設定を.htaccessファイルに記述することで、モバイルユーザーとデスクトップユーザーを区別できます。

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|iPhone|BlackBerry" [NC]
RewriteRule ^404.html$ /mobile_404.html [L]

RewriteCond %{HTTP_USER_AGENT} "Windows|Macintosh|Linux" [NC]
RewriteRule ^404.html$ /desktop_404.html [L]
  • RewriteCond: User-Agentが「Mobile」「Android」「iPhone」などを含む場合にモバイル用エラーページへリダイレクト
  • RewriteRule: 通常の404.htmlリクエストをモバイルまたはデスクトップ向けページに振り分け

これにより、同じエラーページへのリクエストでも、モバイルユーザーはmobile_404.htmlが、デスクトップユーザーはdesktop_404.htmlが表示されます。

次は、RewriteCondとRewriteRuleを使った設定例をさらに詳しく見ていきます。

RewriteCondとRewriteRuleの基本設定例


モバイルとデスクトップで異なるエラーページを表示するためには、RewriteCondとRewriteRuleを適切に組み合わせてリクエストを制御します。ここでは、実際の設定例を基に、mod_rewriteを活用した基本的な構成を解説します。

RewriteCondとRewriteRuleの役割

  • RewriteCond: 条件を指定します（例: User-Agentの種類）。条件が一致した場合に次のRewriteRuleが適用されます。
  • RewriteRule: 条件に基づいて、リクエストのURLを別のURLにリダイレクトします。

基本的な.htaccessの記述例


以下は、404エラーページをモバイルとデスクトップで分ける具体的な設定例です。

RewriteEngine On

# モバイルデバイス向けのリダイレクト
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|iPhone|BlackBerry" [NC]
RewriteRule ^404.html$ /mobile_404.html [L]

# デスクトップデバイス向けのリダイレクト
RewriteCond %{HTTP_USER_AGENT} "Windows|Macintosh|Linux" [NC]
RewriteRule ^404.html$ /desktop_404.html [L]

設定の解説

  • RewriteEngine On: mod_rewriteのエンジンを有効にします。
  • RewriteCond %{HTTP_USER_AGENT} “Mobile|Android|iPhone”: User-Agentが「Mobile」「Android」「iPhone」を含む場合、次のRewriteRuleが適用されます。
  • RewriteRule ^404.html$ /mobile_404.html [L]: 404.htmlにアクセスがあると、モバイル用のmobile_404.htmlが表示されます。
  • [L]: このルールが一致したら、処理をそこで終了します（他のRewriteRuleは実行されません）。

動作確認とテスト方法

  1. Apacheの設定ファイルに上記の内容を記述し、サーバーを再起動します。
sudo systemctl restart apache2
  1. スマートフォンとPCから存在しないページ（例: example.com/404.html）にアクセスして、それぞれが異なるエラーページにリダイレクトされるか確認します。

次のセクションでは、モバイル向けのエラーページを作成する際のデザインや軽量化のポイントについて解説します。

モバイル向けのエラーページを作成する際のポイント


モバイルユーザー向けのエラーページは、表示速度や操作性を重視し、シンプルかつわかりやすいデザインが求められます。ここでは、モバイルエラーページの作成時に意識すべきポイントを紹介します。

1. シンプルなデザインと軽量化


モバイル環境では、回線速度が遅い場合や通信量を抑える必要があるため、画像やスクリプトを最小限に抑えることが重要です。

具体例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 Not Found</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            padding: 20px;
        }
        h1 {
            font-size: 24px;
        }
        p {
            font-size: 16px;
        }
        a {
            color: #007BFF;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>ページが見つかりません</h1>
    <p>申し訳ありませんが、お探しのページは存在しません。</p>
    <p><a href="/">トップページに戻る</a></p>
</body>
</html>
  • CSSはインラインで記述し、HTTPリクエストを削減
  • フォントサイズや間隔をモバイル画面向けに最適化

2. クリックしやすいボタンやリンク


リンクやボタンはタップしやすい大きさ（40px以上）に設定し、誤タップを防ぎます。

例

a {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007BFF;
    color: white;
    border-radius: 5px;
}

3. トップページへの誘導とコンテンツ検索の提案


「トップページへ戻る」「検索する」など、ユーザーが次に取るべきアクションを提示しましょう。

<p><a href="/">トップページに戻る</a></p>
<p><a href="/search">サイト内検索</a></p>

4. 最小限の画像とアイコン


画像は必要最小限に抑え、表示速度を優先します。SVGやアイコンフォントを利用すると、軽量で拡張性があります。

5. エラーメッセージの工夫


ユーザーが迷わないよう、親しみやすい言葉やユーモアを交えてストレスを軽減します。
例：「ページが見つかりませんでした。どこかに行ってしまったようです。」

次のセクションでは、デスクトップ向けエラーページのデザインと最適化について詳しく説明します。

デスクトップ向けエラーページのデザインと最適化


デスクトップ向けのエラーページでは、画面の広さを活かしたレイアウトや、ブランドイメージに沿ったデザインが重要です。デスクトップユーザーは情報量の多いページにも対応しやすいため、リンクや案内を充実させることでユーザーの離脱を防げます。

1. 視覚的に魅力的なデザイン


デスクトップエラーページは、ブランドカラーやロゴを活用し、公式サイトらしいデザインを施します。ページ全体をフルスクリーンで使い、視覚的にインパクトを持たせましょう。

例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }
        h1 {
            font-size: 72px;
            margin: 0;
        }
        p {
            font-size: 20px;
            margin: 10px 0;
        }
        a {
            padding: 14px 28px;
            margin-top: 20px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 18px;
        }
        a:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>お探しのページは見つかりませんでした。</p>
    <a href="/">トップページに戻る</a>
</body>
</html>

2. ナビゲーションを強化する


ユーザーがサイト内を回遊できるよう、主要カテゴリや検索バーを設置するのが効果的です。

<a href="/contact">お問い合わせ</a>
<a href="/products">商品一覧</a>
<a href="/faq">よくある質問</a>

3. エラーページにユーモアやブランドストーリーを追加


「ページが見つかりませんでした。」という無機質なメッセージではなく、ユーモアやブランドストーリーを交えることでユーザーの心を掴みます。
例：「迷子のようです。ですが、他にも面白いコンテンツがたくさんあります！」

4. 画像やイラストを活用する


デスクトップ向けでは、背景画像やイラストを使って視覚的に魅力的なページを作成します。
例：404エラーを示す遊び心のあるイラストやキャラクターを配置。

5. アニメーションや動きのあるデザイン


CSSやJavaScriptを使い、シンプルなアニメーションでユーザーの目を引くのも効果的です。

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
body {
    animation: fadeIn 1.5s ease-in;
}

6. SEO対策を意識


404ページにもSEO要素を組み込みます。エラーページに適切なタイトルタグやメタディスクリプションを設定し、Google検索でインデックスされるようにします。

<meta name="robots" content="noindex, follow">

次のセクションでは、実際の.htaccess設定例を詳しく紹介します。

実際の.htaccess設定例


モバイルとデスクトップで異なるエラーページを表示するためには、.htaccessファイルに具体的なルールを記述します。ここでは、404エラーページをモバイルとデスクトップで振り分ける実践的な設定例を紹介します。

基本構成


以下のコードを.htaccessファイルに追加することで、User-Agentに基づいてモバイルユーザーとデスクトップユーザーを識別し、それぞれに対応したエラーページを表示できます。

# mod_rewriteエンジンの起動
RewriteEngine On

# モバイルデバイス向けのエラーページ設定
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|iPhone|BlackBerry" [NC]
RewriteRule ^404.html$ /mobile_404.html [L]

# デスクトップデバイス向けのエラーページ設定
RewriteCond %{HTTP_USER_AGENT} "Windows|Macintosh|Linux" [NC]
RewriteRule ^404.html$ /desktop_404.html [L]

# 通常の404エラーページ（振り分けに失敗した場合のフォールバック）
ErrorDocument 404 /generic_404.html

設定の詳細解説

  • RewriteEngine On
    mod_rewriteを有効にします。記述がない場合、RewriteCondやRewriteRuleは機能しません。
  • RewriteCond %{HTTP_USER_AGENT}
    User-Agentヘッダーの内容を基に条件を設定します。「Mobile」「Android」「iPhone」などが含まれていればモバイルと判断します。デスクトップは「Windows」「Macintosh」「Linux」などを条件に指定します。
  • RewriteRule ^404.html$ /mobile_404.html
    404.htmlへのアクセスが発生した場合、モバイルユーザーはmobile_404.html、デスクトップユーザーはdesktop_404.htmlへリダイレクトされます。
  • ErrorDocument 404 /generic_404.html
    振り分け条件に一致しなかった場合のデフォルトエラーページを指定します。

ファイル構成例

/var/www/html/
│
├── .htaccess
├── mobile_404.html
├── desktop_404.html
└── generic_404.html

動作確認方法

  1. .htaccessをドキュメントルートに配置します。
  2. モバイル端末とPCから存在しないURLにアクセスします（例: https://example.com/404.html）。
  3. デバイスに応じたエラーページが表示されることを確認します。

トラブルシューティング

  • エラーページが表示されない場合
  • .htaccessファイルが正しいディレクトリに配置されているか確認します。
  • mod_rewriteが有効になっているか以下のコマンドで確認します。
    bash sudo a2enmod rewrite sudo systemctl restart apache2
  • Apacheのエラーログ（/var/log/apache2/error.log）を確認し、記述ミスがないかチェックします。

次のセクションでは、設定後のテスト方法やトラブルシューティングについて詳しく解説します。

テストとトラブルシューティングの方法


モバイルとデスクトップで異なるエラーページを設定した後は、正しく機能しているかを確認し、問題が発生した場合は迅速に対応する必要があります。ここでは、テスト方法とトラブルシューティングの手順について解説します。

1. 動作確認の手順

1-1. モバイルとデスクトップでアクセス

  1. 存在しないURL（例: https://example.com/404.html）にアクセスします。
  2. スマートフォンやPCで、それぞれmobile_404.htmlまたはdesktop_404.htmlが表示されるか確認します。
  3. 表示されるエラーページが意図したものであるかをチェックします。

1-2. User-Agentを変更してテスト

Google Chromeの「開発者ツール」を使うことで、PC上でモバイルサイトの確認が可能です。

  1. Chromeでサイトを開きます。
  2. F12またはCtrl + Shift + Iを押して「開発者ツール」を開きます。
  3. [Device Toolbar]（スマートフォンアイコン）をクリックして「モバイルモード」に切り替えます。
  4. 存在しないページにアクセスし、モバイル用エラーページが表示されるか確認します。
curl -A "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)" https://example.com/404.html

curlを使用して、特定のUser-Agentを指定し、アクセスできるかを確認する方法もあります。

2. トラブルシューティングの方法

2-1. エラーページが表示されない場合

チェックポイント

  • .htaccessがドキュメントルート（/var/www/html/など）に正しく配置されているか確認します。
  • mod_rewriteが有効になっているか確認します。
sudo a2enmod rewrite
sudo systemctl restart apache2
  • Apacheのエラーログを確認します。
sudo tail -f /var/log/apache2/error.log

2-2. User-Agentの判別がうまくいかない場合

  • RewriteCondで記述したUser-Agentが正しいか確認します。
  • NCオプションがついているかチェックします（大文字小文字を無視する）。
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|iPhone" [NC]
  • テスト用に以下のような簡易エラーページを作成し、アクセス時にどのページが表示されているかを判別します。
<h1>モバイルエラーページ</h1>
<h1>デスクトップエラーページ</h1>

2-3. .htaccessの記述ミス

  • RewriteRuleやRewriteCondの記述ミスがないか確認します。
  • 設定後にApacheを再起動しているか確認します。
sudo systemctl restart apache2

3. よくあるエラーと対処法

  • 403 Forbiddenエラー
  • .htaccessに誤記がある可能性があります。ルールを一時的にコメントアウトして原因を特定します。
  # RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|iPhone" [NC]
  # RewriteRule ^404.html$ /mobile_404.html [L]
  • 500 Internal Server Error
  • .htaccessの記述ミスが原因です。Apacheのエラーログを確認し、該当行を修正します。

次のセクションでは、カスタムエラーページの応用例として、404以外のエラー（500や403）への対応方法を解説します。

カスタムエラーページの応用例


モバイルとデスクトップで404エラーページを分ける設定が完了したら、他のエラーコードにも同様の方法を適用できます。500 Internal Server Errorや403 Forbiddenなど、重要なエラーに対して適切なエラーページを作成することで、ユーザー体験をさらに向上させることができます。

1. 500 Internal Server Errorのカスタマイズ


サーバー内部で問題が発生した場合に表示される500エラーは、ユーザーにとって混乱を招く可能性があります。シンプルなメッセージだけでなく、「しばらく待って再度アクセスしてください」などの具体的なアクションを提示しましょう。

設定例

# モバイル向け500エラーページ
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|iPhone|BlackBerry" [NC]
RewriteRule ^500.html$ /mobile_500.html [L]

# デスクトップ向け500エラーページ
RewriteCond %{HTTP_USER_AGENT} "Windows|Macintosh|Linux" [NC]
RewriteRule ^500.html$ /desktop_500.html [L]

ErrorDocument 500 /generic_500.html

HTML例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>500 Internal Server Error</title>
    <style>
        body { text-align: center; padding: 50px; font-family: Arial, sans-serif; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>500</h1>
    <p>サーバーで問題が発生しました。しばらくしてから再度お試しください。</p>
    <p><a href="/">トップページに戻る</a></p>
</body>
</html>

2. 403 Forbiddenのカスタマイズ


アクセス権限がない場合に表示される403エラーは、ユーザーにとってフラストレーションを与える可能性があります。「権限が必要です」といった説明や、ログインページへのリンクを表示することで離脱を防げます。

設定例

# モバイル向け403エラーページ
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|iPhone|BlackBerry" [NC]
RewriteRule ^403.html$ /mobile_403.html [L]

# デスクトップ向け403エラーページ
RewriteCond %{HTTP_USER_AGENT} "Windows|Macintosh|Linux" [NC]
RewriteRule ^403.html$ /desktop_403.html [L]

ErrorDocument 403 /generic_403.html

HTML例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>403 Forbidden</title>
    <style>
        body { text-align: center; padding: 50px; font-family: Arial, sans-serif; }
        h1 { font-size: 48px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>403</h1>
    <p>このページにアクセスする権限がありません。</p>
    <p><a href="/login">ログインページへ</a></p>
</body>
</html>

3. メンテナンスページの設置


サーバーメンテナンス中にアクセスがあった場合のために、503エラーページをカスタマイズするのも有効です。ユーザーにメンテナンスの終了時間を伝えることで、安心感を与えます。

設定例

ErrorDocument 503 /maintenance.html

HTML例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>503 Service Unavailable</title>
    <style>
        body { text-align: center; padding: 50px; font-family: Arial, sans-serif; }
        h1 { font-size: 50px; color: #d9534f; }
        p { font-size: 22px; }
    </style>
</head>
<body>
    <h1>503</h1>
    <p>現在、サイトはメンテナンス中です。</p>
    <p>終了予定時間: 本日18:00</p>
</body>
</html>

4. 多言語対応のエラーページ


エラーページを多言語対応にすることで、訪問者の国や地域に応じたエラーメッセージを表示できます。mod_rewriteを使用してAccept-Languageヘッダーを判別し、それに応じたエラーページを表示します。

設定例

RewriteCond %{HTTP:Accept-Language} ^ja [NC]
RewriteRule ^404.html$ /ja_404.html [L]

RewriteCond %{HTTP:Accept-Language} ^en [NC]
RewriteRule ^404.html$ /en_404.html [L]

次のセクションでは、これまでの設定を総括し、プロジェクト全体の安定性向上に向けたまとめを行います。

まとめ


本記事では、Apacheを用いてモバイルとデスクトップで異なるカスタムエラーページを設定する方法について解説しました。

基本的なErrorDocumentディレクティブの使い方から、mod_rewriteによるUser-Agent判別の手法、実際の.htaccess設定例まで具体的に説明しました。さらに、404エラーだけでなく、500 Internal Server Errorや403 Forbiddenなど、他のエラーコードにも応用できるカスタムエラーページの作成例を紹介しました。

モバイル向けエラーページは軽量でシンプルに、デスクトップ向けは視覚的に魅力的で情報量を豊富にすることで、ユーザー体験を大幅に向上させることができます。

適切なエラーページの設定は、ブランドイメージを守り、ユーザーの離脱を防ぐ重要な要素です。これを機に、貴サイトのエラーページを見直し、よりユーザーフレンドリーな環境を構築していきましょう。

Apache
カスタマイズ Apache モバイル対応 エラーページ

コメント

コメントする

目次