WEB制作関連

404エラーページ作成のススメ

通常サイトにアクセスしていてページが削除されていたり、タイプミスなどでURLが間違っているとエラーページが表示されますよね。

ただこれでは何らかの目的でサイトに訪れたユーザーを逃してしまいます。まるで店員さんに商品を尋ねたら探しもせずに「置いてなければないですねー。」と言われたようなものです。

そこでエラーページの設置方法と表示するといいんではないかという要素をまとめてみました。

まずリクエストのエラーには以下があります。

401 Unauthorized パスワード制限など認証が必要なときに、正しく認証されなかった場合に表示されるエラーページ
403 Forbidden パーミッションの設定が正しくない、または 『 .htaccess 』 で特定のホスト・IPの許可/制限を行っていて弾かれた場合のエラーページ
404 Not Found リクエストされたページが無い場合に表示されるエラーページ
500 Internal Server Error CGIのエラーや 『 .htaccess 』 の設定ミスの場合に表示されるエラーページ

ここから、URLのタイプミスや削除したページが検索エンジンやブックマークに残ったままでおこる可能性が高い404エラーの対策ページを作成することにします。

ちなみに本サイトはチカッパさんを利用しているのでデフォルトでは以下のようなエラーページが出ます。

100921_4.jpg

ではエラーページにはどういった情報が必要でしょうか。
まずは、なんでエラーページに飛ばされたかを伝えてあげる必要がありますね。

お探しのページは見つかりませんでした。
URLがすでの削除されているかURLが間違っている可能性があります。

といった具合にユーザーにどうしてエラーページに飛ばされたかを伝えます。

URLのタイプミスであればアドレスバーを確認してもらえばいいのですが、ここで重要なのはこのユーザーは、サイト自体に興味をもってくれているということと他のコンテンツでも目的の情報を手に入れてもらえる可能性があるということです。

なのであわせてサイト内検索やサイトマップへの案内やコンテンツのリコメンドを表示してあげます。ちなみにこのサイトでは以下のようにエラーページを用意しています。

エラー転送の設定方法

転送にはhtaccessを使用します。以下のように記述して対象としたいディレクトリにアップします。
※最後の行に改行がないとエラーになります。
※パーミッションを「604」とします。

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

これでエラーの際に「/file_not_found.html」へと転送されます。ここは作成したページのURLにあわせてください。ここでは一応401・403・500のときもエラーページに転送されるようにしています。

エラー表示の参考サイト

またエラー表示の参考サイトをいくつか紹介します。

エラーとあわせてサイト内検索の案内とコンテンツの一覧が表示されています。 100921_1.jpg

検索ボックスとあわせて「検索ワードランキング」もあり、ユーザーの離脱率をさげています。

100921_2.jpg

ユーザビリティが高いというかなんか面白かったので。エンタメ系であればこういったのもありかもしれませんね。

100921_3.jpg

冒頭で店員さんに「置いてなければないですねー。」と言われたようと書きましたが、企業サイトやECサイトなんかではこのページがしっかりしていると接客姿勢も好印象に感じられるのでぜひ作成することをおすすめします。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    便利なアイコン配布サイト10+1

    アイコンを作成の際に利用する便利なサイトをまとめましたので紹介します。…

  2. WEB制作関連

    HTML5でできることがひと目で分かるWEBサイトまとめ

    話題のHTML5ですが、書籍やセミナーもどんどん増えてきてますね。そん…

  3. WEB制作関連

    今どきなUIデザインサンプル35個

    アプリやWebサービスのインターフェイスに役立ちそうなUIサンプルです…

  4. WEB制作関連

    期待感あふれるクリエイティブなComingSoonページ25個

    WEBサイトの公開やサービスの開始などを告知するcoming soon…

  5. WEB制作関連

    必ず入れておきたいポピュラーなフリーフォント30選

    どこかで見たことのあるあのフォントを含め、何かと重宝しそうなフリーフォ…

  6. WEB制作関連

    国内WEBデザインギャラリー厳選まとめ

    国内のWEBデザインのギャラリーサイトのまとめです。ギャラリーサイトは…

  1. Design Items

    ナイスアイデアなショッピングバッグ
  2. WEBディレクターズマニュアル

    WEBディレクターがやってはいけない7つの事。
  3. Design Items

    思わず採用したくなるクリエイティブな履歴書
  4. 話題・トレンド

    Web Designing 2014年5月号に執筆させてもらいました。
  5. WEBマーケティング

    WEB探 vol.02『東京スカイツリー』
PAGE TOP
Top