実際のウェブサイトからの40の賢い404エラーページ

成功したウェブサイトを運営することは、壊れたページやパフォーマンスの低下などのエラーに常に注意を払うことを意味します。 ただし、避けられない問題が発生する場合があり、404エラーもその1つです。

404は、ユーザーがWebサイトに存在しないページを要求したときに発生します。そのため、ユーザーに適切な場所に戻るように促す404エラーページがスローされます。 ウェブサイトがダウンしないようにするためにいくつのリソースを投入しても…ユーザーがここにたどり着く可能性は常にあります。

それは不便ですが、人生の事実です。 また、存在しないページにアクセスしたときの訪問者の反応は、「それを一歩踏み出す」から「完全に気を失う」までさまざまです。

後者については何もできませんが、クリエイティブエラー404メッセージを表示することで、問題を少し軽減することができます。 これは、他の方法ではイライラする状況で、Webサイトの訪問者を笑顔にするのに不思議に思うかもしれません。

あなたのウェブサイトのデザインジュースを流すために、この投稿は私たちのお気に入りのウェブサイトのエラーページのいくつかを紹介します。 うまくいけば、あなたはあなた自身の404メッセージをかき立てるためにいくつかのアイデアを取り除くことができるでしょう。

404エラーとは何ですか？

404エラーは、アクセスしようとしたWebサイトがサーバー上で見つからなかったことを意味する標準のHTTPエラーメッセージコードです。 これはクライアント側のエラーです。つまり、ウェブページが削除または移動され、それに応じてURLが変更されなかったか、ユーザーがURLを間違って入力しただけです。

ほとんどの場合、カスタマイズされた404エラーページを作成するようにサーバーを構成できます。 （HubSpotをご利用の場合は、ここをクリックして、HubSpotで404ページをカスタマイズする方法を確認してください。）

一部のカスタマイズされた404エラーページには、ヒーロー画像、機知に富んだ説明、サイトマップ、検索フォーム、または基本的な連絡先情報が含まれています。

最高の404Webページの例

何年にもわたって、Webサイトは、訪問者に404エラーを通知し、それらを適切な場所に戻すためのさまざまな方法を見つけてきました。 まず、クリエイティブな404ページをいくつか見てから、それらに出くわした人を喜ばせること間違いなしの面白い例をいくつかチェックしてみましょう。

ページが見つかりません：Creative404エラーページ

1.ピップコーン

404ページはWebサイトから簡単に突き出る可能性がありますが、Pipcornのエラーページはサイトの他のブランドと完全に一致しています。 素敵なアニメーションの背景、訪問者にWebサイトを検索するように指示するフレンドリーなテキストプロンプト（巧妙なしゃれ付き）、および「404」の「0」として使用されるポップコーンがあります。

2.Spotify

音楽ストリーミングの巨人Spotifyは、その基盤を巧妙な404ページでカバーしています。 カニエ・ウェストのアルバム「808s and Heartbreak」のしゃれとレコードのアニメーションで、ウェブサイトは簡単に楽しませてから、訪問者を元のページに戻します。

3.本気で

404ページの緊張を和らげる簡単な方法の1つは、簡単な「おっと！」を追加することです。 メッセージ—ユーザーを適切な場所に戻すようにガイドすることで、サイトがより親しみやすくなります。 Geniallyのサイトの場合、このページには、遊び心のあるコピーと組み合わせた気の利いたイラストも含まれています。

4.アドビ

ご想像のとおり、Adobeの404エラーページは便利で視覚的にも魅力的です。 壊れたページや失われたページの視覚的なメタファーとして機能するクールなデジタルアートワークと一緒に、訪問者が望む可能性のある人気のあるリンクを一覧表示します。 正直なところ、Webサイトは視覚的なメタファーをより頻繁に使用する必要があります。

5.クロロックス

