あなたが実際に見つけたい404ページの10の例+あなた自身のものを作る

公開: 2021-01-25

オンラインで多くの時間を費やしている場合は、少なくとも1つの404ページに遭遇している可能性があります。 いくつかのカスタムエラーページに出くわしたことさえあるかもしれません。 なぜ企業が訪問者のための創造的なメッセージをデザインするのに貴重な時間を費やすのか疑問に思ったことはありませんか?

標準の404エラーページはほとんど言うことがなく、訪問者が迷子になっていると感じることがよくあります。 さらに悪いことに、ユーザーを積極的に遠ざける可能性があります。

カスタムページを持っていることはあなたのビジネスにデザイン賞を勝ち取らないかもしれませんが、それはあなたがあなたの訪問者とあなたのウェブサイトでの彼らの経験を気にかけていることを示しています。 また、ブランドの個性を示す革新的な方法でもあります。

見栄えの良い404ページに投資する価値はありますか? もちろん。

目次

  1. 404エラーとは何ですか?
    1. 訪問者はどのように404エラーに遭遇しますか?
  2. 見事に創造的な404ページの10の例
    1. 悲鳴を上げるカエル
    2. ConvertKit
    3. アパート療法
    4. モズ
    5. CoSchedule
    6. ディズニー
    7. レゴ
    8. スプラウトソーシャル
    9. スカウトを助ける
    10. BluePath
  3. カスタム404ページの利点
    1. 検索エンジンがあなたのウェブサイト上のより多くのページを索引付けするのを手伝ってください
    2. 一貫したブランドイメージを提示する
    3. 失われた訪問者を幸せな訪問者に変える
    4. コンバージョンを増やす
  4. 動作するオリジナルの404ページを作成する方法
    1. 含めるべきもの
    2. あなたがしてはいけないこと
  5. 最後の言葉

404エラーとは何ですか?

基本的に、404エラーは、要求されたページまたはURLが利用できない場合、または場合によっては存在しない場合に発生します。 標準のランディングページのメッセージは訪問者に問題について通知しますが、追加情報を提供したり、ユーザーに留まることを勧めたりすることはめったにありません。

404エラー発生すると、いくつかの重大な問題が発生する可能性があり、適切に管理されているWebサイトで発生する可能性があります。

たとえば、Googleは定期的にボットを送信してウェブページをクロールしてカタログ化します。 検索エンジンでこれらの問題が発生した場合、サイトのユーザーエクスペリエンスが低いと判断されます。 また、SEO、Webサイトのトラフィック、検索ランキングにも影響します。

完璧な世界では、サイトの訪問者は404エラーページに遭遇することはありません。 ただし、ユーザーが楽しんで役立つカスタムWebページを作成することはできます。 スマートグラフィック、関連リンク、および機知に富んだコピーを使用すると、ユーザーは何かがうまくいかなかったことを忘れて、ブラウジングに戻る可能性があります。

多くのWeb開発機関は、404エラーページを回避するか、独自のページのデザインを考え出すのに役立ちます。

訪問者はどのように404エラーに遭遇しますか?

残念ながら、ユーザーが404エラーに遭遇する理由はいくつかあります。 最も一般的な原因は次のとおりです。

  • そのページはもう存在しません。
  • ユーザーがURLを間違って入力しました。
  • サイトに壊れたリンクがあります。
  • ページが移動し、リダイレクトされませんでした。
  • サーバーがダウンしている可能性があります。

つまり、ユーザーが見つからないURLにアクセスしようとすると、ユーザーはWebサイトの404ページに送信されます。 それは苛立たしい経験になる可能性があり、貴重なコンバージョンに費用がかかる可能性があります。 幸いなことに、うまく設計されたオリジナルの404ページとクリエイティブなエラーメッセージを使用して、ネガティブな印象をポジティブな印象に変えることができます。

