失われた訪問者を取り戻すための404ページ事例ベスト19 

最高の404ページの例をお探しですか？そして、優れた404ページがサイトのコンバージョンを増やし、収益を上げることをご存知ですか？

かなり乱暴な主張に聞こえるかもしれない。しかし、適切に最適化された404ページは、失われたサイト訪問者を忠実なリピーターに変える力を持っている。

この記事では、私たちが発見した最高の404エラーページの例と、なぜそれらがうまく機能するのかを探ります。

最高の404ページを紹介する前に、なぜ404ランディングページを持つことがあなたのビジネスにとって重要なのかを見てみましょう。

404エラーページとは何か、なぜ必要なのか？

時間が経つにつれて、いくつかのウェブサイトのリンクが悪くなることはすでにご存知かもしれません。それは、ページの欠落、貧弱なコンテンツの削除、ウェブデザインやホームページの変更、あるいはウェブサイトのパーマリンク構造の変更が原因かもしれません。

だが、問題はここからだ。

削除または移動されたページは、検索エンジンやソーシャルメディアでは古いURLで表示されることが多い。そのため、誰かがそのページにアクセスすると、404エラーページが表示され、ページが見つかりませんというメッセージが表示されます。これは、ユーザーがURLをタイプミスしたり、壊れたリンクや死んだリンクをクリックした場合にも起こる可能性があります。

それを念頭に置いて、現在のWordPressの404ページのデザインをじっくりと見てみましょう。あなたのブランドを正確に反映していますか？

そうでなければ、訪問者や潜在顧客を失うことになりかねない。

例えば、404エラーメッセージのページが次のようなものだとしたら...。

...それは人々を遠ざけ、二度と戻ってこないかもしれない。

とはいえ、404 not foundのランディングページを最適化するのであれば：

• 素晴らしい映像
• 素晴らしいコピー
• 役立つ情報とリンク
• メールアドレスの収集方法

直帰率を減らし、ウェブサイトの購読者とコンバージョンを増やすことができます。

404エラーページとは何か、なぜあなたのウェブサイトにとって重要なのかがわかったところで、最高の404ページの例を見てみましょう。運が良ければ、あなた自身のカスタム404ページを作成するのに役立つ404デザインのインスピレーションを得ることができるでしょう。

実在するブランドの404ページ事例ベスト11

以下の404エラーページのデザインは、オンライン上の本物のブランドから抜粋したものです。なぜそのデザインが効果的なのかを説明し、自分でもできるようにするためのヒントを提供します。

1.レゴ - フレンドリーな404ページデザインのインスピレーション

レゴの404ページは、ユーモアと優れたブランディングを使ってウェブサイト訪問者を惹きつけた好例である。

エメットは、あなたが探しているページが見つからないことを残念に思っている。エメットは、あなたが探しているページが見つからなかったことを謝り、心配することはないと告げ、すべてが素晴らしいものだと安心させる。

その時点で、あなたの頭の中を曲が鳴り響き、彼は明確なコール・トゥ・アクション（CTA）ボタンで買い物を始めるよう誘う。

このコンセプトは、親しみやすく、わかりやすく、完全にオン・ブランドであるため、うまく機能している。

同じような404ページのデザインを作るには、技術的な言葉をすべて削除し、より人間的な言葉に置き換えてください。Don't worry（心配しないで）、oops（おっと）、sorry（申し訳ございません）などの言葉を使い、エラーページが自分のせいではないとユーザーを安心させましょう。

また、あなたのブランドに関連した画像を使用することで、ユーザーは自分がほぼ正しい場所にいることを知ることができます。そして、CTAボタンを使えば、ユーザーが探しているものを見つけやすくなり、ウェブサイトに長く滞在してもらうことができます。検索ボックスや検索バーを含めることも、ユーザー体験を向上させ、SEOパフォーマンスを改善する素晴らしい方法です。

2.Slack - 404ページが見つからない場合のスクロール例

Slackのこのカスタム404画面デザインは、この記事の他のウェブページ例よりもインタラクティブなユーザーエクスペリエンスを提供する。

このページに降り立つと、木々や花々が咲き乱れ、遠くには虹までかかる不思議な風景が広がる。空には蝶が飛び交い、子豚やニワトリがうろうろしているのも見える。

さらに良いことに、マウスカーソルを動かすとページ全体が水平にスクロールし、より豊かなシーンを楽しむことができる。

Slackもそう考えているようで、彼らのメッセージを見ればわかる。

エラーメッセージには404エラーの記述はない。その代わり、誰にでも理解しやすい言葉やフレーズを使っている。また、次に何をすべきか、つまり、戻るか、ヘルプセンターで解決策を探すかを示唆している。

ユーザーに選択肢を与えることで、タブを閉じることなく、より長くウェブサイトを利用してもらうことができる。

3.Mantra Labs - リダイレクトによる404スクリーン

Mantra Labsのカスタム404ページデザインは、ユーザーの手を離れて決定する巧妙な例である。

