デザイン
意外と悩む404エラーページのデザインとユーザビリティー向上のテクニック
2018年10月13日 12:00
こんにちは！社員Aです👩
今回は、意外と悩みがちな404エラーページのデザインとユーザビリティーを上げるためのテクニックをご紹介します。
もくじ
404ページとは？
404 ページとは、ユーザーがサイト上で存在しないページにアクセスしようとした（無効なリンクをクリックした、ページが削除されている、URL を間違えて入力したなど）ときに表示されるページのことです。
404ページで使えるテクニック
ここからは、404ページで使えるテクニックをご紹介します。
1.サイトのデザインと統一させる
サーバーが返す標準の 404 ページを使用することもできますが、そうしたページは魅力的ではなく、自分のウェブサイトに合わない場合があります。
404ページがサイトのデザインと大きく異なると、ユーザビリティーの面でよくありません。そのため、404ページはサイトのデザインと統一させることをおすすめします。
2.探しているページが見つからないことを明確に伝える
たまに、国内のサイトで「Page not found」とだけ記載している404ページを見かけますが、読めなかったり理解できない人もいます。
そのため、探しているページが見つからないことをユーザーに明確に伝える必要があります。
例として、下記のような文言です。
- お探しのページが見つかりませんでした。
- お探しのページは既に削除されたかURLが間違っている可能性があります。
3.次のアクションを提案する
ユーザーが404ページにアクセスした時、重要なのは次のアクションを提案することです。このアクションの提案の仕方次第で、ユーザーの離脱率が変わってきます。
404 ページをわかりやすくカスタマイズすることにより、探している情報の場所をユーザーに知らせたり、役に立つ他のコンテンツを提供したり、サイト内をさらに探すよう促したりできます。
例えば、下記の様な方法です。
- トップページに戻るリンクを設置する
- 数秒後にトップページにリダイレクトさせる
- ページナビを設置する
- 検索ボックスを設置する
これらの対策をすることで、ユーザーが求めているページにたどり着きやすく、回遊率を上げることもできます。
404エラーページの参考になるサイト
ここからは、404エラーページのデザインやコンテンツの参考になるサイトをいくつかピックアップしましたので、紹介していきたいと思います！
株式会社サクラクレパス
サクラクレパスの404ページでは、「フォームイレーザーが消してしまったのかも」というジョークを交え、さりげなく「フォームイレーザー」へのリンクまで設置してあります！（笑）
そして、「トップページ」「サイトマップ」への導線ができています。
面白法人カヤック
カヤックの404ページでは、日本語と英語の両方で作られています。
また、「お望みのコンテンツがなければ、一緒にカヤックでつくってみませんか？」という誘い文句まで書かれているのが面白いですね！
ヤマト運輸
ヤマト運輸の404ページでは開くと同時にいきなりアニメーションで箱が動き出し、30秒間で箱の中からクロネコを探すミニゲームが始まります。
また、見つけきれないと「もう一度トライ」の文言まで表示され、404ページで遊べるなんてよく考えるなぁと思います。
GitHub
GitHubの404ページでは、マウスの動きとともにキャラクターも連動して動く仕組みになっています。
また、その下には検索フォームが設置されており、コンテンツを探せるようになっています。
audiko
こちらは海外のサイトですが、探偵がページを探してくれているようなイラストとともに、検索フォームが置かれています。
まとめ
404ページは後回しにしがちのページですが、意外と重要です。リンク切れや検索流入でたどり着くこともあります。
そんな404ページを制作する際のテクニックをご紹介しました。
ユーザーの離脱率にも関わってくるので、あなどれないです！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