アディクタ
カイロ、エジプト
4.9-3つの推奨事項
デジタル&マーケティング戦略Eコマースモバイル&アプリ開発ウェブ&ソフトウェア開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
trustylabs
TrustyLabs
アンタナナリボ、イッシーレムリノー、マダガスカル、フランス
5-2の推奨事項
モバイル&アプリ開発Web開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
ジッパー
ジッパースタジオ
オイラスブルク、クルージュ=ナポカ、ドイツ、ルーマニア
5〜10の推奨事項
モバイル&アプリ開発ウェブ&ソフトウェア開発ウェブデザインウェブ開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
app1
パフォーマンスの本拠地
ドバイ、アラブ首長国連邦
5 / 5-7つの推奨事項
ウェブ開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
あなたの
diARK
ブカレスト、ルーマニア
5 / 5-3つの推奨事項
広告&ディスプレイマーケティング広報Web開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
we1
Destinareマーケティンググループ
ドーハ、カタール
5 / 5-1推奨
広告&ディスプレイマーケティングWeb開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
artx1
ArtX Pro
パキスタンのカラチ市
5 / 5-3つの推奨事項
デジタル&マーケティング戦略マーケティングWeb開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
estim1
Virtualspiritテクノロジー
セリケンバンガン、マレーシア
5 / 5-1推奨
デジタル&マーケティング戦略モバイル&アプリ開発ウェブ開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
約
コンテンツネーション
クアラルンプール、マレーシア
5 / 5-1推奨
広告およびディスプレイコンテンツマーケティングWeb開発
代理店を発見するarrow_forward
ice1
Icetulip
レバノン、ベイルート
5 / 5-3つの推奨事項
広告&ディスプレイデジタル&マーケティング戦略ウェブ開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
45
ChubbyRawitデジタルマーケティングエージェンシー
南ジャカルタ、インドネシア
5 / 5-10の推奨事項
広告&ディスプレイデジタル&マーケティング戦略マーケティングWeb開発
代理店を発見するarrow_forward
30
FMG
インドネシア西ジャカルタ市
5 / 5-5つの推奨事項
広告&ディスプレイマーケティングWeb開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
ベロマ
heydaysss
香港島、香港
5 / 5-6つの推奨事項
マーケティングWeb開発
代理店を発見するarrow_forward
アリカ
鉛筆のデザイン
エジプト、ニューカイロ市
5 / 5-2つの推奨事項
デジタル&マーケティング戦略Web開発
代理店を発見するarrow_forward
柑橘類
センディアンの作品
アルマーディ、エジプト
5 / 5-6つの推奨事項
マーケティングWeb開発
代理店を発見するarrow_forward
タムタム
ナイルコード
Qesm Torah、エジプト
5 / 5-4つの推奨事項
デジタル&マーケティング戦略Web開発
代理店を発見するarrow_forward
ses
WebbingStone
エジプト、10月6日市
5 / 5-13の推奨事項
コンテンツマーケティングデジタル&マーケティング戦略マーケティングWeb開発
代理店を発見するarrow_forward
pppppp
bni –明るい新しいアイデア
エジプト、ナスルシティ
5 / 5-9つの推奨事項
デジタル&マーケティング戦略Web開発
代理店を発見するarrow_forward
ディディディッド
Intcore
ギザ県、エジプト
5 / 5-6つの推奨事項
デジタル&マーケティング戦略SEOWeb開発ウェブサイト作成ソフトウェア
代理店を発見するarrow_forward
lilliliil
O2メディアグループ
ギザ、エジプト
5 / 5-14の推奨事項
デジタル&マーケティング戦略マーケティングWeb開発
代理店を発見するarrow_forward
エルシエロデジタル
コムナ1、アルゼンチン
5 / 5-29の推奨事項
広告とディスプレイのWeb開発
代理店を発見するarrow_forward

見事に創造的な404ページの10の例

ユーザーフレンドリーで視覚的に魅力的な404ページを作成すると、訪問者は自分の体験に関心があり、サイトにとどまることに関心があることがわかります。

うまくいけば、見事な404ページは、ユーザーがエラーを許したり、間違ったURLを入力したことに気付くのを助けたりします。

適切に設計された404ページは、訪問者を笑顔にし、さらに重要なことに、探しているものを見つけるのに役立ちます。 ウェブ上の何百万もの中から、さまざまなブランドの創造性と個性を示す最高の404ページを見つけました。

これは、非常によくできている革新的な404ページの10の例です。

悲鳴を上げるカエル

皮肉なことに、Screaming Frogは、サイト所有者が壊れたリンクを見つけて修正するのに役立つサービスです。 彼らは、自分たちで少し楽しんだ後、連絡先ページ、サービス、ブログへの迅速なアクセスを提供することで、 404ページを持っていることを認めています。

悲鳴を上げるカエル

Screaming Frogの404ページはアニメーション化されており、上から見ると小さな池のように見えます。 魚が浮き、ユリのパッドが回転し、ハエがページを動き回ります。 しかし、名ばかりのカエルは行方不明です。 小さな変更かもしれませんが、大きな印象を残します。

ConvertKit

ほとんどの人は犬が大好きで、ConvertKitは恥知らずにこれらの毛皮のような仲間との絆を利用しています。

