Moz - SEOとインバウンドマーケティングの実践情報

創造性あふれる404エラーページを作ろう＆参考になる404ページ紹介

よく私たちがクライアントにお勧めするアドバイスの1つに、404エラーページを必ず適切な構造のものにしておくこと、というのがある。一般に私たちは、次のうち少なくとも1つを404エラーページに盛り込んでおくよう勧めるのよ。

存在しないページにアクセスしようとしたことを伝えるメッセージ
検索ボックス
サイトマップへのリンク
ホームページへのリンク

さらに404エラーページといえど、デザイン的にも美的にもサイトの他のページと共通していないとだめ。404エラーページをたくさん見てきたけど、すごく平凡で、サイトのデザインを反映していないページのなんと多いことか。なんだかそこだけ浮いた感じで、ユーザーを混乱させてしまいかねない。

もう1つユーザーを困惑させるのが、勝手にホームページにリダイレクトしてしまうこと。SEOの立場から言わせてもらうと、正しくないURLを301でリダイレクトするのは、ユーザーがどのページにアクセスしようとしたかが正確にわかっていて、そのページにリダイレクトしてあげられる場合なら有効な手段と言える。でも、404エラーが起きたときにホームページにリダイレクトしてしまうと、アクセスしようとしたページが存在しないことがユーザーに伝わらず、ユーザーは「どうしてホームページに戻ってしまったんだろう」と思って困惑してしまう可能性があるわ。

リダイレクトの話はさておき、デザインの話に戻しましょう。404エラーページだからといって、必ずしも「あなたがアクセスしたページは存在しません」的なお決まりの表現を使わなくてもいいのよ。Weird Asia Newsで相方を務めるBrent Csutorasが、私にSmashing Magazineの特集記事へのリンクを渡してくれたんだけど、とてもクリエイティブで、創意に富んだ404ページがいくつも出ていたわ。その中の多くは、クリエイティブかつ革新的なやり方でユーザーと関わりを持つもので、すばらしかった。

私はあなたを知らないけれど、404ページが出たとしても、見た目が格好良かったり笑わせてくれるなら、滅多なことじゃ機嫌を損ねたりなんかしないわ。

それではその特集記事から、私のお気に入りの404ページをいくつか挙げておくわね。

Radiohead At Easeの404ページ。これはすごく粗野で乱暴な感じがしてステキ。メッセージは付箋紙に殴り書きした感じになってるし、このメッセージがホームページへのリンクになっていて、ちゃんと404ページ内に検索ボックスもある。
Luminous（などいくつかのサイト）では、俳句で綴った粋な404メッセージを表示するのよ（Luminousの場合、バーボンでも飲んでひと息つくよう勧めるなんて、なかなか心憎い演出。それに検索ボックスとサイト管理者への連絡フォームのリンクも忘れずに配置している）。
Jeremy Fuksaの404ページは、自虐型のデザインね。標準的なスタイルから、良い感じに外れてるわ。ホームページに戻るリンクもあるし、連絡先メールアドレスのリンクもある。
Next Wave Performanceは、404エラーが起きて困惑している気の毒なユーザーに手を貸すため、面白くて簡単なフローチャート式のエラーページを用意しているわね。
一方Expansion Broadcast Radioは、あろうことかユーザーを嫌なやつ呼ばわりしているのだけれど、それでもサイト管理者への連絡フォームリンクと検索ボックスは提供しているの。
CSS Leakは、404ページに辿り着いてしまったユーザーにも何か手みやげを、ということで2種類のカクテルのレシピを載せている。ステキ！

どう、わかった？

404ページだからって、堅苦しく機械的で、まったく感情のないメッセージにする必要はないのよ。目を見張るようなグラフィックを使うことだって、パーソナライズ化することだってできるし、1つ2つジョークを入れたり、何かのレシピを表示したって良いじゃない。ユーザーが探していたページを見つけるのに必要なリソースさえ忘れなければ（そして、サイトやブランドのイメージを崩さないものなら）、クリエイティブな404ページは、好ましいユーザー体験を提供する革新的な手段になるの。

ちなみに、Web担の404エラーページはこんな感じだ。