ユーザー向けの優れた404ページを作成する方法
公開: 2021-11-04404ページに到達することは、楽しい経験ではありません。 しかし、それがユーザーがあなたのウェブサイトで経験する最終的な経験ではないことを確認するためにあなたができることがあります。
優れた404ページをデザインするには、どの要素がユーザーにとって最も有用であり、ページを目立たせるのに役立つかを知る必要があります。
404ページを最大限に活用するのに役立つ6つの機能のリストを次に示します。
404コードとは何ですか？
404は、ページが見つからない場合に表示されるHTTPステータスコードの1つです。
404は4xxグループに属しており、クライアント側のエラーであることを示しています。 具体的には、クライアントがサーバーに到達したが、サーバーが要求されたファイルを見つけられなかったことを意味します。
404コードは、次のようなさまざまな理由で表示される可能性があります。
- ページが削除されました、
- ユーザーがURLの入力中にタイプミスをした場合、
- ページを指すリンクが正しくありませんでした。
404コードの理由に関係なく、ページが見つからないため、ユーザーはページにアクセスできません。
欠落しているページの代わりにユーザーに表示されるページは、ユーザーが制御できます。 オプションは次のとおりです。
- 標準の404ページ、または
- カスタム404ページ。
標準のカスタマイズされていない404ページには、白い背景に「見つかりません」という単純なテキストが含まれている場合があります。 サーバーはこのページを自動的に生成します。
一方、404ページをカスタマイズすることもできます。ウェブサイトの残りの部分に合うようにデザインし、含める要素を選択します。
カスタム404ページを作成する必要がある理由
適切に設計されたカスタム404ページは、ユーザーとビジネスの両方にとって有益です。
ユーザーが標準の404ページに入ると、何かがうまくいかなかったことを理解するだけで、ページが見つかりませんでした。 彼らは何が起こったのか、次に何をすべきかを知りません。
その結果、顧客はニーズを満たさずにサイトを終了する可能性があります。 これは理想からは程遠いです。 ユーザーは検索に満足せず、あなたは彼らのビジネスを失いました。
カスタム404ページを使用すると、デフォルトの役に立たないページを、ユーザーとビジネスの両方にとって役立つものに変更できます。
カスタム404ページでは、次のことができます。
- ユーザーが探している情報を見つけられるように支援し、
- ユーザーにあなたのページを探索するように促し、
- ブランドの声と創造性を示してください。
さらに、カスタム404ページを作成することをGoogleが推奨しています。
サーバーの構成ファイルにアクセスできる場合は、これらのエラーページをカスタマイズすることで、ユーザーにとって便利なものにすることができます。 優れたカスタム404ページは、ユーザーが探している情報を見つけるのに役立ちます。また、ユーザーがサイトをさらに探索するのに役立つその他の役立つコンテンツも提供します。出典： Google
引用は、Googleがカスタム404ページをユーザーにとって役立つと考えており、サイト所有者が404ページをカスタマイズすることを奨励していることを明確に述べています。
優れたカスタム404ページを作成する方法
404ページを完全にカスタマイズした場合でも、サーバーが404HTTPステータスコードを返すことを確認してください。 200のコードを設定することは悪い習慣であり、ページが実際に存在しない場合に正常な応答を提案します。
404ページに何を含めるかを決定する場合、重要な要素の1つは、エラーページであることを明確に示すメッセージです。 フレンドリーでわかりやすい方法で問題が発生したことをユーザーに通知します。
しかし、それはほんの始まりにすぎません。 カスタム404ページをより便利にするために追加できる主な機能は次のとおりです。
- 検索バー、
- あなたのウェブサイトで利用可能なリソースのリスト、
- CTAボタン、
- トップコンテンツへのリンク、
- あなたのブランドに合ったデザイン。
優れた404ページの鍵は、ユーザーにとっての有用性です。 上記のリストのすべての要素を含める必要はありません。ユーザーがWebサイト内を移動するのに役立つ要素だけを含める必要があります。
エラーメッセージをクリアする
優れた404ページには、エラーページであるという明確なメッセージが常に含まれている必要があります。 選択するデザインに関係なく、何かがうまくいかず、ページが見つからなかったことを常にユーザーに知らせる必要があります。
Ikeaはこれを非常にうまくやっています。 404コードと簡単な説明の両方を含む明確なメッセージを提供し、ユーザーが簡単に理解できるようにします。
検索バー
検索バーを使用すると、特定のコンテンツを探しているユーザーは、別のショットを与えて、Webサイトで探していたものを検索できます。
検索バーのある404ページの良い例は、 Moz.comです。
したがって、Moz.comで特定の何かを探していたのに見つからなかった場合は、404ページをもう一度見ることができます。
リソースのリスト
ユーザーが404ページにたどり着いたが、検索バーに入力する特定のことを考えていなかった場合は、Webサイトにあるリソースのリストを提供できます。
バックカントリーには、ウェブサイトと重要なページのリストに合うシンプルなデザインのカスタム404ページがあります。
このページはユーザーにとって役立つだけでなく、バックカントリーがそのコンテンツを披露し、人々にWebサイトを探索するように促すこともできます。
リソースのリストを含む404ページの別の例はTripadvisorです。 ちょっとしたユーモアと4つのシンプルなボタンを備えたトリップアドバイザーは、ユーザーが最も興味を持つ可能性のあるセクションを簡単に閲覧できるオプションを提供します。
CTAボタン
CTAボタンを含めることで、ユーザーが実行できる次のステップをユーザーに示すことができます。
CTAボタンの最も簡単な使用法は、ユーザーをホームページに誘導することです。 ユーザーにガイダンスを提供するシンプルで効果的な方法。
これは、ホームページにつながるCTAボタンを備えたNetflixの404ページの例です。
別の解決策は、 「お問い合わせ」CTAボタンを含めることです。 たとえば、ユーザーが特定の質問をしていて、404ページで回答が得られなかった場合、詳細について問い合わせることができます。
ユーザーは、「お問い合わせ」オプションを使用してエラーを報告することもできます。
Kinstaには、「メインページ」ボタンと「お問い合わせ」ボタンの両方が含まれています。 ユーザーは、Webサイトにアクセスするか、会社に連絡することができます。 したがって、Webサイトを探索したり、特定の質問に対する回答を見つけたりしたい人にソリューションを提供します。
CTAボタンは、ユーザーに役立つだけでなく、ビジネス目標にも適合します。 たとえば、メールを残してニュースレターを購読するオプションを含めることができます。
9gagは、404ページを使用して、ユーザーにアプリのダウンロードを促しています。 背景gifの追加は、9gagスタイルに完全に適合します。
トップコンテンツへのリンク
人気のあるコンテンツは、ユーザーのエンゲージメントを維持する可能性が最も高くなります。 ユーザーが404ページを離れる前に、ユーザーの注意を引く機会が与えられます。
最も人気のあるコンテンツへのリンクは、eコマースWebサイトにとって特に有益です。これは、他の方法では行き止まりになっているページで最も売れている製品を宣伝できるためです。
トップコンテンツを紹介する404ページの優れた例は、 UrbanOutfittersのWebサイトに示されています。 「最も人気のある」セクションがあり、すぐにアイテムを購入することができます。
ブランドアイデンティティ
404ページをカスタマイズし、それをWebサイトのデザインに合わせると、顧客がWebサイトをたどる過程全体を本当に気にかけていることを示すことができます。
404ページには、ブランドのトーンと個性を表示できます。 ウェブサイトのスタイルに合ったクリエイティブなデザインは、人々を笑顔にし、友達とページを共有するように促すことさえできます。
ピクサーは、404ページでよく知られている文字の1つを使用しています。 このページには広範なナビゲーション機能はありませんが、グラフィックと心温まるメッセージはブランドのスタイルに完全に適合しています。
「Takemehome」ボタンのほかに、 Canvaにはユーザーが楽しめる小さなパズルが含まれています。 その創造性と独自性は他のページの中でも際立っています。 これは、標準の404ページの楽しい代替手段です。
まとめ
標準の404ページをユーザーに任せないでください。
ユーザーは、何が起こったのか、次に何をすべきかについての情報を決して残してはなりません。
代わりに、サイト全体で優れたエクスペリエンスを作成するように努めてください。 これにはエラーページが含まれます。