クロロックスのクリーニング製品の404ページは、3枚の気楽な写真の間を回転して、訪問者に失敗したことを知らせます。 失われたユーザーを支援しながら、短い喜びの瞬間を追加するのは、ブランディングの賢い使い方です。

6. DumaCollective

また、機知に富んだ宣伝文句が必要ない場合もあります。訪問者に、そのアドレスにページがないことを伝えて、先に進んでもらいます。 エンターテインメントコンサルティングエージェンシーのDumaCollectiveは、エラーページでこれを実行しますが、マイナーなフレアの背景画像で補完されています。

7.チルハウス

才能と言えば、セルフケアブランドのChillhouseは、訪問者をスタイリッシュに再ルーティングするための追加作業を行いました。 404ページは適切にブランド化されており、訪問者がホームページに戻る前に、いくつかの静止画を少し旅することさえできます。

8.少し

間違ったBitlyリンクを入力すると、Bitlyの404ページに移動します。 これはかなりの量で発生すると想定しているため、404ページが的を射ているのです。 何がうまくいかなかったのかを説明し、それが目的の場合はBitlyホームページにアクセスするようユーザーに促します。

9.イケア

Ikeaの404ページも同様にミニマリストですが、それでもそこにいくつかのスマートなブランディングを忍び込ませることができます。 この例は、要点を理解するためにエラーページを複雑にする必要がないことを示していますが、楽しみを注入することにも問題はありません。

10. Moxie Design Co.

確かに、「インターネットを壊す」というのは少し双曲的かもしれませんが、MoxieDesignCo.はこのような小さなスリップアップであまり真剣に考えていないことを訪問者に伝えています。 また、検索バーは便利な下部に配置されており、途中であなたを送ることができます。

11. McKissack＆McKissack

ああ、古典的な「ページを失った」トリック。 繰り返しますが、聴衆を遠ざけることなく404を提示する簡単な方法です。 多くのクライアントとのやり取りを管理するMcKissack＆McKissackのような代理店の場合、エラーページを含む、サイトのすべてのページに明確で簡潔なコピーが不可欠です。

12.CSSのトリック

ウェブサイトのラッピングを取り除いて、その下にあるものを確認したことがありますか？ これが、CSSTricksが404エラーページで目指していた概念です。 これは機知に富み、ウェブサイトのすべてを彷彿とさせます。ページスタイルのスマートな使用です。

13.古き良きゲーム

他のWebサイトの場合、フロントエンドをアンラップすると、…スペースが非常に空になります。 このページは、古き良きゲームのネイティブビデオゲームクライアントであるGOGGalaxyへの巧妙な参照です。 ありがたいことに、小さなビデオゲームのキャラクターが、訪問者が必要に応じてエラーを報告する場所を提供するためにあります。

14. Canva

少し違うものについては、Canvaの404ページをチェックしてください。 エラーメッセージだけでなく、気の利いたタイルパズルの訪問者が簡単な娯楽のために遊ぶことができます。 訪問者を数分間たるませても害はありませんよね？

15.イノテック

Canvaのアプローチと同様に、Innotechは404ページにポン風のゲームを備えており、簡単な娯楽を提供します。 このようなウェブサイトを覚えている可能性があります。 さらに、楽しい回り道は本当に印象的なWebサイトを補完します。真剣に、プレイが終わったら、ホームページにアクセスしてすべてを取り入れてください。

16.無数

ビデオエージェンシーのミリアドは、古いテープやテレビに表示されるクラシックなSMPTEカラーバーを模倣した、風変わりなブランドの404ページのデザインを選択しました。 これは、存在しないWebページのより現代的な問題を表しながら、古いテクノロジーへの面白い先祖返りです。

17. KonMari

人気のクリーニングと整理の方法とブランドで知られる近藤麻理恵は、彼女のウェブサイトの404ページに似たような感覚をもたらしました。 このコピーは、彼女の片付けの哲学を簡潔かつユーモラスに思い起こさせます。これは、ファンが認識できる、小さいながらもブランド力のある詳細です。

