404エラーページのデザイン!not foundを効果的に使う5つの方法

TechAcademy

2017年6月1日 19:00

本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。

本記事は、WebやグラフィックデザイナーのJames George氏によって投稿されました。

私たちが、ソーシャルメディアやWebサイトのリンクをクリックするのは、自分の興味のあるコンテンツを見たくて、別のサイトへ飛びたいからでしょう。

しかし残念ながら、時間が経つと物事は変化してしまうもので、リンク切れが起こります。ページが遷移し、別のページに転送され、そして、404ページが表示されてしまいます。

これが意味することは、どこかでリンクが切れているか、あなたのWebサイトに不具合があるということです。ただ、使い方によっては404のページはむしろ長所になりえます。

もし、以下の豆知識に従うなら、あまり多くを失わずに済むのです。

1. コンテンツを見せるリストを作る

Webサイトのユーザーが探しているものを見つけられないという、ただそれだけの理由で、ユーザーを行き止まらせる必要はありません。

もし、あなたが質の高いコンテンツを作ることに集中するなら、その時はユーザーたちを、コンテンツに直接誘導することです。

もし、あなたがサイト内で他に行ける場所を提案するならば、他のページに遷移する機会を作ってあげることができます。ユーザーは探している情報を別のページで見つけるかもしれません。

これはどんなWebサイトにおいてもやるべき大事なことです。

2. 代わりに無料配布物やインセンティブを与える

たとえ探しているものを訪問者が見つけられなかったときでも、彼らを将来のお客さんにすることができないわけではありません。そこで、価値のある情報か、ダウンロードコンテンツをインセンティブとして提案しましょう。

これによって、一度登録やダウンロードしたユーザーに後で働きかけることができます。

Webサイト全体の目的は、自分たちのビジネスのために、優位性を生み出すことにあります。

歯医者や、医者、弁護士のように、ひとりのお客さんは数百ドルを収益に変える存在です。Webサイトの訪問者を手放さず、彼らにお客さんになってもらうよう、あらゆる努力をするのは理にかなっています。

3. 検索窓を加える

ユーザーが探しているものを見つけやすいように、クライアントが持つWebサイトの404のエラーページに、検索窓を置くことは有効です。

もし、リンクが切れていても、訪問者がサイト内部で探す機会を与えられれば、検索結果によって、彼らを正しい方向へ仕向けられるかもしれません。

Twitterはこの点で良いユーザー体験を提供しています。すなわち、ユーザーが求めていることを達成するために、サイト内検索へと導いているのです。

4. 直接連絡の取れるコンタクトフォームを置く

多くの404エラーページには、実用的なコンタクトフォームを設置すると良いでしょう。

これによって、二つの異なる目的が果たされるのです。リード獲得としてユーザーがWebサイトの運営者に直接接触することは、素晴らしい方法だと言えます。

たとえ探していた情報を訪問者が見つけられなかった時でも、彼らに対してビジネスをする機会を与えることができるのです。

404のエラーページにコンタクトフォームを設置することが役に立つ、もう一つの理由は、ユーザーがエラーを知らせてくれる機会になるからです。このおかげで、将来Webサイトを訪れる人の為に、不具合を修正しておくことができます。

5. 滑稽さを出さない

デザイナーや開発者の中には、404エラーページを滑稽なやり方で見せようと提案する人もいます。私のアドバイスでは、いつもこのやり方には反対してきました。

というのも、これではユーザーに誤ったメッセージを送ってしまうからです。

例えば、重要な情報を探している場面を想像してください。送られた先が、単なるおふざけのエラーページだったらどうでしょうか。ほとんどのユーザーは、不完全なWebサイトを面白いとは思いません。

実際、Webサイトの訪問者は、ただ探している情報を見つけたい一心で出たり入ったりします。ユーザーの多くは、まわり道をせずにできるだけサッサと自分の目的を済ませたいのです。

結論

以上の提案は、Webサイトのユーザーを、サイト内で行き詰らせるべきではないことを示しています。

ユーザーに他の選択肢を与えることで、エラーページでさえ使い勝手が良いと感じることもあります。

重要なのは、Webサイトに来るユーザーに何を意図するか、その結果を元に選択するべきです。

もしあなたが、Webサイトを管理するときは、エラーに遭遇する人たちの追跡が重要です。多くの場合、ユーザーが探している情報を確実に見つけさせるように、こちらが接触する努力は、その人との信頼と親密さを築き上げるのです。

もしユーザーが不具合を報告しておきながら無視した場合、それは個々のユーザーのことはどうでもいいと相手に伝えているようなものです。この状況では、小さな改善をコツコツと進めましょう。

また、Webサイト上でエラーに遭遇した人たちを追跡することは、サイト上の問題を発見し解決することにつながります。不具合についてのより詳細な情報を手に入れることができ、それを適切に修正することができるのです。

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30