Convertkit

このページには、チームメンバーの犬の愛らしい写真が表示されます。 かわいらしさから離れることができれば、ホームページへのリンクと彼らのオンラインチャットへのアクセスを見つけることができます。 ページのシンプルさは、ページを魅力的なものにする機能の1つです。

アパート療法

Apartment Therapyは家の装飾のウェブサイトであり、和紙テープは装飾やスクラップブッキングに使用される人気の接着剤です。 ブランドの404ページは、和紙でさえ壊れたリンクを修正できないと冗談を言って、これら2つの要素を巧みに組み合わせています。

アパート療法

このページには、訪問者の関心を維持するために、折り目のすぐ下にいくつかの人気のある投稿が表示されます。 また、検索機能とナビゲーションバーが含まれているため、ユーザーは引き続きWebサイトを探索できます。

モズ

Mozは、ブランドのマスコットであるRoger Mozbatのカメオを使用して、比較的シンプルにしています。 それはほとんどの人を笑顔にするだけでなく、ブランドにも影響を与え、会社の個性と完全に一致します。 目に見える検索バーもあるので、人々は必要なものを見つけることができます。

moz404ページ

CoSchedule

CoScheduleはマーケティングスケジューリングツールです。 彼らは愛らしい犬のGIFを表示すると同時に、ブログやホームページへのリンクを提供することで、物事を簡単に保ちます。 このブランドは、魅力的で面白い404ページを作成するために多額の費用をかける必要がないことを示すことで素晴らしい仕事をしています。

404ページのスケジュールを調整

シンプルで甘いですが、仕事をします!

ディズニー

ディズニーの404ページは、破壊で知られる最も人気のあるキャラクターの1人、マイケル「マイク」ワゾウスキーを強調することで、公園からそれをノックアウトします。

ディズニー404ページ

このキャラクターは404ページにぴったりです。 興味深いことに、訪問者の地理的な場所に応じて変化するディズニーのエラーページ。

レゴ

レゴ404ページはまさにあなたが期待するものです。 状況にかなり動揺しているように見える小さなレゴの男と日当たりの良い砂漠。 ブランドにピッタリ合うだけでなく、お店への来店を促します。 これは、おもちゃに着想を得た楽しいエラーページで機能し、違和感を感じない、説得力のある召喚状です。

レゴ404

スプラウトソーシャル

Sprout Socialはソーシャルメディアマーケティングツールであり、彼らは本当に顧客のページを維持したいと考えています。 まず、同社は、サイバースペースで迷子になっている訪問者をからかう冗談を言います。 面白いですが、本当に際立っているのは、会社がページを使用して問題をリードに変える方法です。

スプラウトソーシャル404

ブランドの404ページは、無料のデモを提供するCTAボタンを使用して、エラーを会話に変える方法のもう1つの優れた例です。 それが探しているものでない場合は、画面上部のメニューを使用して移動できます。

素晴らしい動きで、SproutSocialは404ページをランディングページに変えました。

スカウトを助ける

ヘルプスカウトは、ヘルプデスクソフトウェア、電子メールベースのカスタマーサポート、およびオンラインナレッジベース用のツールを企業に提供します。

スカウト404を助ける

繰り返しますが、他の多くの人と同じように、彼らは人間と彼らの毛皮のような仲間の間の絆を最大限に活用しています。 今回は、逃げる犬を捕まえようとする、かわいそうな犬の歩行者に共感することができます。

BluePath

BluePathは、 404ページでスキルを紹介するための優れたアイデアを思いついたデータおよび戦略分析会社です。 彼らはまた、不快感を与えることなく、ユーザーを少し楽しませることもできます。

ブルーパス404

画面の左半分には、アトランタのいくつかのデータポイントを示す地図があります。 それなら君がいてくれた。 マップからかなり離れた小さな点。 どうして? BluePathによると、それはあなたが彼らの優れたデータ分析スキルのために彼らを雇わないことによって犯罪を犯したからです。

カスタム404ページの利点

多種多様なページを含む大規模なサイトがある場合は、いくつかのリンク切れも発生する可能性があります。 これは、サイトが成長し、ページのURLが変更されるときに発生する一般的な副作用です。 カスタムビルドの404ページを使用すると、訪問者が必要な情報にたどり着くのに役立ちます。

独自の404ページを作成するには、労力と少しの技術的知識が必要です。 経験豊富なデザイナーがいない限り、.htaccessファイルを編集して、サーバーでいくつかのコマンドを実行する方法を学ぶ必要があります。 WordPressのようなCMSで実行する場合、一部のプラグインはプロセスを簡素化できます。

