賢い404エラーページデザインを作成する方法は？

公開: 2021-12-23

すべてのウェブマスターは、ユーザーが画面に表示する最も厄介な単語が「何かが間違っている」であることを知っています。これは、404エラーページで特に当てはまります。

ユーザーがサーバー上で見つからなかった特定のページを探している場合、404エラーが発生します。これは、訪問者に遭遇させたくないタイプのランディングページですが、残念ながら発生します。 100％の確率で問題が発生しないWebサイトはありません。サイトが大きくなるにつれて、壊れたリンクや期限切れのリンクをすべて特定することがますます困難になります。そのため、この問題を認識するためのユーザーフレンドリーな方法が必要です。

巧妙な404エラーページは、ユーザーエクスペリエンスを向上させる絶好の機会を提供します。それはあなたがあなたのブランドの個性を誇示し、あなたが彼らを気にかけていることをあなたの聴衆に知らせるのを助けることができます。したがって、404ページのデザインに時間と労力を費やすことで、ユーザーが探している情報を見つけられなかったとしても、それがすべて悪いわけではないことを確認できます。

良い404エラーページを作るものは何ですか？あなたは何を含めるべきですか、そしてあなたはどのようにあなたのメッセージをかき立てることができますか？さて、お見せしましょう。

404エラーは…

このタイプのエラーページは、アクセスしようとしたWebサイトまたはWebページがサーバー上で見つからなかったことをユーザーに通知する標準のHTTPエラーコードに応答します。

404はクライアント側のエラーであり、ユーザーがURLを誤って入力したか、Webページが移動または削除されたか、URLがそれに応じて更新されなかったことを意味します。

基本的に、404エラーページが表示された場合は、問題が発生したことを意味します。ここで覚えておくべき重要なことは、エラーが発生することです。重要なのは、エラーを処理することです。

404ページデザインへの2つの主要なアプローチ

JustInMindによると、エラーページのデザインには2つの主要なアプローチがあります。

裸の骨のページ。要求したページが見つからなかったことをユーザーに通知する、単純なエラーメッセージを含む単純なページ。
ソフトページ。よりクリエイティブで詳細なページで、問題が発生した場合でも、最終的にはすべて問題がないことをユーザーに示すように設計されています。

裸の骨対。ソフトページ

404エラーページは重要なブランディングの機会です

理想的には、すべてのWebマスターは、ユーザーに404エラーページがまったく表示されないようにすることを望んでいます。ただし、Webサイトが更新されると、間違いが発生し、一部のリンクが機能しなくなる可能性があります。

404エラーが表示される時間を減らすために最善を尽くすことはできますが、その必要性を完全に取り除くことはできません。したがって、積極的に行動し、貧弱なユーザーエクスペリエンスを快適なものに変えることができるページデザインを作成することをお勧めします。

これにより、ユーザーがサイトを閲覧し続ける可能性が高まり、ブランドイメージが強化され、離職率が低下し、SEOが向上します。さらに、それはあなたがあなたの訪問者との信頼を築くと同時に、行方不明のページからの打撃を和らげることを可能にします。

賢い404エラーページの6つの重要な要素

賢く、費用効果が高く、単純な404ページのデザインは、あなたが目指すべきものです。理想的には誰も見るべきではないページを作成するために、何千時間も何ドルも費やす必要はありません。それでも、それを最大限に活用するために適切な量の努力を払う必要があります。

404がその目的を十分に果たすために、含める必要のある6つの主要なエラーページの設計要素（およびボーナス要素）を次に示します。

1.明確なエラーメッセージ

私たちの社会はデジタルリテラシーを持っていますが、404エラーが何であるかを誰もが知っていると思い込まないでください。前述のように、これはユーザーが頻繁に表示するページではないため、慣れてはいけません。

ユーザーが404ページにアクセスしたことをすぐに認識できるように、明確なエラーメッセージを含めます。問題が何であるかをわかりやすく、シンプルで役立つ方法で知らせます。

単語の選択には注意してください。マシンのような「404エラー：ページが見つかりません」というメッセージは表示しないでください。代わりに、次のようにします。 探しているページが見つかりませんでした」または「おっと！ あなたが探しているページはなくなっています。 次に、メッセージの理由を簡単に説明します。

ヒント：それがあなたのせいではなくても、申し訳ありません。それはあなたが気にかけている訪問者を示します。

2.ブランドルック

「非表示」がまだサイトの一部である場合でも、カスタム404エラーページ。そのため、他のオンラインメディアと同じ視覚的要素とブランド要素が含まれている必要があります。 –ロゴ、フォント、色、ヘッダー、そしてそれは同じ全体的にユニークなブランドアイデンティティとスタイルを維持する必要があります。

3.サイトへの機能リンク