そのページにたどり着くと、宇宙空間に浮かぶ宇宙飛行士のシンプルなイラストと「おっと！あなたは酸素を使い果たしました。宇宙飛行士は404の「0」の上に座り、ゆっくりと落ちていく。まるでブラックホールに落ちているか、宇宙に浮かんでいるかのようだ。

そして、カウントダウン・タイマーが「ホームに戻る」まで時を刻み、ウェブサイトのホームページにリダイレクトされる。まばたきをすると、404ページを見逃してしまうかもしれない。

この例の素晴らしいところは、考える時間がないことだ。わずか10秒で、あなたはホームページに向かい、そこで必要なコンテンツを探すことができる。

4.20世紀スタジオ - 404ページ 映画のアイデア

クリエイティブな404ページブランディングのもう一つの素晴らしい例は、20th Century Studiosによるものだ。リンク切れや削除された記事にアクセスすると、メッセージとカルト映画の静止画が表示される。

さらにそのページでは、彼らのコレクションからいくつかの映画を紹介している。

これは、ユーザーをウェブサイトに引き留め、自然に適格なリードへと導く素晴らしい方法である。

人気のある記事や商品を提案することで、あなたのサイトにも同様のアプローチを使うことができる。

例えば、SeedProdのカスタムWooCommerceブロックを使えば、404画面に商品グリッドを簡単に追加し、最近の商品、セール商品、ベストセラー商品などを表示することができます。

これで、404ページから売上を上げることができる！

5.Figma - インタラクティブ404ページデザイン

Figmasの404ページのデザインは、そのシンプルさが気に入っている。このページは、要点がとてもわかりやすく、必要最低限で、余分な装飾がありません。

もちろん、404テキストのアンカーポイントを操作して遊ぶことができることを考慮しなければの話だが。

最初は無意味に思えるかもしれないが、これはかなり賢い。この小さなデザイン・ゲームは、デザイン・ツールとしてのフィグマのブランディングを完璧に表現しています。フィグマスで何ができるかが一目でわかり、もっと知りたいと思わせてくれます。

詳しい情報を得るのも難しくない。Figmasの404ページには、ナビゲーション・メニューと役立つリンクがあり、必要なものをすぐに見つけることができる。

6.Behance - 404ページの例とプロジェクトの提案

Dribbbleに似たBehanceは、ユーザーが正しい情報を見つけられるようにする、もう一つの素晴らしい404ページの例を提供している。

というシンプルな見出しのページがある！というシンプルな見出しがあり、小見出しで訪問者にキュレーションされたプロジェクト・ギャラリーをチェックするよう勧めている。

見出しの下にある様々なプロジェクト・カテゴリーをクリックすると、適切なページに飛ぶことができる。その後、インスピレーションを得るためにいくつかの特集プロジェクトを閲覧するオプションがあります。

このページを使えば、ユーザーはウロウロする必要がない。探していたものが見つからなかったとしても、似たようなもの、あるいはもっと良いものを見つけるのに役立つ提案がたくさん用意されている。

7. eBay - 404ページにトレンド情報を掲載

eBayは人気のあるeコマースサイトで、カスタム404エラーページメッセージを活用して話題の商品を紹介している。

ページを訪問すると、楽しい画像と風変わりな見出しが表示され、希望のページを「あちこち探した」ということがわかる。これにより、ユーザーは状況に共感しやすくなる。そして、目を引くボタンで彼らのホームページにリンクする。

それでもまだ助けが必要な場合は、ヘルプページを見ることを勧める。あるいは、おそらくほとんどのユーザーが探しているであろう、トレンド情報を閲覧することもできる。

このように404ページのデザインを整理することで、押しつけがましくなく、サイトを使い続けてもらう機会を増やしている。

8.9gag - コール・トゥ・アクション404ページ

オーディエンスを知ることは、彼らを有料顧客に変えるために非常に重要です。彼らの好みを知らなければ、彼らが最も切望するコンテンツ、製品、サービスを提供することはできない。

この404エラーページで、9gagは自分たちの読者をよく理解していることを示している。

404のランディングページには、ユーザーの大半が知っているであろう人気のミームが掲載されている。これによって、たとえそれが探していたページでなかったとしても、あなたが正しい場所にいることに疑いの余地はない。

その後に続くのは、シンプルなメッセージと、より多くのビジネス・リードを獲得するための即席ソリューションであるアプリをダウンロードするためのCTAである。

9.IMDB - 404ページデザインのインスピレーション

IMDBが映画に関するニュースや情報を提供するサイトであることは、ほとんどの人が知っている。だから、404の画面が映画に特化しているのは驚くことではない。

入力すると、人気映画からの引用が表示されます。上の例では、『ロード・オブ・ザ・リング』のガンダルフの有名な言葉が引用されている。

404メッセージの下に表示される映画タイトルは、それぞれのページにリンクしており、詳細を知ることができる。あるいは、ホームページへ移動して閲覧を続けることもできる。どちらにしても、ユーザーはウェブサイトに留まる。

