カスタム404エラーページ：壊れたWebページを保存する最良の「ページが見つかりません」の例
公開: 2018-07-07
私たちは皆、私たちが望む以上にそれを経験しました。 あなたがあなたの注意を引くのに十分な額面で行った新しいウェブページを開くことを見越してリンクをクリックしたときのその感覚は、恐ろしい404エラーに見舞われるだけでした。
ページ。 いいえ。 見つかった。
ああ、ああ、ああ。 あなたがユーザーである場合、あなたはすぐにイライラしたり失望したりします。 あなたがウェブサイトの所有者である場合、壊れたリンクやページがあることに気付いた瞬間は、常に恥ずかしさと混乱が混ざったものです-「しかし、それは昨日うまくいきました！」
ただし、混乱の中で、404エラーページに関しては、多くの場合、いくつかの隠された宝石があります。 一部のWebサイトでは、羊をフォローするのではなく、時間をかけて404ページを言い訳に変えて、急増する楽しみや追加情報を使用しています。
厳選された最高のデザインを受信トレイに直接送信したいですか？
DesignRush Daily Doseにサインアップしてください！
これらのカスタムエラーページは、他の設計者にとって完璧なインスピレーションとして役立ちます。 もちろん、最良のシナリオは、毎回完璧に機能する完璧なWebサイトのデザインです。 ただし、問題が発生したり、テーマが失敗したり、Webサーバーが誤動作したり、ページが壊れたりします。 したがって、打撃を軽減し、スナフが不可欠になった後、訪問者が何度も戻ってくるようにするための、サイト上のカスタムのブランドメッセージ。 404ページほど面白いので、わざと叩き続けたり、友達と共有したりしています！
なぜ404エラーWebページが必要なのですか？
「リンク切れ」または不正確なURLによってユーザーがアクセスできないWebページに移動すると、404ページエラーが発生します。
他の人やオンラインビジネスが壊れたリンクであなたのブランドにデジタルで言及すると、404エラーが発生することがあります。 多くの場合、これらの場合、404ページは、URLの末尾に文字を追加するなど、誰かがリンクにタイプミスをしたときに発生します。 実際、45.9％の確率で、タイプミス、電子メール内の古いリンク、または削除されたページへのリンクを保存した古いブックマークが原因で、404ページに遭遇します。
ただし、最も一般的な404ページの発生の1つは、現在無効になっているページを指す他のリンクがサイト全体（およびインターネット全体）に残っているときに、Webサイト管理者がページを完全に削除する場合です。 このような場合は、リンクを否認することを忘れないでください。 つまり、あなたは絆を断ち切り、検索エンジンにそれらのリンクが壊れていることを伝えるのではなく、彼らにそれを自分で学ばせて、人々にあなたのエラーページを紹介させるのではありません。
コンテンツを移動または削除する場合は、ページをリダイレクトする必要があります。これが、301、307、および308リダイレクトの目的です。 301/308リダイレクトは永続的なリダイレクトです。誰かが前のページに移動すると、すぐに新しいページにリダイレクトされます。
ただし、302/307リダイレクトは一時的なものです。 ウェブサイトの管理者はいくつかの理由でそれらを使用します。
信じられないかもしれませんが、検索エンジンは人々を404ページに追いやることができます。 たとえば、リダイレクトを適切に行うと、ユーザーは現在ポイントしているページにアクセスする必要があります。 ただし、検索エンジンがページをクロールして、行ったすべての変更を実際に記録するのに数日（またはそれ以上）かかる場合があります。 その短い時間枠で、彼らはまだ人々を間違った404ページに連れて行くかもしれません。
また、壊れたリンクを作成するバグがWebサイトにある可能性もあります。 その場合、プログラマーや開発者に助けを求める必要があります。 結局のところ、ある調査によると、Webサイトの17.5％にリンク切れがあります。
404ページを監視する方法
潜在的な404ページを常に監視し、表示されたらすぐに修正を試みる必要があります。 幸いなことに、壊れたリンクを見つけて対処するのに役立つツールがあります。 一部には、Screaming Frog、Dead Link Checker、そしておそらく最も人気のあるGoogle独自のWebマスターツールが含まれます。
効果的な404エラーWebページの作成
1つ確かなことは、サイトですべてを正しく行ったとしても、常に404ページになることです。 しかし、良いニュースは、リンクを否認したり、ページを常に監視したり、Webサイトチェッカーを実行したりすることで、ユーザーエクスペリエンスを最大化し、外観を最小化できることです。
間違いが起こったとき、私たちはそれらから学ぶべきです。 Google AnalyticsなどのWebサイト分析プログラムを使用して、Webサイトのパフォーマンスを向上させます。 404ページにアクセスしたときのユーザーの行動を追跡します。 次に、このデータを活用してください。
たとえば、404ページがホームページに戻った後の次のステップの場合、デザイン内でそれらを導くための明確で目に見えるボタンを配置できます。 または、404エラーの後に連絡先ページにアクセスしたい場合は、そこにリンクして、生活を少し楽にしてください。
消費者の行動と情報を追跡して、Webサイトで何が機能しているか、消費者が何を好きか嫌いかを確認します。 何がいいですか？ この種のことには当て推量はありません。ウェブサイトの訪問者に関する数字と具体的なデータがそれ自体を物語っています。
すぐにコピーしたい最高の404エラーページのデザイン
エラーを探してインターネットをスクロールした後（それは奇妙に聞こえますが）、他のページから目立つ404ページがいくつかあります。 見てください-多分それらのいくつかはあなた自身のブランド上のデザインを刺激するでしょう！
1.マップアウトされた404エラーページ：BluePath
BluePathはクライアントと協力して、ユーザーをスプレッドシートから遠ざけるのに役立つ「自動分析戦略を作成および実装」します。 それ自体は素晴らしいですが、彼らはこの風変わりな404エラーページをまとめるのにも時間を割いてくれました。
このページには実際に地図が表示されます（「地図外」をナビゲートする愚かさのおかげで、地図は表示されていません）。 このページのコピーには、次のようにも書かれています。
「この[地図]は、過去2年間にアトランタで報告されたすべての犯罪を示しています。 どうして？ それはあなたがまだ私たちを雇っていない犯罪だからです！」
よくやった、BluePath。 よくやった。
2. Snarky 404ページエラー：オーストラリア人
オーストラリアを代表する国内ニュースブランドオーストラリアは、国内および世界のさまざまなニュースとビジネス報道を誇っています。 しかし、私たちの他の人たちと同じように、彼らは時折のエラーに対して脆弱です。 この場合、404エラーページです。
しかし、オーストラリア人は、古典的な「ページが見つかりません」に提出するのではなく、オーストラリアの数人の政治家を巧みに掘り下げる機会としてこのページを使用することを選択しました（ドナルド・トランプと石炭の塊も奇妙なことにリストを作成します）。 各政治家は、彼らに関連付けられた引用と壊れたリンクに関する彼らの考えを持っています。
3. Gamified 404エラーページ：Kualo
Ok。 これは、インターネットの歴史の中で最高の404エラーページかもしれません。 クアロは、壊れたリンクのために彼らの家をユーザーがプレイするためのスペースインベーダーのゲームに変えることに決めました。 ゲーミフィケーションは、失望したWebサーファーを非常に満足のいくコンテンツ消費者に変えるための優れた方法です。
さらに、ユーザーはクラシックゲームをプレイするためだけに意図的にこのページに戻ることができます。 検索エンジンはすべて（こんにちは、ビッグブラザー...）を見るので、ページ上のユーザーの時間も追跡します。 理にかなっています–ページに多くの時間を費やす場合、それはあなたがそのコンテンツを本当に気に入っていることを意味します。 あなたがリピーターであり、あなたがより多くのために戻ってき続けるならば、検索エンジンはあなたの旅をマッピングし、より良いランキングでウェブサイトに報酬を与えます！
何がいいですか？ クアロのウェブサイトで素晴らしいゲームをプレイするチャンスを得るだけでなく、実際にそうするインセンティブがあります！ 1,000人の侵入者を破壊すると、ホスティングの割引が受けられます。 全体的に、これは本当に素晴らしいデザインであり、純粋にこのページのために、この記事を書くのに余分な時間がかかりました。 クアロに脱帽。
PSあなたは私たちのハイスコアを打ち負かすことができますか？
4.風変わりな404エラーページ：役に立たないWebインデックス
役に立たないWebインデックス（非常に適切な名前）は、404エラーページのデザインで非常に愛されているミーアキャットを提供することにしました。 ページに長く滞在するほど、到着するミーアキャットの数が増えるため、約10秒後に画面に少なくとも8つのミーアキャットが表示されます。
あなたは明らかにあなたのウェブページを見つけるのに苦労しているミーアキャットにほとんど気分が悪いです！
確かに、ゲーミフィケーションはあなたのビジネスにとって不思議なことですが、404トピックにリモート接続されているビデオを組み込むことも良い戦術です。 人々は最後までそれを見て滞在するかもしれません。それは、404ページが表示されたとしても、Webページに費やす時間を増やし、全体的なメトリックを強化するためのもう1つの優れた方法です。
5.図解された404エラーページ：レゴ
あなたがレゴファンなら、404エラーページのデザインをお楽しみいただけます。 一部の企業がすでに強調しているように、404ページは実際には、誤ったページを使用して訪問者にブランドや製品を再確認するための優れた言い訳です。
レゴは実際、さまざまな戦術を使用して顧客ベースを増やし、関連性があることを人々に思い出させる機会を逃さないことで有名です。 一連のアニメーション映画、ビデオゲーム、追加コンテンツなどがあります。 レゴは、赤ちゃんのレゴデュプロのレンガから、大人が最も有名なランドマークのレプリカを作成できるアーキテクトボックスまで、あらゆる年齢の人々が利用できます。
私たちは彼らの404ページにこれ以上何も期待していませんでした。 この場合、レゴの404ページは非常にわかりやすいものです。クリックしたリンクをウェブページに接続している「ケーブル」が壊れており、貧しい人々が彼の恐怖に遭遇しました。
6.パニー404エラーページ：ブルーダニエル
ポートフォリオの一部として、Daniel Karcherは404エラーページを使用して、彼のスキルをさらに紹介することを選択しました。 彼は、しゃれを使った看板広告とユーモラスなひねりを加えた言葉遊びで、地下鉄の設定を選びました。
彼のエラーメッセージには、映画「ミッシング」とテレビ番組「ロスト」への言及があります。 後者は、ユーザーに「あなたは失われましたか？」という質問をするために落書きが重ねられています。
この404ページで明らかに道に迷ったので、メインレベルに戻るチャンスがあります。 頭がいい！
7.冒険的な404エラーページ：エミレーツ
記事の冒頭で述べたように、一部の企業はユーモアと有用な情報を組み合わせて、壊れたセクションやリンクというよりも実際のWebサイトの一部のように感じる404エラーページを作成しています。
エミレーツは、皮肉なジョークと最もよくアクセスするページへのリンクを組み合わせた代表的な例です。 「申し訳ありませんが、私たちは世界中を旅しましたが、このページが見つからないようです。」と彼らは言います。 彼らはいたるところにいるので、あなたが探しているページはほぼ確実に存在しないことを示唆しています-d'oh！
404ページにアクセスした人の73.7％がすぐにサイトを離れるという事実を考えると、最も訪問されたページへのリンクを提供することによって、訪問者をサイトにとどまらせることは素晴らしい戦術です。
探しているものが見つからないと、信頼を失います。 次に、検索エンジンは信頼を失います。 そして、あなたは誰かがあなたのビジネスへの信頼を失ってほしくないということを言うだけで十分です。 壊れたリンクのような悪い状況を変える方法を見つけることはあなたがあなたのビジネスを主張するのを助け、あなたのウェブサイトの訪問者を感動させることさえできます。
8.最小の404エラーページ：CSSトリック
Web開発またはコーディングWebサイトで404エラーが発生するのはおそらく非常に恥ずかしいことです。 つまり、結局これらのことが起こらないようにするのが彼らの仕事ですよね？
とにかく、CSS Tricksのチームは、恥ずかしい可能性のある間違いをうまく設計された404ページに変えることができました。 ページの中央は破れた紙のようなスタイルで、その後ろには、アクセスしようとしているページを構成するはずのコードがあります。
9.自虐的な404エラーページ：クラウドシグマ
CloudSigmaが404エラーページで行ったことに関連することができます。 疑わしい場合は、犬や猫の写真を使用して、潜在的に悪い状況を緩和することを常に言います。 この場合、サイトには、コンピューターを使おうとしている猫（申し訳ありませんが、彼らのジュニア開発者）の写真が掲載されています。 タイミングがいいです。 笑わずにはいられない！
しかし、最も重要なことは、クラウドシグマサイトエラーは、ホームページに戻るための明確な方法も提供することです。 人々がウェブサイトから完全に離れてほしくない場合は、ホームページに戻るのがいつでも簡単で、クリックするだけであることを確認してください。
10.型破りな404エラーページ：LimpFish
最後に、Limpfishは404エラーページの風変わりなバージョンを使用して、すべてのユーザーの顔に再び笑顔をもたらしました。 確かに、これを最初に見たときは、デート広告と本物の技術関連のリクエストの組み合わせのようで、少し混乱していました…どちらがより明白かはわかりません。 しかし、あなたがそれについて考えるならば、誰が壊れたリンクよりも良い一致を必要としますか？
しかし、私たちがインターネット上で運営していることを考えると、新聞の効果は少し皮肉を加えます。 最終目標は成功でした。彼らは私たちを笑顔にして笑わせ、404ページにたどり着いた途端にウェブサイトを離れませんでした。
404ページについて学ぶべきこと
ブランドアイデンティティに一致する面白い、遊び心のある、フレンドリーな、またはゲーム化された側面を404ページに追加することで、訪問者をサイトにとどめ、さらにビジネスを促進することができます。 注目すべき例の1つであるゲーミフィケーションは追加の費用がかかりますが、バウンス率を下げる賢い投資です。
上記のアクションで見た便利な404ページと戦術とは別に、事故をチャンスに変えるのに役立つ推奨事項と禁止事項のリストも用意しています。特に、人々は常にタイプミスをすることがあるためです。そして、あなたはそれを制御することはできません。 ただし、壊れたページにたまたま着地した場合は、エクスペリエンスに影響を与える可能性があります。
独自の役立つ404ページを作成する際に留意すべき点がいくつかあります。
- 正直に言ってください。 私たちが言ったように、404ページがあり、時にはそれらがあなたのせいではないことさえあります。 とにかく、何が起こったのかを説明し、状況を修復し、人々が探しているものを見つけるのを助ける方法を提供するようにしてください。
- 機会をお見逃しなく。 ユーモアとブランドの個性を追加して、人々がイライラしたり、まったく離れたりしないようにします。
- ユーザーを引き付ける。 あなたの予算がそれをサポートすることができるならば、彼らにゲームをさせてください。 そうでない場合は、エンゲージメントを高める方法がいくつかあります。 かわいいビデオ、イラスト、アニメーションを追加します。 状況を軽くしてみてください。他のすべてが失敗した場合は、かわいい動物の写真やビデオも機能します。
- 彼らが去るのを止めなさい。 離れるすべてのウェブサイト訪問者は、リードを顧客に変える機会を逃しています。 最も訪問されたページに関連するリンクを追加したり、404ページに検索機能を埋め込んで、Webサイトを閲覧できるようにすることができます。
- インセンティブを追加します。 一部のブランドは、404ページを見つけた場合にインセンティブを提供します。 このようにして、さらに多くのリードを集めることができます。 たとえば、ニュースレターの登録、電子書籍やケーススタディなどの無料コンテンツなどを提供できます。
- 広告はありません。 まあ、伝統的な意味ではありません。 ウェブサイトに間違いがあり、人々がそこにたどり着いた場合は、売りすぎたり、意図的に404ページを離れていると思わせたりしないでください。
- クイックロード。 人々が壊れたページにたどり着いた場合、あなたは彼らがそれを見つけるために永遠に待つことを望まないでしょう。 ウェブサイトの他のすべてのページにも、適切な読み込み速度をお勧めします。 バウンス率は、待機時間が1秒増えるごとに増加し続けます。
- 複雑な技術用語を使用しないでください。 目標は、複雑な用語や不要な用語でユーザーを遠ざけるのではなく、ユーザーをWebサイトにとどまらせることです。
- 壊れたリンクを監視し、できるだけ早く修正することを忘れないでください。
ページが見つかりません...しかし結論は
各サイトの404エラーページのデザインは、事故を引き起こし、ブランドロイヤルティをさらに構築する機会に変えます。 創造性、優れたデザイン、そして少し鋭い機知によって、あなたのウェブサイトのデザインもエラーを心配する必要はありません-それはすべて会社の提供の延長に過ぎません。
最後のヒント：404ページにアクセスした後に離れる人の73％は、失われた潜在的な顧客の74％を占めるため、404ページのすべてのストップを引き出します。 それらはあなたのリードが逃げ出すことであり、カスタム404ページは彼らをとどめてもっと閲覧させるかもしれません。 カスタム404ページが必要かどうかではありません。 問題は、持っていない余裕がありますか？
より良いユーザーエクスペリエンスを確保するために、独自のカスタム404エラーページが必要ですか？ DesignRushには、ブランド上のWebページと本格的なWebサイトを作成できるトップデジタルエージェンシーのリストがあります。
もっと刺激的なデザインが欲しいですか？ ニュースレターにサインアップしてください！