それでも、カスタム404ページのデザインに必要な時間をなぜ投入する必要があるのか​​疑問に思われるかもしれません。 それを使用する方法を知っていれば、それはあなたのウェブサイトの武器庫にあるシンプルでありながら非常に効果的なツールであり、それを持っていることにはいくつかの注目すべき利点があります。

検索エンジンがあなたのウェブサイト上のより多くのページを索引付けするのを手伝ってください

Googleのような検索エンジンは、多くの場合、新しいページのインデックスを作成するためにクローラーを送信します。 通常、404ページに遭遇するとSEOに悪影響を及ぼします。 ただし、代わりに検索エンジン最適化を向上させる404ページを設計することもできます。

約25以上の内部ページをリンクすることで、これらのクローラーがサイトのインデックスを作成しやすくなります。 さらに、表示されるリンクをランダム化するコードを作成することもできます。 したがって、ページが更新されるたびにリンクが変更されます。

このプロセスにより、インデックスに登録されるページ数が増え、Googleなどのエンジンが検索結果にコンテンツを表示しやすくなります。 SEOの第一人者であるNeilPatelによると、この方法はサイトの検索エンジントラフィックを大幅に増やすことができます。

一貫したブランドイメージを提示する

あなたのブランドはあなたの最も重要な資産の1つです。 それは人々をあなたの製品やサービスに引き付け、顧客の忠誠心を築くものです。 人々は、あなたが彼らの価値観を共有し、あなたが彼らの経験を気にかけていると感じたいと思っています。 彼らはまたあなたのブランドとの魅力的な関係を築きたいと思っています。

オリジナルの404ページでは、ブランドの個性をアピールしながら、一貫したメッセージと外観を訪問者に提示できます。 また、訪問者がブロックされたサーバーや壊れたサイトではなく、まだあなたのサイトにいることを安心させます。

最終的に、404エラーページは、同じ配色、フォント、ロゴ、ヘッダー、フッター、およびナビゲーションを使用して、Webサイトの他の部分と同様にブランド化する必要があります。 ページ上のSEO代理店を使用すると、ブランドとベストプラクティスに沿ってページをさらに最適化するのに役立ちます。

失われた訪問者を幸せな訪問者に変える

特定のトピックに関する情報を探しているときに、ページにたどり着いたふりをします。 ただし、検索エンジンの結果に表示されているリンクを開いた後は、探していた答えが得られません。 代わりに、「ページが見つかりません」というエラーメッセージが表示されます。

残念ながら、多くのサイトはこの絶好の機会を利用していません。 代わりに、彼らは怒っている訪問者が不満な経験で去ることを可能にします。 オリジナルの最適化された404ページを使用することにした場合は、その可能性のある変換が失われるのを防ぎ、代わりに貧弱なエクスペリエンスを楽しいものに変えることができます。

次の戦術を使用して、失われたサイトの訪問者のエクスペリエンスを向上させます。

  • 状況を打開するためにユーモアを使う
  • ユーザーが責任を負う可能性がある場合でも、責任を負います
  • 彼らが情報を探すことができるように検索バーを提供する
  • ホームページに戻るリンクを含める
  • 彼らが訪問したいと思うかもしれない有用なリンクを提案する
  • 支援できる人に連絡する方法

あなたは状況を和らげ、その人が去ることを防ぐだけでなく、彼らのネガティブな経験をより破壊的でよりポジティブなものに変えるでしょう。

コンバージョンを増やす

404エラーページには、サイトの訪問者に、間違いを受け入れるだけでなく、楽しい体験ができることを確認する必要があります。 目標は、壊れたリンクまたは切れたリンクの記憶を消去し、彼らがあなたと取引することを奨励することです。

404ページの使用を開始して、サイトの訪問者を顧客に変えます。

人々があなたの404ページにたどり着いたら、割引または独占的なオプトインオファーを提供します。 さらに一歩進んで、リクエストURLのキーワードに基づいてカスタマイズされたリンクの推奨事項を提示できます。 メールやお問い合わせフォームを提供して、サポートが必要な場合もあります。

動作するオリジナルの404ページを作成する方法

オリジナルの404ページを作成する場合は、いくつかの手順に従って、より効果的にすることができます。 最も重要なことは、最も有用な404ページはシンプルでありながら効果的であることを忘れないでください。 複雑で紛らわしいWebページを作成すると、サイトの訪問者をさらに苛立たせるだけです。

