404エラー（Not Found）ページ - UIデザインチェックリスト
こんにちは。デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage（くらげ）株式会社のデザインチーム、にゃん吉です😽
crage社内には、デザインを作りながら確認するためのUIデザインチェックリストが存在します。
各案件によって柔軟に対応するため、このリストを絶対的に正しいものとはせず、あくまで指針として用意しています。
今回は、「404エラー（Not Found）ページ」のチェックリストをご紹介します。 ※2023年7月7日更新
404エラー（Not Found）ページとは？
「間違ったURL」「URLに変更があった（新しいURLへのリダイレクト設定ができていない）」「ページが削除（または非公開に）された」などの理由で、存在しないページ・ファイルにアクセスした場合に表示されるページです。
「アクセスしようとしたページが存在せず、見つからなかった」という状態をユーザーに対して明示する役割に加えて、サイトからの離脱を防ぐ役割があります。
表示されると少し残念な気持ちになることもあるページですが、丁寧につくることで良い印象を持ってもらえるよう工夫ができるページでもあります。
📝「404」は、存在しないページへのアクセスに対してサーバーから返されるHTTPステータスコードのことです。
✅ チェックリスト
サイト独自の404エラー（Not Found）ページを作成しよう
ページを作成（設定）していない場合、レンタルサーバーで用意されている404ページなどが表示されることがあります。その場合、ユーザーとしてはアクセスしたページが表示されないという残念な体験に加えて、全く違うサイトに来てしまったと混乱する可能性もあります。
404ページもサイトの他ページと合わせたデザインで作成するようにしましょう。
企業もしくはサービスロゴはあるか
どこのサイトにいるか視覚的に理解しやすくなります。
わかりやすいタイトルをつけているか
「お探しのページは見つかりませんでした」など、404ページであることを明示できるタイトルをつけましょう。
「404」という表現だけではユーザー層によっては馴染みがないこともありますので、表現は検討が必要です。
ページに辿り着いた理由を説明をしているか
どのような理由でページに来たのかを説明するようにしましょう。
その後のアクションについても説明があるとより丁寧な印象になります。
サイトからの離脱を防ぐための導線
トップページへのリンク、検索フォームなど逃げ道となるものを用意しましょう。
アクセスしたいページに辿り着けなかったという状態となるため、サイトからの離脱を招く可能性があります。離脱を防ぐためには、他ページへの導線を設置すると良いです。
一般的にトップページへのリンクの設置することが多いですが、おすすめのコンテンツへの導線などサイトに合わせたリンクの設置も検討しましょう。また、サイトの特性によっては検索フォームを設置することで、ユーザーがアクセスしたいページへ辿り着きやすくなります。
✨ オプション
個性を出す
文言やデザインなど、遊び心のあるページを用意しているサイトも多くあります。
ユニークな404ページは、ユーザーにポジティブな印象を残すことができるかもしれません。
NASAの404ページでは「ページが削除された」などの説明ではなく「The cosmic object you are looking for has disappeared beyond the event horizon.（あなたが探している宇宙の物体は、事象の地平線の彼方に消えてしまった（DeepLでの翻訳））」という宇宙になぞらえた文を用いて、個性的な魅力のあるページとなっています。
📃 画面例
note
noteの404ページは美術館になっていて、アクセスするたびに表示される作品が変わります。
思わずリロードしていろいろな作品を見たくなってしまいますね。
ヤマト運輸
ヤマト運輸の404ページは、画面上にたくさんあるボックスがシャッフルされ、その中からクロネコが入った箱をクリックして探すというゲーム要素が用意されています。制限時間もあり、ついつい夢中になってしまいます。
📝 参考記事
いかがでしたでしょうか？
404にたどり着いてしまったユーザーに対しても、素敵な体験を提供できればと思います✨
🔖 他のデザインチェックリストはマガジンから
crageのメンバーになりませんか？
crageでは現在メンバーになっていただける方を募集中です。
ご興味ある方はぜひエントリーください…!
新たな才能、求めています。
デザインチームのページはこちらから
この記事が気に入ったらサポートをしてみませんか？