10.上野 - クリエイティブな404ページの例

カスタム404ページのもう一つの使い方は、ブランドの創造性をアピールすることです。総合代理店のウエノがこの404ページの例で行ったことです。

上のスクリーンショットでは、完全な効果を見ることはできない。

画像は、奇妙でシュールな風景の中を走るホットドッグのアニメーション。しかも、ページを更新するたびに、状況を説明する異なるメッセージが表示される。

この404ページは、潜在的なクライアントにとって完璧な、エージェンシーのクリエイティビティを余すところなく示している。さらに、「戻る」リンクをうまく配置することで、簡単にホームページに戻ることができる。

11.CloudSigma - 面白い404ページのデザイン

クラウドホスティングは、多くのウェブサイトオーナーにとって便利なサービスであっても、必ずしも楽しいトピックではない。だからこそ、私たちはCloudSigmaのこの404ページのデザインが大好きなのです。

彼らの毒舌メッセージは、訪問者に開発者としての生活の舞台裏を覗かせる。しかし、そのユーモアは不快感を与えない程度に軽妙だ。

ページ全体が魅力的で親しみやすい印象を与え、クリックするとホームページが表示される。

上記の404ページの例が、あなたのウェブサイトに404ページを作成するのに十分なインスピレーションを与えてくれることを願っています。

12.ブレット・テルプストラ シンプルな404ページ

404ページがうまくデザインされていないと、訪問者に行き止まりを知らせ、他に行く場所を提供することになりかねません。その結果、多くの潜在顧客を失うことになりかねません。

その代わりに、Brett Terpstraによるこの404ページのようなことができる。彼はすぐに何かが間違っていることに気づき、そのままにするのではなく、あなたが探しているかもしれないものを提案してくれる。

このページは派手ではないが、超有用だ。

ウェブサイトのアナリティクスを見て、人々が最も検索している記事を見つけることで、同じようなものを作ることができる。

13.マーベル・アニメーション404の例

マーベルの404ページには、あらゆる形やサイズがある。実際、彼らの世界にはさまざまなキャラクターをテーマにしたエラーページがたくさんある。

この例では、多くのファンが共感するアイアンマンに関する404ページのアニメーションがある。

アニメーションGIFの動きは、あなたの目をインストラクションに引きつけます。そして、訪問者が戻るボタンを押すか、検索機能を使って探しているものを見つけるよう促す。

14.CSSのトリック 404ページのデザイン

CSS Tricksのこの機能的でわかりやすい404ページは、読者をよく理解している好例だ。ページ下部にはCSSを公開するリップがあり、多くの開発者の共感を呼ぶだろう。

ご覧のように、関連ページへのリンクも含めて、人々がウェブサイトから離脱しないようにしている。さらに、内部リンクはSEOを高める優れた方法です。

15.Mailchimp 404ページの例

物事がうまくいかないとき、状況を処理する最善の方法は、しばしば、白状して自分の責任だと認めることです。Mailchimpが404ページのデザインで行っていることだ。

このページには、探しているものを「探す」キャラクターのアニメーションGIFがある。さらに、ページを紛失したことを率直に伝えるメッセージもある。とはいえ、訪問者をホームページに戻すボタンを表示することで、読者に解決策を提示している。

16.Broken Egg SeedProd 404ページ

SeedProdのbroken egg 404ページは、簡単にカスタマイズ可能なメッセージを持つストレートなデザインです。サイトロゴ、ナビゲーションメニュー、そしてユーザーをホームページへ誘導するCTAが含まれています。

背景画像は、何かが機能していないことを示す優れたサインだ。また、メニューリンクはウェブサイトの他のエリアへのナビゲーションを容易にします。

17. SeedProd eコマースOopsページが見つかりませんテンプレート

eコマースサイトはこの404ページが役に立つだろう。このページには、何か問題が発生したことを知らせるシンプルなメッセージがありますが、ユーザーの閲覧を継続させるための商品提案も含まれています。

18.SeedProd サンセット 404 ページ例

SeedProdのこのデザインでは、インパクトのある見事なフルスクリーン404ページを作成することができます。フルスクリーン表示は、温かみのある夕焼けのイメージですぐに注目を集めます。ユーザーは大きな「ホーム」ボタンをクリックして、ホームページに戻ることができます。

19.SeedProd 面白い404ページの例

パイナップルのコスチュームを着たかわいい犬に抵抗できる人はいないだろう。

この明るく陽気な404ページのデザインでは、ページが存在しないことを伝えている。しかし、ちょっとした助けがあれば、存在するホームページに向かうことができる。

また、便利なナビゲーションメニューも備えているので、ユーザーはウェブサイトの他のページを簡単に見つけることができます。

404ページFAQ

何を待っているんだい？

この記事を気に入っていただけたなら、ぜひTwitterや Facebookをフォローして、ビジネスの成長に役立つコンテンツをお楽しみください。