今回は、意外と悩みがちな404エラーページのデザインとユーザビリティーを上げるためのテクニックをご紹介します。間違えて入力したなど)ときに表示されるページのことです。404ページで使えるテクニックここからは、404ページで使えるテクニックをご紹介します。ページを使用することもできますが、そうしたページは魅力的ではなく、自分のウェブサイトに合わない場合があります。404ページがサイトのデザインと大きく異なると、ユーザビリティーの面でよくありません。そのため、404ページはサイトのデザインと統一させることをおすすめします。found」とだけ記載している404ページを見かけますが、読めなかったり理解できない人もいます。そのため、探しているページが見つからないことをユーザーに明確に伝える必要があります。例として、下記のような文言です。お探しのページが見つかりませんでした。お探しのページは既に削除されたかURLが間違っている可能性があります。3.次のアクションを提案するユーザーが404ページにアクセスした時、重要なのは次のアクションを提案することです。このアクションの提案の仕方次第で、ユーザーの離脱率が変わってきます。ページをわかりやすくカスタマイズすることにより、探している情報の場所をユーザーに知らせたり、役に立つ他のコンテンツを提供したり、サイト内をさらに探すよう促したりできます。トップページに戻るリンクを設置する数秒後にトップページにリダイレクトさせるページナビを設置する検索ボックスを設置するこれらの対策をすることで、ユーザーが求めているページにたどり着きやすく、回遊率を上げることもできます。404エラーページの参考になるサイトここからは、404エラーページのデザインやコンテンツの参考になるサイトをいくつかピックアップしましたので、紹介していきたいと思います!株式会社サクラクレパスサクラクレパスの404ページでは、「フォームイレーザーが消してしまったのかも」というジョークを交え、さりげなく「フォームイレーザー」へのリンクまで設置してあります!(笑)そして、「トップページ」「サイトマップ」への導線ができています。面白法人カヤックカヤックの404ページでは、日本語と英語の両方で作られています。「お望みのコンテンツがなければ、一緒にカヤックでつくってみませんか?」という誘い文句まで書かれているのが面白いですね!ヤマト運輸ヤマト運輸の404ページでは開くと同時にいきなりアニメーションで箱が動き出し、30秒間で箱の中からクロネコを探すミニゲームが始まります。見つけきれないと「もう一度トライ」の文言まで表示され、404ページで遊べるなんてよく考えるなぁと思います。Pocketsヤマト運輸http://www.kuronekoyamato.co.jp/ytc/404error.htmlヤマト運輸のWebサイトです。GitHubGitHubの404ページでは、マウスの動きとともにキャラクターも連動して動く仕組みになっています。その下には検索フォームが設置されており、コンテンツを探せるようになっています。GitHubhttps://github.com/404audikoこちらは海外のサイトですが、探偵がページを探してくれているようなイラストとともに、検索フォームが置かれています。まとめ404ページは後回しにしがちのページですが、意外と重要です。リンク切れや検索流入でたどり着くこともあります。そんな404ページを制作する際のテクニックをご紹介しました。フロントエンドエンジニア・デザイナーの社員Aです。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。