このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

エラーページをオリジナルデザインにカスタマイズする

記事Jun. 16th,2015
Sep. 11th,2018
ウェブサイトの閲覧中にエラーが発生した時に表示される味気ないエラーページをオリジナルデザインのエラーページに変更する方法。

エラーページ

エラーページとは?

エラーページとは何らかの原因でウェブページを開くことができなかった時に代わりに表示されるページのことです。「404 Not Found」や「503 Service Unavailable」といったメッセージはインターネットを使用している人は一度は見たことはあると思います。この“404”、“503”といった数字は後述する“HTTPステータスコード”のうち“エラーコード”と呼ばれるもので、これらを表示するページのことを“エラーページ”と呼びます。

エラーページの例

エラーページは通常ブラウザで用意されているものやサーバーで用意されているものが表示されます。

デフォルトの404エラーページ
“Internet Explorer”の404エラーページ

デフォルトのエラーページは上のようにとても味気ないもので見たユーザーに戸惑わせてしまいます。しかし、このエラーページは独自の内容にカスタマイズすることができます。

紹介する設定方法はサーバーの設定ファイルとなる“.htaccess”が使用できることが前提になります。サーバーによっては使用できない場合がありますので事前に確認してください。

デフォルトの「404 Not Found」などと表示されるエラーページではユーザーは何が原因でこのページが表示されるのかわからないうえ、前のページに戻るしかないのでもしユーザーが検索エンジンや外部のウェブサイトからリンクを辿って訪れたとしたらそこで閲覧をやめてしまいます。

デフォルトの403エラーページ

エラーページにナビゲーションや他のコンテンツへのリンクがあればユーザーはウェブサイトの他のコンテンツを見てくれるかもしれません。

また、カスタマイズしたエラーページは検索エンジンの情報を収集する検索クローラーのクローラビリティも向上します。リンクを辿ってエラーページへやってきた検索クローラーはデフォルトのエラーページだとそこが行き止まりとなってしまいそれ以上ウェブサイト内を巡回できなくなってしまいます。人間のユーザー向けと同様エラーページにナビゲーションや他のコンテンツへのリンクがあると検索クローラーもそのリンクを辿ってより多くのページを巡回してくれます。

エラーコード

HTTPステータスコードとは?

ブラウザでインターネット上のウェブページを閲覧する時、通常“HTTP(HyperText Transfer Protocol)”という通信規格が使用されます。このHTTP通信では以下のような流れで通信が行われます。

  • クライアント(ユーザー)がウェブページを公開しているサーバーへ向けてリクエストを送信します。
    リクエストはサーバーへ「このページを見せてください」などと要求を出すこと。
  • リクエストを受けたサーバーは問題がなければこのリクエストに応答する準備をします。
  • サーバーがクライアントへレスポンスを返します。
    レスポンスはサーバーが要求された情報を検索した結果をクライアントへ渡すこと。
  • レスポンスに問題がなければ返されたHTML文書(ウェブページ)がブラウザに表示されます。

この過程でクライアントとサーバーは“HTTPステータスコード”を使用して互いの状態(ステータス)をやり取りしています。

このHTTPステータスコードは3桁の数字で表され、大まかに分けて5つに分類されます。

100番台 “Informational”
クライアントからのリクエストをサーバーが処理中であることを示します。サーバーがクライアントにリクエストについて追加の情報を要求する場合などに返されます。
200番台 “Success”
クライアントからのリクエストをサーバーが受付に成功したことを示します。ウェブページが正常に表示された時はほとんどの場合ステータスコード“200”が返されます。
300番台 “Redirection”
クライアントがリクエストした情報は別の場所へ移動していることを示します。
400番台 “Client Error”
クライアントからのリクエストに対してクライアント側の問題で正常なレスポンスを返せないことを示します。
500番台 “Server Error”
クライアントからのリクエストに対してサーバー側の問題で正常なレスポンスを返せないことを示します。

HTTPステータスコードのうち400番台と500番台は一般に“エラーコード”と呼ばれ、エラーコードが返されると“エラーページ”がブラウザに表示されます。

エラーコード

エラーコードは“400~426”の間で23種類、“500~510”の間で11種類ほどあります。ここではよく見られるエラーコードを取り上げます。

400 Bad Request
ユーザー側から送られたURLなどの情報がサーバー側で理解できなかった場合に表示されます。Cookieが破損している場合などに表示されることがあります。
401 Unauthorized
ユーザー認証やパスワードが設定されているURLにアクセスし、ユーザ名、パスワードが正しく入力されなかった時に表示されます。
403 Forbidden
サーバー側でアクセスが禁止されているURLにアクセスしたときに表示されます。
404 Not Found
削除されたり移動されたりしてページが存在しないURLにアクセスしたときに表示されます。
500 Internal Server Error
CGIやPHPなどプログラムに問題がある場合などサーバー内部でエラーが発生したときに表示されます。
503 Service Unavailable
アクセスが集中していたり、サーバ上で重たい処理が実行されている場合などサーバーが過負荷状態で一時的にウェブページが表示できない場合に表示されまます。

オリジナルのエラーページの作り方

HTML文書の書き方

エラーページをHTML文書として作る場合は通常のウェブページを作成するときとほとんど変わりありません。

ただし、ページの中に埋め込むリンクや画像のURLは“ルート相対パス”である必要があります。“相対パス”を使用した場合サブディレクトリでエラーが発生したときに階層がずれてリンク切れが起きたり画像が表示されません。

ルート相対パス”はルートディレクトリを基準とした相対パスで“/(スラッシュ)”から始まります。 “www.example.com/page.html”であれば“/page.html”、
“www.example.com/dir/page.html”であれば“/dir/page.html”、
のように記述します。

また、“ルート相対パス”にする代わりにbase”要素を使用することもできます。

Internet ExplorerではエラーページのHTML文書のファイルサイズが512バイト以下だとブラウザのデフォルトのエラーページが優先して表示されます。なのでエラーページのファイルサイズが512バイト以上になるように作成する必要があります。

理想的なエラーページ

冒頭でも取り上げたように、デフォルトのエラーページは味気なくて、意図せず表示されると戸惑ってしまうものです。少しでもこの戸惑いを和らげ、引き続きウェブサイトのほかのコンテンツを見てもらうためにもエラーページを工夫する必要があります。

以下のようなエラーページを作成するとウェブサイトの利便性が高まります。

エラーを伝える明確なメッセージ
“404 Not Found”、“500 Internal Server Error”というわかりにくい文言ではなく何が起きて何が問題なのかを明確に伝えられるメッセージを記載する。
解決方法の提案
エラーに対してユーザーがどう対処したらいいのかについての情報やウェブサイトの管理者へ報告する方法を記載する。
オプションの提供
サイト内検索、人気のあるコンテンツやウェブサイトのトップページへのリンクなどで見たいコンテンツを探す手段や他に興味があるコンテンツを見つける手段を提供する。
デザインの一貫性
ナビゲーションなどがあり、ウェブサイトのほかのページと同一のデザインにする。

エラーページの種類によって必要なもの不要なものがあります。例えばサーバー側の問題が原因の500エラーや503エラーの場合は他のコンテンツへのリンクがあったとしてもそのリンク先もエラーになる可能性が高いです。

ユーザーの利便性を考えたエラーページとすることが大切です。

エラーページの文言

前述したとおり、エラーページに表示される文言にはなぜそのエラーページが表示されているのかとそのエラーに対してユーザーがどのように対処したら良いのかが書いてあるべきです。

以下はエラーページごとの文言の例です。

400 Bad Request
リクエストされた内容をサーバーが理解できませんでした。
ブラウザのキャッシュやCookieを削除すると解消される場合があります。
401 Unauthorized
認証に失敗しました。
IDもしくはハスワードが正しくありません。
403 Forbidden
指定されたURLへのアクセス権限がありません。
404 Not Found
お探しのページが見つかりません。
URLに誤りがあるか、お探しのページは移動もしくは削除された可能性があります。
500 Internal Server Error
サーバーエラーが発生しました。
サーバーの問題でお探しのページを表示できません。
再度時間をおいてアクセスしてください。
503 Service Unavailable
一時的にアクセスできません。
混雑のためアクセスしにくくなっています。
再度時間をおいてアクセスしてください。

