海外のwebサイト新鮮な404ページデザイン18選 2014年上半期版

著者:
投稿日:
更新日:

webサイトを運営していると思わぬエラーページが発見される事があります。本来なら求めていたページがなくてストレスを感じてしまうのですが、ユーモア溢れる404ページに出くわすとストレスを感じるどころか珍しいものを見た!と404ページ自体がコンテンツになることがあります。


有名どころでいえばTwitterが処理が追いつかなくてクジラが表示されたりしますよね。あれはめちゃくちゃ上手い表現で処理が追いついた後に「クジラ現れた。つぶやきすぎたな」など、ユーザーは逆に楽しむようになってしまいました。


ということで、今回は海外でユーモアあふれる404ページを18選、厳選して集めてみました。webサイト運営者ならかなり参考になるページばかりですので参考にしてみて下さい。


1. Konfiture

Konfiture


image_1422

Konfiture

この404はやばい!Macでしか体感出来ない(トラックパッドがあれば出来るのかな?)かもしれないのですがトラックパッドでスワイプすると空間が移動するようになっています。無駄にすごい。



2. Eemailcenter UK

Eemailcenter UK

image_1412

Eemailcenter UK

なんかよくわかんないおっさんが4人(開発チーム)いるわけですが、この4人のうち誰かを選べる(こいつが悪い的な)ようになっており、選ぶと他の3人が喜び選ばれた人はしょんぼりする仕様になっています 笑



3. PIX Creative Team

PIX Creative Team


image_1413

PIX Creative Team

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



4. IconFinder

IconFinder


image_1414

IconFinder

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



5. Famousdc

Famousdc


image_1416

Famousdc

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



6. Fortyseven Media

Fortyseven Media


image_1417

Fortyseven Media

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



7. Boomset

Boomset


image_1415

Boomset

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







8. Foxrate

Foxrate


image_1418

Foxrate

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


9. Atelier Compote

Atelier Compote


image_1419

Atelier Compote

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


10. Digiti

Digiti


image_1420

Digiti

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


11. Cranium Creations

Cranium Creations


image_1421

Cranium Creations

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


12. Cayenne

Cayenne


image_1423

Cayenne

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


13. Artist Spring

Artist Spring


image_1424

Artist Spring

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


14. Androiddev 101

Androiddev 101


image_1425

Androiddev 101

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


15. Wearespry

Wearespry


image_1426

Wearespry

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


16. Bret Victor

Bret Victor


image_1427

Bret Victor

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


17. SubCulture

SubCulture


image_1428

SubCulture

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


18. Lissa Sleeckx

Lissa Sleeckx


image_1429

Lissa Sleeckx

シンプルアニメーションで404から何かを釣ろうとしている少年。何を釣ろうとしてるんでしょうか?面白いですね。


出典:404 Page Designs – 32 Fresh Error Pages Examples

Inspiration

まとめ


このサイト自体まだ404ページはただのエラーページしか作成してないのでなんとも言えないのですが、やはりユーザー目線から言ってもサイトデザインを守ったエラーページが現れれば安心しますよね。


時間に余裕ができた時にでも404専用のページを作成してみては如何でしょうか?



著者プロフィール
Sharetube