海外サービスのクリエイティブな404エラーページまとめ

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

リンク切れやアドレスの打ち間違いなどでユーザーが迷い込んでしまうページ、それが通称「404 NOT FOUND」のエラーページです。ページが消されていたり、そもそも存在しないページにアクセスされてしまっていたりなど、状況はさまざまですが、一つ言えるのは、ユーザーにとっては決して良い体験ではないということです。

ですが、そういったユーザーの状況を見越して、海外のサービスなどではちょっとした仕掛けを施したり、ウィットに富んだグラフィックや文言を用意したりと、エラーページだからこそ、凝った工夫でユーザーを楽しませようとするサイトもあります。

今回はユーザーのエラーによるネガティブな体験を帳消しにしてくれるようなクリエイティブなエラーページをご紹介します。

Slack

404_slack

https://slack.com/hellomynameismilkman

コミュニケーションアプリSlackのエラーページは美しい景色がマウスによって全画面スクロールし、ユーザーに「おかしな場所に迷い込んでしまったね」と語りかけています。下部のニワトリはクリックするとリアクションをし、ブラウザのアドレスバーにマウスを持って行くと何故か全体が灰色になります。¯\_(ツ)_/¯

airbnb

404_airbnb

https://www.airbnb.jp/hellomynameismilkman

民泊サービスのairbnbではフラットデザインの女の子がアイスクリームを落とすアニメーションが再生されます。おっと!が改行されてしまっているのが惜しいですね。

GitHub

404_github

https://github.com/hellomynameismilkman

バージョン管理のGitHubでは同社マスコットのOctocatがスターウォーズをモチーフに描かれており、そのビジュアルはパララックスなレイアウトで演出されています。ちなみにサーバー負荷でつながらない等の500エラーのときはこのようなグラフィックです。

dribbble

404_dribbble

https://dribbble.com/hellomynameismilkman

デザイナーのためのコミュニティサービスdribbbleでは、ドリブルという名の通りバスケットゴールが表示され、シュートを外したね(=Air ball)と、一貫した世界観を貫いています。

Mailchimp

404_mailchimp

http://mailchimp.com/hellomynameismilkman

猿のキャラが目印のメルマガ配信プラットフォームMailChimpでは不気味な色の猿がぬるぬる動く霧の中で立っているビジュアルでエラーを表しています。

Amazon.com

404_amazon

https://www.amazon.com/hellomynameismilkman

米国版AmazonのエラーページではAmazon社内で買っている犬の図鑑のようなページがさりげなく設置されています。

vimeo

404_vimeo

https://vimeo.com/hellomynameismilkman

動画サービスのvimeoはゆるいロボットのアニメーション演出です。また、タイトルには「vimeUhOh」とサービス名をもじった、少しおちゃらけた雰囲気を出しています。

Reddit

404_reddit

https://www.reddit.com/hellomynameismilkman

巨大掲示板サイトRedditでは同社のマスコットに関するゆるいグラフィックが数種類シャッフルで表示されます。

Dropbox

404_dropbox

https://www.dropbox.com/hellomynameismilkman

ファイル共有サービスDropboxのエラーページは同社のロゴがエッシャーのだまし絵のように構成され、迷い込んだ様を端的に表現しています。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて