リンク切れやアドレスの打ち間違いなどでユーザーが迷い込んでしまうページ、それが通称「404 NOT FOUND」のエラーページです。ページが消されていたり、そもそも存在しないページにアクセスされてしまっていたりなど、状況はさまざまですが、一つ言えるのは、ユーザーにとっては決して良い体験ではないということです。
ですが、そういったユーザーの状況を見越して、海外のサービスなどではちょっとした仕掛けを施したり、ウィットに富んだグラフィックや文言を用意したりと、エラーページだからこそ、凝った工夫でユーザーを楽しませようとするサイトもあります。
今回はユーザーのエラーによるネガティブな体験を帳消しにしてくれるようなクリエイティブなエラーページをご紹介します。
Slack
https://slack.com/hellomynameismilkman
コミュニケーションアプリSlackのエラーページは美しい景色がマウスによって全画面スクロールし、ユーザーに「おかしな場所に迷い込んでしまったね」と語りかけています。下部のニワトリはクリックするとリアクションをし、ブラウザのアドレスバーにマウスを持って行くと何故か全体が灰色になります。¯\_(ツ)_/¯
airbnb
https://www.airbnb.jp/hellomynameismilkman
民泊サービスのairbnbではフラットデザインの女の子がアイスクリームを落とすアニメーションが再生されます。おっと!が改行されてしまっているのが惜しいですね。
GitHub
https://github.com/hellomynameismilkman
バージョン管理のGitHubでは同社マスコットのOctocatがスターウォーズをモチーフに描かれており、そのビジュアルはパララックスなレイアウトで演出されています。ちなみにサーバー負荷でつながらない等の500エラーのときはこのようなグラフィックです。
dribbble
https://dribbble.com/hellomynameismilkman
デザイナーのためのコミュニティサービスdribbbleでは、ドリブルという名の通りバスケットゴールが表示され、シュートを外したね(=Air ball)と、一貫した世界観を貫いています。
Mailchimp
http://mailchimp.com/hellomynameismilkman
猿のキャラが目印のメルマガ配信プラットフォームMailChimpでは不気味な色の猿がぬるぬる動く霧の中で立っているビジュアルでエラーを表しています。
Amazon.com
https://www.amazon.com/hellomynameismilkman
米国版AmazonのエラーページではAmazon社内で買っている犬の図鑑のようなページがさりげなく設置されています。
vimeo
https://vimeo.com/hellomynameismilkman
動画サービスのvimeoはゆるいロボットのアニメーション演出です。また、タイトルには「vimeUhOh」とサービス名をもじった、少しおちゃらけた雰囲気を出しています。
https://www.reddit.com/hellomynameismilkman
巨大掲示板サイトRedditでは同社のマスコットに関するゆるいグラフィックが数種類シャッフルで表示されます。
Dropbox
https://www.dropbox.com/hellomynameismilkman
ファイル共有サービスDropboxのエラーページは同社のロゴがエッシャーのだまし絵のように構成され、迷い込んだ様を端的に表現しています。