エラーページをオリジナルデザインにカスタマイズする｜web design－havin' a coffee break

＃

エラーページとは？

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

＃

エラーページの例

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

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

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

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

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

＃

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は“ルート相対パス”である必要があります。“相対パス”を使用した場合サブディレクトリでエラーが発生したときに階層がずれてリンク切れが起きたり画像が表示されません。

また、“ルート相対パス”にする代わりに“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番台のエラーページには他のページと同じようにナビゲーションやウェブサイト内の検索機能を設けています。

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

＃

“.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”の最後には必ず空行を入れる必要があります。

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

＃

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

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

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

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

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

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