18. BrandCrowd

このエラーページのイラストは詳細で魅力的であるだけでなく、コピーも巧妙です。 セミソニックの曲「ClosingTime」への言及が大好きです。「他の場所をクリックすることはできますが、ここをクリックすることはできません。」

19.ホットドットプロダクション

Hot Dotのエラーページは、そのタグラインである「新しいテクノロジーとデザインの交差点」に忠実です。 このページは、カーソルを動かした場所に応じて方向を変える何百もの小さな点によってアニメーション化されます。 それは魅惑的で、エージェンシーのデザイン能力の素晴らしいショーケースです。

20. OrangeCoat

エラーメッセージを表示する場合は、ユーザーを支援している間、数秒間ユーザーを楽しませてみませんか？ フレンドリーな挨拶に続いて、OrangeCoatは、ユーザーが最初にエラーページに到達した理由を実際に理解するのに役立つフローチャートを提供します。

21. Ervin＆Smith

この404ページは、ユーザーをアクティブなページにリダイレクトするだけではありません。 代わりに、Ervin＆Smithの404ページでは、下にスクロールして、デジタルマーケティング代理店が必要な理由、特にErvin＆Smithを選択する理由について、お問い合わせフォームで締めくくりました。 このエージェンシーは、その使命に忠実であり、どのページもコンバージョンの機会になる可能性があることを示しています。

22.DayCloudスタジオ

…または、DayCloud StudiosのWebサイトに表示されているように、404は1分間時間を無駄にする場所になります。 画面上でカーソルを動かすと、猫の目から発射されるレーザーによって照らされた404メッセージが表示されます。 なぜですか？

23.ヘッドスペース

ブランドメッセージを404ページにスマートに組み込んだウェブサイトのもう1つの例—ガイド付き瞑想アプリHeadspaceは、ユーザーを落ち着かせ、深呼吸してからメインサイトに戻るように促します。

24.ワイルドウッドベーカリー

これまでのところ、一部のWebサイトでは、巧妙なブランドコピーをページに統合していますが、他のWebサイトでは本格的なオンラインゲームをホストしています。 しかし、正しい方向に少し押し戻すことには何の問題もありません。 ワイルドウッドベーカリーの絶妙なサイトは、物事を短くて甘く保ちます（文字通り）。

ページが見つかりません：面白い404エラーページ

25. Astuteo

デザインエージェンシーのAstuteoの404ページは、エレガントなビジュアル、ユーモア、そして有用性の完璧なバランスです。 最小限のレイアウトにより、ユーザーは、別の面白い視覚的な比喩、沈没する貨物船、逃げる姿とともに、必要な情報を得ることができます。

26.レゴ

LEGOの404エラーページに必要な単語はほとんどありません。キャラクターの表現によってすべてが明確になります。 さらに、LEGOムービーフランチャイズのファンは、コピーの楽しいリファレンスを楽しむことができます。

27.マグント

この面白いエラーメッセージの中で、マグントは、そうです、彼らが何かを壊した可能性があるという事実を楽しんでいます—または、あなたはただタイプすることができません。 ビジュアルは、彼らの要点をすばやく説明するための迅速な方法として役立ちます。

28. IconFinder

IconFinderのエラーページはシンプルですが楽しいです。 ローブを着て疲れているように見える会社のマスコットは、失われた訪問者に関係のあるうなずきです。 ただし、サイトには以下にアクセスするためのリンクがいくつかリストされているので、心配する必要はありません。

29.甘い夢

どうやら、睡眠補助会社のSweet Dreamsのチームは、ウェブサイトの404ページによると、その製品の多くを取りすぎていたようです。 このページはユーモラスであるだけでなく、サイトの他のフロントエンドの美学やメッセージとうまく調和して、まとまりのある感じになります。

30. GitHub

