デザインが素敵だったり見せ方が面白いなと思った404ページ（エラーページ）のデザインショーケースです。
このように一覧化しているとゲームができたりアニメーションが付いていたりといった遊び心あるサイトが目に止まりますが、エラーページに辿り着いてしまったユーザーに対してどのように目的のコンテンツへ誘導させているかなど、そういった面で参考になるものもあります。
404ページのデザインショーケースですが、意図的にエラーページにリンクを飛ばずのもどうかと思ったので各紹介サイトへのリンクはTOPページになっています。
PlatinumGames Inc. Official WebSite
404ページ内に8bitのミニゲームが表示され、実際にプレイすることもできます。
また、見た目だけでなくソースコードも工夫されており、ソース内にこのゲームの攻略情報が記載されています。
Développeur Web sur Lille
こちらも404ページにミニゲームを実装しています。
5emegauche
Webクリエイターボックス
サイトロゴを用いたデザインで、このページが表示されている理由や解決方法についての案内も掲載しています。
Atom
Atomもロゴを用いたデザインとなっており、404の「0」の部分にロゴを組み合わせています。
CSS-Tricks
Rally Interactive
Christophe Morel
株式会社LIG
個人的には以前のデザインの方がインパクトあって好きだったんですが、初代広報担当であるジェイさんが「すでにLIGを退社している俺には何も出来ないんだ。」というメッセージと一緒にオススメコンテンツを紹介するというページになっています。
OZPAの表4
エラーページでよく表示されるあの女性をモチーフにした、インパクトある写真が特徴的な404ページ。
I PLAN WEBSITES
一時期SNSなどでも話題になった404ページで、スクロールしていくと...？
The Wall - A Javascript plugin for Mootools
イメージとテキストを組み合わせたマスクを用いているページで、イメージはドラッグで動かすことができます。
WWFジャパン
「ページがみつかりません」という404の意味にかけて、このサイトでは404ページに絶滅してしまった鳥をイラスト付きでランダム表示しています。
株式会社サクラクレパス
「ページが消えてしまったのはもしかしたら消しゴムのせいかも！」と、404ページにちゃっかり商品アピールを入れています。
Apple
Appleでは様々なページヘのリンクがまとめられているサイトマップのようなページにしています。
GitHub
ほんの少しパララックス効果をいれています。
Dropbox
エラーだからなのか、構造が少しおかしくなっているDropboxのロゴが表示されています。
Tumblr
フルスクリーンの背景にアニメーションGIFがランダム表示されます。
「ここには何もありません。探しているものはこのアドレスにはありません。エラーページをお探しの場合は、ここがそのエラーページになります。」というテキストがお洒落です。
Blue Bottle Coffee
Makershape
Plasticbionic
BrandCrowd
Fork CMS
Gifmylive
Commercial Type
フォントに関するサイトなので、404ページには「Error 404 Page not found」という文字列を様々なフォントで並べています。
Konigi
問題が解決できるページヘと導くチャートを表示しています。
早稲田大学
SVGのパスアニメーションを用いています。
Hatched
CSS HappyLife
ユニークな仕掛けがされていて面白い404ページです。
DONGURI
「どんぐりだからつるに食べられちゃったかも！」というユニークな文章でページがないことを伝えており、イラストの雰囲気も素敵です。