danna labo. vol.3

404ページの作成

    [works]

誰も気付いてないと思いますけど、このサイトにはイラストがもう一枚あります。
それは、エントリーやディレクトリがないページにアクセスした際に表示される、404ページで掲載しているイラストです。

404ページのイメージ

間違ったURLでアクセスした時に表示されるのが、404ページです。
IE6であればPC内のHTMLを、他のブラウザはWebサーバが用意するページ、もしくはサーバ会社が用意するページを表示しますが、 表示されるものはとても素っ気なく、みんな同じ。
Not Found
The requested URL xxx was not found on this server.
って書かれたページですね。
Webのユーザビリティの観点からだと、誤った操作を行った場合、理由と解決方法を適切に表示すべきですが、 せっかく自分でサイトを作っているのだから、見えない所もこだわりたいですよね〜。

ちなみに、このサイトの404ページは「jskweb.com/」のあとに適当な文字列を入れて頂くか、 こちらで見れます。404という事で、まだ作成途中のイラストですが。。。

このサイトはrnoteというblogツールで作られているので、エントリーがない場合のテンプレートを上のイメージの様にしていますが、 間違ったURLへのアクセス時に表示させるページは、.htaccessファイルで制御可能。
企業サイトならこの辺は必須の作業なので、仕事で作成する事が多いですが、いつも忘れてしまうのでメモを兼ねて紹介します。

アクセスしたアドレスをアドレスバーにそのまま表示する場合

ErrorDocument 404 /var/www/html/xxx/xxx.html

ドキュメントルートからの絶対パス

エラーページのアドレスに移動させる場合

ErrorDocument 404 http://www.xxx/xxx.html(URL)

URLそのままの記載。404に該当する場合、記載されたURLに移動(リダイレクト)

401 (認証失敗)、403(閲覧禁止)などは、404を該当番号に置き換え

で、上述した通り、ユーザビリティを考えた場合、記載した方がよい内容は、

  • このページ(404)の意味
  • 考えられる動作の可能性(間違ったURL、サーバから削除された等)
  • 目的のページへの移動方法

って感じですが、他にも楽しめる要素を盛り込めると、サイトの価値を上げれるんじゃないかと個人的に思ってます。 ゲームの裏技的な感じで。