豚々拍子

コンピュータ・クラウド情報について書いています。

ユーザー満足度UP!?おしゃれなクリエイティブ404エラーページ3選

f:id:blackwatcher:20160202000925p:plain

少し前の記事ですが、HubSpotの『24 Clever 404 Error Pages From Real Websites』にて、クリエイティブな404エラーページを持つサイトが紹介されていました。各サイトとも非常に工夫されており、おもしろかったので紹介します。ちょっと量が多いので、その中から3つ選んでみました。ご自身のサイトに役に立つかもしれないアイデアが見つかれば幸いです。

そもそも404エラーとは?

ページを紹介する前に、そもそも404エラーとはなにか?についてご説明します。404エラーとは、ユーザーがウェブサイトにアクセスした際に、リクエストしたページが見つからないステータスコードのことを意味します。この現象はクライアント側のエラーであり、アクセスしたページは削除または移動している場合が多いです。それに応じてURLが変更されなかったか、またはアクセスした人が間違ったURLを入力していた場合、404エラーになります。エラーページに到達してしまったユーザーは当然ながら、残念に思ってしまいます。そんな思いをさせないために、各企業工夫を凝らしているのです。

クリエイティブな404エラーページ24選→3選!

1 - Spotify

毎年Spotifyは"その年の音楽"のマイクロサイトを作っています。このサイトで、世界中からサイトに訪れた人が年間でもっとも人気の出た音楽を楽しめます。一方、ちょっとした遊び心が行き届いた工夫もされています。それがマイクロサイトの404エラーページです。ジャスティンビーバーの2015年のヒット曲「Sorry」が、サイトに訪れた人へのお詫びを表しており、非常に気の利いたページになっています。

f:id:blackwatcher:20160202002853p:plain

https://yearinmusic.spotify.com/404

2 - CSS Tricks

今までウェブページの下に 何があるか引き裂いて確認したことがあるでしょうか?このデザインはCSS Tricksが404エラーページに込めたコンセプトを表しています。賢さと、CSSへの思いの深さが伝わるページになっています。

f:id:blackwatcher:20160202002926p:plain

https://css-tricks.com/thispagedoesntexist

3 - OrangeCoat

ウェブデザインの会社、OrangeCoatの404エラーページは、フローチャートを使って"なぜエラーページにたどり着いたのか?"をわかりやすく教えてくれます。

f:id:blackwatcher:20160202003128p:plain

http://www.orangecoat.com/dear-happy-internet-traveler

最後に

いかがでしたでしょうか?おしゃれな404エラーページを用意しているのは、企業もウェブデザイン会社などおしゃれな企業ばかりですね。 これを機会に、自分のサイトのエラーページを工夫してみるのもいいかもしれません。(このブログは何もやってないですが)エラーページを工夫することは、ユーザーの離脱を防ぐ効果があるので、検討してみて損はないと思います。いつか、このブログもいつかおしゃれに改造したい!以上でした。