「これらはあなたが探しているドロイドではありません」という行は、スターウォーズエピソードIVのストームトルーパーに対するオビ＝ワン・ケノービのジェダイマインドトリックを指し、誰かに間違ったことを追求していることを伝えるために使用される有名なフレーズになっています行動方針。 GitHubは、404エラーメッセージでこの有名な行を再生します。

31.パタゴニア

パタゴニアのカスタム404ページは、フリスビーツイラーのブーメランビデオ、「404」と「aloha」を組み合わせた巧妙なしゃれ、およびその製品ページへのリンクで、ブランドの雰囲気を完璧に捉えています。 これは、間違った場所にたどり着いた訪問者に挨拶するためのフレンドリーで面白い方法です。

32.クラウドシグマ

チェックしてください：Cloud Sigmaは、舞台裏のアクションを紹介してくれます。 彼らの404エラーページは「ジュニア開発者のホームページ」のふりをしています—そのジュニア開発者は猫です。

33.AMCシアターズ

あなたは以前にAMC映画館に行ったことがあるかもしれませんが、うまくいけば彼らのウェブサイトの404ページを見たことがありません。 このウェブサイトは、適切な場所に戻る前に、すばやく、面白く、関連性のあるワンライナーを利用します。

34.ブルーノ

クリエイティブエージェンシーがクールな404ページを思いつくのが得意なのは偶然ではありません。 これは、2000年のカルトコメディーの古典的なデュードを演じるブルーノのクリエイティブからの別のものです、私の車はどこですか？ いいえ、それは会社やウェブサイトとは何の関係もありませんが、それは笑いを誘うことは確実です。

35. NPR

最初は、NPRのエラーページは特別なものではないようです。 しかし、読み続けると、アメリア・イアハートの作品やウォルドの作品など、失われた人々、場所、物事についての素晴らしい物語のいくつかに巧みにリンクしていることがわかります。 これにより、失われたユーザーの孤独感が少し減る可能性があります。

36.中

Mediumは、NPRの404ページと同様のアプローチを取り、迷子になったり物を失ったりすることについての記事を推奨しています。 時間があれば、これらの記事をチェックしてください—かなり良い読み物です。

37.ホームスターランナー

フラッシュアニメーションの漫画シリーズの本拠地であるHomeStarRunner.comには、何年にもわたって一連の陽気な404エラーページがありました。 最新の特集では、エピソードの1つから直接出てくる可能性のあるシーンで、漫画シリーズのキャラクターが登場します。 ページをロードするときにサウンドをオンにすると、フレーズを大声で叫ぶことで知られる彼らのキャラクターであるストロングバッドが「404'd！」と言うのが聞こえます。

38.ブリザードエンターテインメント

ブリザードエンターテインメントの404ページには、実際のブリザードで失われたアニメーションキャラクターと、WorldofWarcraftのファンが喜ぶユーモアが含まれています。

39.こんにちはビッグアイデア

マーケティングとソーシャルメディアの専門家であるHelloBigIdeaのウェブサイトをざっと見てみると、その大胆で鈍いスタイルのコピーについて知っておくべきことがわかります。 そしてもちろん、その404エラーページも例外ではありません。

40. HubSpot

それは私たちにも起こります！ これは、ウェブサイトの訪問者にウェブサイトの問題があることを伝えるために作成したメッセージです。 私たちの目標は、可能な限り愛らしく、共感的で、役立つことで、HubSpotのブランドの声に忠実であり続けることでした。

404エラーページを楽しい瞬間に変える

誰も404ページにたどり着きたくありません—彼らは迷惑で予想外です。 ただし、実際にそれらを回避することはできないため、Webサイトにフォールバックするために404ページを用意することをお勧めします。

また、ユーザーエクスペリエンスの観点からは、404ページはレンガの壁ではなく、小さなスピードバンプである必要があります。 正しいデザインは、欲求不満のバウンスと可能な変換の違いになる可能性があるので、それを楽しくしてみませんか？

編集者のメモ：この投稿は元々2015年12月に公開され、包括的に更新されています。