404エラーページの主な目的は、ユーザーを正しい方向にすばやくリダイレクトすることです。したがって、これを効果的に達成するには、機能する必要があります。これは、次の3つのコンポーネントを含めることを意味します。

ホームページへのリンク–忘れてはならない基本的な要素。
メニュー–ナビゲーションを支援し、デザインの一貫性を保つため。
最高のコンテンツへのリンク–訪問者が興味を持っていると思われる高品質のコンテンツへのリンクを3〜4つ含めます。目標は、できるだけ多くのトラフィックを失うことを避け、訪問者を正しい方向に向けることです。
検索フィールド–これにより、訪問者は自分が考えていたコンテンツを検索できるようになり、コンテンツをさらに閲覧できるようになります。

4.行動の呼びかけ

404エラーページをランディングページの一種と考える場合は、同じロジックを適用する必要があります。これは、訪問者をサイトから離れずにサイトの他のページに移動するための召喚状（CTA）を追加することを意味します。

含めることができるCTAは次のとおりです。

「戻る」または「ホームページに移動」ボタン。
新しいキーワードを入力するための検索バー。
人気のあるページまたは投稿のリスト。

これにより、エラーページにさらに価値が加わり、訪問者の興味を引き付け、リードマグネットとして機能します。

5.軽いユーモア

機知に富んだ引用、ミーム、面白いイラストなどの面白い要素は、404エラーについて通知するときに常に歓迎されます。これにより、ページが面白くなり、ユーザーエクスペリエンスのイライラが軽減されます。やりすぎないように注意してください。

ユーモラスなエラーページのデザインは、訪問者の笑顔を助け、ウェブサイトでの滞在時間を長くします。言うまでもなく、それが本当に素晴らしい場合、ユーザーは仲間にそれについて話すことさえあります。ブランドの認知度と定着率を向上させるなんて楽しい（ny）方法です！

6.シンプルなデザイン

上記のすべての要素をスマートに含めることで、最終的に404エラーページが作成または破損します。あなたのウェブサイトのすべての可能なページへのビジュアルとリンクでいっぱいのデザインを作成することは間違いなくあなたの欲求不満の訪問者の忍耐の限界に達するでしょう。

少ないほど常に多いです。最良の設計は、可能な限り簡単な方法で目標を達成できる設計です。ミニマルな404エラークリエイティブは、このページがその目的をより効率的に果たすことを保証します。さらに、洗練された機能的なデザインを作成するスキルがあることを示します。

【ボーナス】7.スペシャルディール

404エラーページを活用するボーナスの方法は、訪問者に拒否できない取引を提示することです。たとえば、10％の割引を提供することで、潜在的なユーザーの失望を減らし、Webサイトに戻って、状況から利益を得るように促すことができます。

エラーページに特別な取引を含めることにした場合は、共感的な方法で寛大さを伝えるようにしてください。たとえば、「ご不便をおかけして申し訳ございません。この特別な取引であなたに任せましょう。」

あなたを刺激するいくつかの機知に富んだ404ページのデザイン

1.Spotify

音楽ストリーミングプラットフォームは、404エラーページに機知に富んだ創造的なスピンをもたらしました。シンプルなパステルカラーの背景から、「戻る」ボタン、およびレコードプレーヤーとその「404とハートブレイク」の巧妙なデザインは、よく計画された1つのページです。

ソース

2. Mailchimp

Mailchimpのウェブサイトはブランディングと個性がすべてであるため、404ページは私たちを失望させません。彼らの明確なメッセージと機知に富んだブランドのイラストがすべてを物語っています。

ソース

3.中

Mediumは、ミニマルなデザイン、適切なフォントとコピー、そして迷子になるだけで新しいものを発見できるというユーザーを慰める巧妙なメッセージを備えた優れたユーザーエクスペリエンスを提供する、すばらしいクラシックなエラーページを提供します。

ソース

4. Airbnb

ブランドの個性を真摯に受け止めている企業として、Airbnbの404ページは大ヒットです。ユーモアとフレアを使用して、ユーザーエクスペリエンスをはるかにイライラさせないようにする方法を知っています。

ソース

5.レゴ

これは、貧弱なユーザーエクスペリエンスを取り、それを販売の機会に変える404エラーページデザインの優れた例です。コピーは、軽いユーモアと強いCTAで明確です。

ソース

最終的な考え

巧妙な404エラーページのデザインは、あなたの創造性を誇示し、ユーザーがあなたのWebサイトで旅を続けることを奨励する素晴らしい機会です。何かがうまくいかなくても、すべてが大丈夫であるという安心感を与えます。

優れた404ページには、明確なエラーメッセージが表示された、ソフトでブランド化された機能的なデザインがあります。ユーザーの欲求不満を最大限に相殺するために、軽いユーモアや特別な取引を含めることもできます。

404エラーページのデザインはどのように見えるべきかについてどう思いますか？以下のコメントセクションであなたの考えを共有してください。