ホームページのデザインにはこだわっているけれど、404エラーページは、そのままということはないでしょうか？
エラーなので、頻繁に目にする機会はありませんが、いざ表示された際に無機質なページでは、逆に混乱させる可能性もあります。
今回は、デザイン性に優れた404エラーページを44個まとめてご紹介します。
国内外には、ユニークなデザインの404エラーページを導入している企業は多くありますので、参考にしてみましょう。
国内外のユニークな404エラーページ
1.株式会社LIG
株式会社LIGのブログの404ページは、初代広報担当であるジェイさんが登場します。
ページが見つからない代わりにオススメコンテンツを紹介してくれる、というユニークな内容になっています。
2.アップル
Appleの404ページは、キーワード検索のすすめとサイトマップを表示するというシンプルなデザインです。
無駄を省いた製品デザインでおなじみのAppleならではといえます。
3.サクラクレパス
文具メーカーである株式会社サクラクレパスの404ページは、自社製品の消しゴムを使ったワザありデザインです。
ユニークかつ製品のアピールにも繋げています。
4.タカラトミー
玩具メーカーである株式会社タカラトミーの404ページは、人気玩具キャラクター「黒ひげ危機一発」のイラストデザインです。
飛び出す黒ひげのイラストで、目的ページへ飛ぶことを表現しています。
5.HONDA
HONDAの404ページは、空に浮かぶ街中のイラストを配したポップな印象のデザインです。
イラスト中の看板にはさりげなく「Not found」の文字が書いてあります。
クルマの車種でURLエラーになることが多いため、丁寧に説明書きがしてあるのも印象的です。
6.ファルコム
http://www.falcom.co.jp/error/notfound.html
ゲームメーカーである日本ファルコム株式会社の404ページは、泣いている猫のイラストをデザインしたページです。
フォントも丸みのあるものを使用しており、統一感があります。
7.KAYAC デザイナーズブログ
面白法人カヤックのデザイナーブログの404ページは、意匠部のマスコットキャラ達が会話を通してエラーを伝えてくれます。
カヤックらしいユニークなページです。
最近のオススメ記事を紹介してくれる点も秀逸です。
8.かみの工作所
http://www.kaminokousakujo.jp/404
紙を加工した様々な商品を展開するかみの工作所の404ページは、作業現場の動画を背景にしたユニークなデザインです。
9.Y.CO
ヨット会社Y.COの404ページは、コンパスの写真とともにメッセージを書いたオシャレなデザインです。
10.BLIZZARD ENTERTAINMENT
http://us.blizzard.com/en-us/error.html
ゲーム関連事業をおこなうBLIZZARD ENTERTAINMENTの404ページは、ガラスの壁を割ったようなデザインです。
11.Webデザインレシピ
http://webdesignrecipes.com/404
静岡のWebデザイナー、Noriさんが運営するブログ「Webデザインレシピ」の404ページは、ホームページ全体と合わせたガーリッシュでオシャレなデザインです。
12.これからゆっくり考L+α
ホームページのコーディングに関する情報を配信するブログ「これからゆっくり考L+α」の404ページは、見ている人が分かりやすいシンプル設計です。
1３.CSS HappyLife
CSS関連の小技を配信するブログ「CSS HappyLife」の404ページは、シュールなメッセージと躍動感ある文字のエフェクトが印象的です。
14.could
http://www.yasuhisa.com/could/404
ホームページに関するあらゆる情報をテーマにするブログ「cloud」の404ページは、ユーザビリティに配慮したデザインです。
よくありがちな長文で書いたメッセージとは異なり、読みやすくてユーザーが行動しやすいように考えた設計になっています。
15.limpfish
http://www.limpfish.com/notfound.html
limpfishの404ページは、WANTEDと書いた紙の中にメッセージを書いたユニークなデザインです。
16.daniel karcher
daniel karcherの404ページは、フラッシュで作成した動きのある駅内のデザインです。
17.Bit.ly
ブランドツールを提供するbitlyの404ページは、同社のキャラターであるハリセンボンが海に浮かんだデザインです。
18.iconfinder
https://www.iconfinder.com/pagenotfound
アイコン素材を提供するiconfinderの404ページは、宇宙の背景にキャラクターを配したデザインです。
19.GitHub
GitHubの404ページは、動きのあるパララックス効果が特徴的なデザインです。
###20.hootsuite
https://hootsuite.com/404
hootsuiteの404ページは、ページのアイコンにも使われているフクロウのイラストデザインです。
21.s5-style
ホームページデザインを集めるギャラリーサイト、s5-styleの404ページはアーカイブを一覧表示したデザインです。
22.euh?
http://www.project-euh.com/404/?
euhの404ページは、点滅するファイルのイラストで404の文字をデザインしたユニークなデザインです。
音声つきで少しびっくりしますが、インパクトがあります。
23.Dropbox
オンラインストレージサービスDropboxの404ページは、おなじみのアイコンをだまし絵にした、シンプルながらシャレの効いたデザインです。
24.iFolderLinks
様々な写真をストックするiFolderLinksの404ページは、泣いている赤ちゃんのイラストを表示したデザインです。
25.BrandCrowd
ロゴデザインの販売をおこなうBrandCrowdの404ページは、デスクで作業するパソコン上に404エラーを表示するという凝ったイラストのデザインです。
26.GDZLLA
アプリ「GDZLLA」の404ページは、ゴジラがページを吹っ飛ばしたというメッセージとともに、ゴジラのイラストを描いたデザインです。
マウスの方向を目が追いかけるのもユニークです。
27.AUDIKO
着信音をダウンロードできるサービス「AUDIKO」の404ページは、探偵が探している様子を描いたアート性の高いデザインです。
28.きりなび
鹿児島県霧島市の情報サイト「きりなび」の404ページは、ホームページ全体とマッチする温かみのある優しいタッチのデザインです。
29.quote
雑貨を中心に販売するネットショップ「quote」の404ページは、手書き文字とイラスト、写真を合わせたラフな印象のデザインです。
30.ミスタードーナツ
ミスタードーナツの404ページは、同社のキャラクターであるポン・デ・ライオンのイラストが登場します。
可愛らしい印象のページデザインです。
31.泉州キワニスクラブ
http://www.senshu-kiwanis.com/404
奉仕活動をおこなう泉州キワニスクラブの404ページは、本のイラストを背景デザインに使ったページです。
団体のロゴを本のデザインに取り入れており、よく目立ちます。
32.和倉温泉旅館 多田屋
石川県にある旅館多田屋の404ページは、和の雰囲気を感じる縦書きが特徴的なデザインです。
33.太宰府天満宮
http://dazaifutenmangu.or.jp/404
太宰府天満宮の404ページはお堅いイメージがありますが、案外可愛らしいデザインです。
可愛らしい鳥のキャラクターが特徴的です。
34.archimesh
http://www.archimesh.net/404.html
金属素材の特設ホームページ「archimesh」の404ページは、商品である金網の見た目をうまく活用したデザインです。
35.サウスパーク
アメリカ発のアニメ、サウスパークの404ページはリロードするたびにキャラクターが変化するユニークで楽しいデザインです。
36.Kochatelier
http://www.kochatelier-berlin.de/404-fehler/
料理学校Kochatelierの404ページは、パンの写真に焼き印をデザインした料理学校ならではのデザインです。
37.DIL BERT
クリエイターSCOTT ADAMSが運営するブログの404ページは、コミックの3コマで表現した遊び心たっぷりなデザインです。
38.Amorphia Apparel
http://amorphia-apparel.com/404.php
アパレルメーカーAmorphia Apparelの404ページは、鳥が404の文字を連れ去るところを描いたデザインです。
39.mailchimp
メールマガジン配信サービスmailchimpの404ページは、おなじみのサルのキャラクターが凍りついている個性的なデザインです。
40.anidea
マーケティング関連事業を営むTENが運営する「anidea」の404ページは、羽が生えたキャラクターが泣いている様子を描いたデザインです。
41.Daily motion cloud
Daily motion cloudの404ページは「404page not found」の文字が書いた看板が豪雨でゆらゆらと揺れるユニークなデザインです。
42.THE WALL
http://wall.plasm.it/404nofound/
THE WALLの404ページは、沢山のサムネイルで404の文字をデザインしたものです。
スクロールすると表示位置を変えることができ、色々な写真を見ることができます。
43.twikito
http://twikito.com/404notfound
WebデザイナーMATTHIEU BUÉの404ページは、カエルがHTMLを捕まえようとしているシーンを描いたポップでシュールなデザインです。
44.HUWSHIMI
様々なテーマを取り上げるブログ「HUWSHIMI」の404ページは、忍者が走り去る様子を描いたデザインです。
日本的なモチーフを採用しながらも、フラットに仕上げることでホームページ全体のデザインともマッチしています。
まとめ
ユニークな404 Page Not Foundページをまとめてご紹介しました。
国内外、とてもユニークなデザインからオシャレなデザインまで多種多様なものばかりです。
404エラーの原因は、リンク切れだけでなく、ユーザーが存在しないURLをクリックすることで404エラーページを表示させてしまう可能性もあります。
ユーザーが、興味を抱いて閲覧しようと思っていたのに、「404 Page Not Found」と表示されるだけでは、ガッカリしてしまいますし、そこで離脱してしまうこともあるでしょう。
そういった離脱をカバーするためにも、是非404エラーページもこだわってデザインしてみてはいかがでしょうか。
このニュースを読んだあなたにおすすめ
全て無料！デザインの魅力をさらに引き立てる高品質PSDファイル60選
Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ
コミカルなデザインで活用したいマンガ風フォントまとめ