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エラーページはこんな感じだ。

探している情報を見つけるための要素は含まれていたが、サイト管理者への連絡方法の提示はなかったので、この記事を編集しているときに追加しておいた。

この画像ではわかりにくいが、編集部のスタッフがちょっとした暇を使って作った画像でなごめるので、一度見てみてほしい。

この記事が役に立ったらシェア!
よろしければこちらもご覧ください
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

ビジネスエスノグラフィ
ユーザー中心設計/人間中心設計における、ユーザー調査の方法論の1つ。 ユー ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

data-sprite-position-y="250" data-image-original-width="200" data-image-original-height="125">株式会社ブレインパッド株式会社サイバーエージェント株式会社フレームワークスソフトウェア
[SPONSOR]
株式会社キノトロープ株式会社アイレップユーザーグラム富士通株式会社Sitecore株式会社ミツエーリンクス