海外のwebサイト新鮮な404ページデザイン18選 2014年上半期版
webサイトを運営していると思わぬエラーページが発見される事があります。本来なら求めていたページがなくてストレスを感じてしまうのですが、ユーモア溢れる404ページに出くわすとストレスを感じるどころか珍しいものを見た!と404ページ自体がコンテンツになることがあります。
有名どころでいえばTwitterが処理が追いつかなくてクジラが表示されたりしますよね。あれはめちゃくちゃ上手い表現で処理が追いついた後に「クジラ現れた。つぶやきすぎたな」など、ユーザーは逆に楽しむようになってしまいました。
ということで、今回は海外でユーモアあふれる404ページを18選、厳選して集めてみました。webサイト運営者ならかなり参考になるページばかりですので参考にしてみて下さい。
1. Konfiture
Konfiture

この404はやばい!Macでしか体感出来ない(トラックパッドがあれば出来るのかな?)かもしれないのですがトラックパッドでスワイプすると空間が移動するようになっています。無駄にすごい。
2. Eemailcenter UK
Eemailcenter UK
なんかよくわかんないおっさんが4人(開発チーム)いるわけですが、この4人のうち誰かを選べる(こいつが悪い的な)ようになっており、選ぶと他の3人が喜び選ばれた人はしょんぼりする仕様になっています 笑
3. PIX Creative Team
PIX Creative Team

これもすごいんですが、ブラウザを選ぶようです。とりあえずchromeでは動くのを確認出来ました。すごい。3D流行ってるんですかね?404でやたら3Dで遊んでいるページが多い様な気がします。
4. IconFinder
IconFinder

サイトのアイコンをリアルな感じに表現していて上手いなと感じる404です。
5. Famousdc
Famousdc

スタイリッシュですよねー。404でもちゃんとメニューなどを残しており、ボク的には404のUIはこうあるべきだと考えています。
6. Fortyseven Media
Fortyseven Media

手書き風の404でサイトコンテンツに合っていていいなーっと思った404ページ。このくらいであれば簡単に真似出来る感じなので参考にしたいですね。
7. Boomset
Boomset

ビジネスマンがiPadを持ちながらエラーだよと叫んでいます。まぁ、わかりやすい404ということで。
8. Foxrate
Foxrate

これもすごい。マウスカーソルに合わせてわんちゃんがクビをかしげます。実装はかんたんですがかわいいって思わせるデザインがいいですねー。
9. Atelier Compote
Atelier Compote

ちょーシンプル。画像を張ってるだけです笑
10. Digiti
Digiti

こちらもマウスカーソルに合わせて風景が動く仕組みになっています。若干パララックスのようなデザインに。
11. Cranium Creations
Cranium Creations

ここは404ページで残骸が集まっているよ!的な表現をしています。うまい。
12. Cayenne
Cayenne

これは大作です。lineのようなUIで会話がされています。これはユーザーに優しいですね。良い感じ。
13. Artist Spring
Artist Spring

アーティスト関連の404ページ。やっぱりキャラクター系はいいですね。
14. Androiddev 101
Androiddev 101

ダースベイダー風なビッドキャラクターがかわいいですね。
15. Wearespry
Wearespry

こちらは映像を使った404ページです。わんちゃんかわいい。
16. Bret Victor
Bret Victor

いいですねー大人な匂いがします。煙で404を表現するとは。
17. SubCulture
SubCulture

また宇宙系の404ページです。このサイトは絵描きさんが集まるサイトなのかな。404の関連じゃない気がしますが、クオリティーは高いです。
18. Lissa Sleeckx
Lissa Sleeckx

シンプルアニメーションで404から何かを釣ろうとしている少年。何を釣ろうとしてるんでしょうか?面白いですね。
出典:404 Page Designs – 32 Fresh Error Pages Examples このサイト自体まだ404ページはただのエラーページしか作成してないのでなんとも言えないのですが、やはりユーザー目線から言ってもサイトデザインを守ったエラーページが現れれば安心しますよね。 時間に余裕ができた時にでも404専用のページを作成してみては如何でしょうか? Inspiration まとめ