素敵なデザインからユニークな仕掛けまで、404ページのデザインショーケース 30

素敵なデザインからユニークな仕掛けまで、404ページのデザインショーケース 30

デザイン備忘録。デザインが素敵だったり見せ方が面白いなと思った404ページ(エラーページ)のデザインショーケースです。このように一覧化しているとゲームができたりアニメーションが付いていたりといった遊び心あるサイトが目に止まりますが、エラーページに辿り着いてしまったユーザーに対してどのように目的のコンテンツへ誘導させているかなど、そういった面で参考になるものもあります。

※404ページのデザインショーケースですが、意図的にエラーページにリンクを飛ばずのもどうかと思ったので、各紹介サイトへのリンクはTOPページとなっています。

PlatinumGames Inc. Official WebSite

PlatinumGames Inc. Official WebSite

404ページ内に8bitのミニゲームが表示され、実際にプレイすることもできます。
また、見た目だけでなくソースコードも工夫されており、ソース内にこのゲームの攻略情報が記載されています。

Développeur Web sur Lille

Développeur Web sur Lille

こちらも先ほどと同様で、404ページにミニゲームを実装しています。

5emegauche

5emegauche

Webクリエイターボックス

Webクリエイターボックス

サイトロゴを用いたデザインで、このページが表示されている理由や解決方法についての案内も掲載しています。

Atom

Atom

Atomもロゴを用いたデザインとなっており、404の「0」の部分にロゴを組み合わせています。

CSS-Tricks

CSS-Tricks

Rally Interactive

Rally Interactive

Christophe Morel

Christophe Morel

株式会社LIG

株式会社LIG

個人的には以前のデザインの方がインパクトあって好きだったんですが、初代広報担当であるジェイさんが「すでにLIGを退社している俺には何も出来ないんだ。」というメッセージと一緒にオススメコンテンツを紹介するというページになっています。

OZPAの表4

OZPAの表4

エラーページでよく表示されるあの女性をモチーフにした、インパクトある写真が特徴的な404ページ。

I PLAN WEBSITES

I PLAN WEBSITES

一時期ソーシャルなどでも話題になった404ページ。

The Wall – A Javascript plugin for Mootools

The Wall - A Javascript plugin for Mootools

イメージとテキストを組み合わせたマスクを用いているページで、イメージはドラッグで動かすことができます。

WWFジャパン

WWFジャパン

「ページがみつかりません」という404の意味にかけて、このサイトでは404ページに絶滅してしまった鳥をイラスト付きでランダム表示しています。

株式会社サクラクレパス

株式会社サクラクレパス

「ページが消えてしまったのはもしかしたら消しゴムのせいかも!」と、404ページにちゃっかり商品アピールを入れています。

Apple

Apple

Appleでは様々なページヘのリンクがまとめられているサイトマップのようなページにしています。

GitHub

GitHub

ほんの少しパララックス効果をいれています。

Dropbox

Dropbox

エラーだからなのか、構造が少しおかしくなっているDropboxのロゴが表示されています。

Tumblr

Tumblr

フルスクリーンの背景にアニメーションGIFがランダム表示されます。
「ここには何もありません。探しているものはこのアドレスにはありません。エラーページをお探しの場合は、ここがそのエラーページになります。」というテキストがお洒落です。

Blue Bottle Coffee

Blue Bottle Coffee

Makershape

Makershape

Plasticbionic

Plasticbionic

BrandCrowd

BrandCrowd

Fork CMS

Fork CMS

Gifmylive

Gifmylive

Commercial Type

Commercial Type

フォントに関するサイトなので、404ページには「Error 404 Page not found」という文字列を様々なフォントで並べています。

Konigi

Konigi

問題が解決できるページヘと導くチャートを表示しています。

早稲田大学

早稲田大学

SVGのパスアニメーションを用いています。

Hatched

Hatched

CSS HappyLife

CSS HappyLife

ユニークな仕掛けがされていて面白い404ページ :)

DONGURI

DONGURI

「どんぐりだからつるに食べられちゃったかも!」というユニークな文章でページがないことを伝えており、イラストの雰囲気も素敵です。

Back to Top

素敵なデザインからユニークな仕掛けまで、404ページのデザインショーケース 30

素敵なデザインからユニークな仕掛けまで、404ページのデザインショーケース 30

/ Inspiration

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。