以下では、サイトに最適な404ページの1つを設計するためのいくつかの推奨事項と禁止事項について説明します。

含めるべきもの

過去数年間、人目を引く404エラーページの人気が大幅に高まっています。 彼らは訪問者に便利なリンク、少しの楽しみ、そして笑顔の理由を提供することができます。 404ページがあなたのサイトへのあなたの訪問者のための最後の停止である理由はありません。

効果的な404ページをデザインするのに役立ついくつかの便利なヒントを次に示します。

強力な見出し

404ページにたどり着いた理由を人々に説明する強力な見出しまたはテキストを用意することが重要です。 必要な情報がないページに到着すると、訪問者はイライラしてすぐに離れることができます。 あなたの見出しは、エラーページが発生したにもかかわらず、彼らが正しい場所にいることを彼らに知らせるべきです。

ブランディング

404ページは、他のWebページと同じように見えるはずです。 ブランドを簡単に認識し、その個性をアピールする機会を利用してください。

404の説明

訪問者が404ページにアクセスしたら、そこに到着した理由を説明します。 ページが「移動された」または「もう存在しない」と述べると、訪問者は、ブラウザベースのパックマンゲームが、期待していた素敵な黄色いレインコートに取って代わっていないことを理解するのに役立ちます。

便利なリンク

それはあなたのウェブサイトであり、どのページまたはディレクトリが最も人気があるかを知っている必要があります。 訪問者が最小限の混乱を経験できるように、これらのページまたはディレクトリへのリンクを含めます。

検索バー

404ページに検索バーを含めると、ユーザーは正しいリンクやWebページを探すことなく必要な情報を見つけることができます。 人々に検索する能力を与えることによって、あなたは彼らがエラーに遭遇した後に彼らが要約的に去る確率を減らします。

アクションの呼び出し

召喚状(CTA)を設定することは、ユーザーをWebページにとどまらせるための優れた方法です。 データを受け取りながら、謝罪として割引、景品、またはダウンロード可能なギフトを提供できます。 これは、不幸な訪問者を潜在的なリードに変えるためのシンプルで手頃な方法です。

あなたがしてはいけないこと

クリエイティブな404ページをデザインするための優れた方法があり、非常に貧弱なものもいくつかあります。 以下では、元の404ページを作成するときに行うべきではないいくつかのことについて説明します。

エラーURLへのリダイレクトを避ける

Webサイトにエラーページのコンテンツが表示され、訪問者が/ 404や/error.htmlなどの別のページにリダイレクトされないようにすることが重要です。 リダイレクトすると、訪問者は問題のあるURLを調べることができなくなり、問題のあるリンクアドレスに関する分析データを収集できなくなります。

ホームページにリダイレクトしないでください

訪問者をホームページに送ることは賢い解決策だと思うかもしれませんが、検索エンジンはそれを「スパム行為」と見なします。 実際、リダイレクトに関係なく、インスタンスをソフト404として扱うものもあります。

メタリフレッシュタグリダイレクトの使用を避ける

一部のWebサイトでは、メタリフレッシュタグを使用して、404エラーが数秒間表示された後、訪問者を別のページに送信します。 訪問者を同意なしに別のページに強制的にリダイレクトすることは、ひどい行為と見なされます。 また、誤解を招く可能性があり、マルウェアやアドウェアに遭遇するリスクを冒すよりも、人々は去りたいと考えています。

最後の言葉

404ページとの出会いは悪い経験である必要はありません。 実際、それは人々があなたとさらに関わることを奨励するための素晴らしい方法です。 うまくいけば、他の人による素晴らしい作品のいくつかを見た後、あなたは自分自身がインスピレーションを得ていることに気付くでしょう。 独自のオリジナルの404ページをデザインする準備をしている場合は、次の点に注意してください。

  • ユーザーがまだ適切な場所にいることをユーザーに安心させる必要があります。
  • リンクが壊れているか欠落していることを恐れずに責任を負ってください。
  • クリエイティブになって、思い出に残る、または面白いものを作りましょう。
  • デザインのブランディングと一貫性を保ちます。
  • ページに役立つ情報を追加します。
  • 召喚状を含めることを忘れないでください。
  • 自動リダイレクトを使用して、ユーザーを別のページに強制的に移動させないでください。

最も重要なことは、楽しんでください。 あなた自身、あなたのブランド、またはあなたのユーザーをからかうことは何も悪いことではありません。 ただし、無害なユーモアと非専門的または攻撃的になることの間には線があることを忘れないでください。

404ページを強力な資産に変える準備はできていますか?