このウェブサイトのエラーページ

例としてこのウェブサイトのエラーページを紹介します。

400番台のエラーページには他のページと同じようにナビゲーションやウェブサイト内の検索機能を設けています。

400エラーページ
401エラーページ
403エラーページ
404エラーページ

500番台のエラーページは他のページへのリンクがあっても同様にアクセスできない可能性が高いのでメッセージのみにしています。

500エラーページ
503エラーページ

オリジナルのエラーページの設定方法

“.htaccess”とは?

エラーページをオリジナルものに変更するには“.htaccess”という特殊なファイルを記述します。

“.htaccess”はサーバーソフトウェアにApacheを用いたサーバーでディレクトリ単位でさまざまなことを設定できる設定ファイルです。

“.htaccess”はプレーンテキストなので“メモ帳”などのテキストエディタで作成することができます。“.htaccess”を使用すると特定のディレクトリやファイルへのアクセスの禁止やIDとパスワードの入力を求めるユーザー認証、他のURLへのリダイレクト(転送)の設定などを行うことができますが、ここではエラーページの設定についてのみ紹介します。

“.htaccess”の書き方

エラーページをオリジナルのものに変更するには“.htaccess”に以下のように記述します。

ErrorDocument [Status Code] [URL]

ErrorDocument”に続いて“[Status Code]”にはHTTPステータスコードの3桁の数字を、“[URL]”には作成したエラーページのURLをそれぞれ半角スペースで区切って記述します。ここで記述するURLは“ルート相対パス”である必要があります。

これを設定したいエラーページの数だけ記述します。設定しなかったエラーコードが返された場合はデフォルトのエラーページが表示されます。

実際に“.htaccess”に記述すると以下のようになります。

ErrorDocument 401 /error/401.html
ErrorDocument 403 /error/403.html
ErrorDocument 404 /error/404.html
ErrorDocument 500 /error/500.html

この例ではHTTPステータスコード“404”が返された場合“www.example.com/error/404.html”がエラーページとして表示されます。

保存する際の文字コードは1バイトのASCII文字以外含まないのであれば“SHIFT-JIS”でも“EUC-JP”でも“UTF-8”でも大丈夫ですが、“UTF-8”で保存する場合“BOM”をつけると動作しなくなることがあります。また、“.htaccess”の最後に空行を入れる必要があります。

BOM(Byte Order Mark)”は複数のバイトなどを並べる順序の種類である“エンディアン”を判別するために挿入される値です。“メモ帳”で編集している場合は“UTF-8”で保存すると自動的に“BOM”がつけられるのでデフォルトの“ANSI”のまま保存するのが無難です。

これらが記述できたら“.htaccess”として保存します。パソコン上で“.(ドット)”から始まるファイル名がつけられない場合は“htaccess.txt”などと保存してアップロード時に“.htaccess”にファイル名を変更します。

“.htaccess”をアップロードする

FTPクライアントソフトでは転送モードは“アスキー転送モード”でアップロードします。“バイナリ転送モード”でアップロードした場合正しく動作しない場合があります。また、ファイルの属性(パーミッション)は“604”に設定しますが、通常はアップロードした時点で“604”になっていることが多いです。

アスキー転送モード”はテキストデータを送るモードで改行コードの変換を行います。
バイナリ転送モード”は画像などのバイナリファイルをそのまま送るモードで改行コードの変換は行いません。
間違った転送モードでファイルを転送するとファイルが破損してしまう場合があります。

“.htaccess”で記述した設定の有効範囲はその“.htaccess”をアップロードしたディレクトリとそれ以下のすべてのディレクトリとなります。ウェブサイト全体に対して有効にする場合はルートディレクトリにアップロードします。

アップロードができたら“.htaccess”が必ず正しく動作しているかを確認してください。

“.htaccess”の記述の間違いなどが原因で正しく動作していないと500エラーになって“.htaccess”の有効範囲となるすべてのウェブページが閲覧できなくなります。

うまくいかない場合は何か書き間違えていないか(全角になっている、余計な文字が入っているなど)、エラーページのURLが間違えていないか最後に空行が入っているか文字コードや転送モードがあっているかなどを再度確認してください。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク