404エラーページに大幅に手を入れた。今まではフッタに載せていた人気のあるページなどを整理して、URLが間違っていることへの注意の喚起と修正候補の推薦をメインにし、その下に人気のあるページのリストを、最後に大きめの検索フォームを配置ということにした。JavaScriptが無効だとほとんど意味をなさないのが欠点。403や410、500などの他のエラーページにはまだ手をつけていない。
まずはページが見つからないということをよくある理由(ミスタイプとか)と共に訪問者に知らせるメッセージを。これは今までどおりではあるのだけど、箇条書きにして読みやすくした。横に長いと読まれないことが多いので、こういった読んで欲しいメッセージは短く箇条書きの方が向いていると思う。その上でURL修正候補を見つけることができたら、その箇条書きの前に「もしかして」というキャッチーな単語と共に挿入するようにした。この時URLからお尻を少し削って親ディレクトリのURLに、つまりhttp://example.com/foo/bar.htmlで404 Not Foundになった場合はhttp://example.com/foo/のリンクも挿入するようにもした。URL修正候補を探すスクリプトについてはまた別の機会に。
人気のあるページのリストの作成ははてなブックマークが提供しているこのサイトの人気エントリーのフィードをYQLで処理して生成した。
検索は最後の手段であるべきだという考えから、検索フォームは最下部に移動させた。普通は実際にあるかないかわからないページを検索するくらいなら、戻るボタンを押すか、タブ(ウィンドウ)を閉じてしまうと思う。とはいうものの無ければ無いで問題があると思うので最下部にして、少し大きめにしてアピールさせた。
ということで404エラーページの構成要素は以下のようになった。
最後の3つはJavaScriptによるものになっている(サイト内検索は検索向けAdSenseによるもの)。そのためJavaScript無効な環境(RequestPolicy等で別ドメインのスクリプトを拒否している人も含めて)だと、それらは意味をなさない。これは欠点ではあると思うのだけど、あえてそういう環境を利用している人は404エラーページに遭遇した時にどうすれば良さそうか判断できる人なんではないかなとも思う。という言い訳はどうでしょうか？
ページの全体的なデザインはこのサイトのほかのコンテンツと同じにしてしまった。面倒だったからというのが大きな理由。ただこれではひと目でエラーページとわからないので、もっとシンプルなデザインに変更するべきかもしれない。シンプルなデザインにする場合でも訪問者に威圧を与えてはいけないので、赤や黄色のようないわゆる警戒標識や規制標識に使われるような色は避けた方が良いと思う。エラーページの役割は訪問者に警告等を与えることではなくて、違うところに着いてしまったのでこっちに来ると良いですよ的な指示を示唆することだから。
以下は参考にしたURL。参考にはしたけど遵守して作成したわけではない。
ニールセン先生の記事は10年前だったよ……。couldのエントリは遊びじゃない404エラーページのデザインについて触れられている数少ない日本語のリソース。Googleのウェブマスター/サイト所有者向けのヘルプは異様に充実しているので、他のページも熟読すると……日が暮れる。
また、GoogleやMicrosoftからはエラーページをカスタマイズするためのツールも提供されている。
上記URLからコピペまたはダウンロードできる。Googleの方は試してみたんだけど、自分の想像したようにはURL修正候補が出てくれなかった。が、URLが動的であったり単なる連番だったりするサイトの場合には自前でURLの修正を行うのはかなり難しいと思うので、こういったバックエンドに多くの情報を持っているツールを利用するのが賢いと思う。
リファラから色々するのは今のところ見送り。URL修正候補のスクリプト内で切り出している単語をあらかじめ検索フォームに流し込むとかはやっても良いかなぁと思う。必要ならば和訳して。