• follow us in feedly
scroll_icon
shuffle_button
海外のwebサイト新鮮な404ページデザイン18選 2014年上半期版

サムネイル出典:

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

Original:

404 Page Designs – 32 Fresh Error Pages Examples | Inspiration | Graphic Design Junction

Posted date:
Update date:2014年06月15日
海外の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 | Graphic Design Junction

まとめ

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

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

この記事が気に入ったら

いいね!しよう

Sharetubeの最新記事をお届けします

著者プロフィール
マツオカソウヤ

プログラマー。Sharetube作ってる人。サーバ周り、サービス設計、システム、デザイン、執筆を手掛ける。SNSのJoinchrome、ソーシャルRSSのBazzfeed、TwitterアプリのPicleの失敗を経て、今に至る。今日もまた東京の何処かでコードと記事を書いています。