Webサイトを運営していると、ページエラーに遭遇することが多々あります。なかでも、「404 not found」「お探しのページは見つかりませんでした」と表示される404エラー(not found)は発生する確率が高いのではないのでしょうか。今回は、Webサイトで404エラーが出てしまう原因とその対処について解説します。

404エラーは、存在しないページがリクエストされ、サーバーから「そんなページはありませんよ」とエラーが返されるときに表示されるコードです。かなりメジャーなエラーなので、Webサイトを運営しているのであれば発生する原因と対処方法は理解しておいた方がいいでしょう。

今回は、404エラーが出てしまう原因とその対処方法について解説します。

▼301リダイレクトについても知っておこう▼
Web担当者なら必須!SEOに適したケース別リダイレクト方法

目次

  1. 404エラーとは
    1. 404エラーは「HTTPステータスコード」のひとつ
  2. 404エラーが発生する主な原因
    1. 間違ったスペルのURLを表示しようとしている
    2. 新しいURLへのリダイレクト設定ができていない
    3. リンク切れしているリンク先などを表示しようとしている
    4. ページが削除されている
  3. 404エラーが存在していること自体は特に問題なかった!
  4. オリジナルの404エラーページはなぜ必要?
  5. 404ページをデザインして機会損失を防いでるサイト

404エラー(404 Not Found)とは

404エラー(別名:404 Not Found)とは、サーバーエラーの中の1つで、ページが存在していないときに表示されます。

Webブラウザでページを見る際、裏側ではWebブラウザがページのデータが保管されているサーバーに向けてリクエストを送ります。そのリクエストに対してサーバーが応え、Webブラウザにデータを送ることでページがWebブラウザに表示されています。

404エラーは、Webブラウザからサーバーに対してリクエストを送っているものの、サーバーからそんなデータはありません。と、返答されているときに表示されます。

404エラーは「HTTPステータスコード」のひとつ

HTTPステータスコードとは、ホームページを表示する際に使用されており、100番台から500番台までの5つに分類されています。404エラーは、このHTTPステータスコードのなかでも、400番台や500番台のHTTPエラーコードと呼ばれるもののひとつです。

【404?503?】Web担当者なら知っておくべきHTTPステータスコードとは

【404?503?】Web担当者なら知っておくべきHTTPステータスコードとは

HTTPステータスコードの数字の意味を理解していれば、エラーが発生している数字が表示されたとき素早く対応でき、ユーザーのストレス軽減につながります。今回はHTTPステータスコードの意味や種類についてご紹介します。

404エラーが発生する主な原因

404エラーが、過去にあったものの意図的に削除したページや、閉鎖されたWebサイトで表示されるのは問題ありませんが、意図せず404エラーが出てしまう場合、考えられる主な原因は以下の4つです。

  1. 間違ったスペルのURLを表示しようとしている
  2. 新しいURLへのリダイレクト設定ができていない
  3. リンク切れしているリンク先などを表示しようとしている
  4. ページが削除されている

1.間違ったスペルのURLを表示しようとしている

URLを手動で打ちこんだり、他サイトに間違ったリンクが貼られているケースは意外と多いものです。ユーザーや社内のメンバーから「404エラーが出ている」と指摘があった時は、まずはURLに誤りがないかを確認するようにしましょう。

外部から張られるリンクが間違っている場合は、運営者側ではどうしようも出来ませんので気にしないで良いでしょう。

2.新しいURLへのリダイレクト設定ができていない

ドメイン移管やページ削除などにより、別のURLに移動させた場合、元のページについては301リダイレクトを設定して新しいページに自動的に移動させるのが一般的です。
この301リダイレクトが設定できていなかった場合は、404エラーとして表示されます。正しいリダイレクトの設定を行いましょう。

3.リンク切れしているリンク先などを表示しようとしている

リンクを張ったときはちゃんと表示されていたものの、時間が経ってページが消えていて結果的にリンク切れページリンクを張っていた。というケースはかなり多くあります。

こちらから張っている場合は、ユーザーのイメージも悪くなるため新しいURLで同じページが公開されていないか確認し張り直しましょう。ない場合は削除などの対応をしましょう。

4.ページが削除されている

ページが削除されているにも関わらず、それ以前に貼られていたリンクなどを辿ってアクセスすると404エラーになります。これはページがアクセスした時点で無くなってしまっているので、正常な状態です。

404エラーが存在していること自体は特に問題なかった!

404エラーが起きる要因は様々ですが、404がホームページ内に大量に存在していても検索順位に対して悪影響が出ることはありません。原因1で紹介したように、外部要因でも発生してしまうからです。

301リダイレクトの設定が失敗していたのなら修正するべきですが、CMSにより自動生成されたページクローラーJavaScript内のリンクを読み込んだことで発生する404は特に気にする必要はないでしょう。むしろユーザーが困る部分に関しては積極的に対応し、そうでないものに関しては優先順位を下げてしまって良いでしょう。

参考:「見つかりません」エラー(404) - Search Console ヘルプ

オリジナルの404エラーページはなぜ必要?

ユーザーにデフォルトの404ページが表示されてしまった場合、そのユーザーはそのままWebサイトを離脱してしまう可能性が高くなってしまいます。オリジナルの404エラーページを作っておけば、次にどこをクリックすれば良いのかが明確となり、離脱率を下げられるでしょう。

404エラーページをデザインすれば機会損失を防げる

サイトのデザインにはこだわっているけれど、404エラーページは、そのままということはないでしょうか?エラーページは頻繁に目にする機会はありませんが、いざ表示された際に無機質なページでは、ユーザーを混乱させる可能性もあります。

国内外には、ユニークなデザインの404エラーページを導入している企業は多くありますので、参考にしてみましょう。

1.株式会社LIG

2536_01.jpeg
https://liginc.co.jp/

株式会社LIGのブログの404ページは、初代広報担当であるジェイさんが登場します。ページが見つからない代わりにオススメコンテンツを紹介してくれる、というユニークな内容になっています。

2.サクラクレパス

2536_02.jpeg
https://www.craypas.co.jp/

文具メーカーである株式会社サクラクレパスの404ページは、自社製品の消しゴムを使ったワザありデザインです。ユニークかつ製品のアピールにも繋げています。

3.タカラトミー

2536_03.jpeg
https://www.takaratomy.co.jp/

玩具メーカーである株式会社タカラトミーの404ページは、人気玩具キャラクター「黒ひげ危機一発」のイラストデザインです。飛び出す黒ひげのイラストで、目的ページへ飛ぶことを表現しています。

4.HONDA

2536_04.jpeg
https://www.honda.co.jp/

HONDAの404ページは、空に浮かぶ街中のイラストを配したポップな印象のデザインです。イラスト中の看板にはさりげなく「Not found」の文字が書いてあります。

クルマの車種でURLエラーになることが多いため、丁寧に説明書きがしてあるのも印象的です。

5.ファルコム

2536_05.jpeg
https://www.falcom.co.jp/

ゲームメーカーである日本ファルコム株式会社の404ページは、泣いている猫のイラストをデザインしたページです。フォントも丸みのあるものを使用しており、統一感があります。

6.KAYAC デザイナーズブログ

2536_06.jpeg
http://design.kayac.com/

面白法人カヤックのデザイナーブログの404ページは、意匠部のマスコットキャラ達が会話を通してエラーを伝えてくれます。カヤックらしいユニークなページです。最近のオススメ記事を紹介してくれる点も秀逸です。

7.これからゆっくり考L+α

2536_07.jpeg
http://sakaki0214.com/

ホームページのコーディングに関する情報を配信するブログ「これからゆっくり考L+α」の404ページは、見ている人が分かりやすいシンプル設計です。

8.CSS HappyLife

2536_08.jpeg
http://css-happylife.com/

CSS関連の小技を配信するブログCSS HappyLife」の404ページは、シュールなメッセージと躍動感ある文字のエフェクトが印象的です。

9.GitHub

2536_10.jpeg
https://github.com/

GitHubの404ページは、動きのあるパララックス効果が特徴的なデザインです。

様々な写真をストックするiFolderLinksの404ページは、泣いている赤ちゃんのイラストを表示したデザインです。

10.BrandCrowd

2536_12.jpeg
https://www.brandcrowd.com/

ロゴデザインの販売をおこなうBrandCrowdの404ページは、デスクで作業するパソコン上に404エラーを表示するという凝ったイラストのデザインです。

11.quote

2536_13.jpeg
https://quote-jp.com/

雑貨を中心に販売するネットショップ「quote」の404ページは、手書き文字とイラスト、写真を合わせたラフな印象のデザインです。

12.和倉温泉旅館 多田屋

2536_14.jpeg
https://tadaya.net/

石川県にある旅館多田屋の404ページは、和の雰囲気を感じる縦書きが特徴的なデザインです。

13.mailchimp

2536_15.jpeg
https://mailchimp.com/

メールマガジン配信サービスmailchimpの404ページは、おなじみのサルのキャラクターが凍りついている個性的なデザインです。

14.Daily motion cloud

2536_16.jpeg
https://dmcloud.net/index.html

Daily motion cloudの404ページは「404page not found」の文字が書いた看板が豪雨でゆらゆらと揺れるユニークなデザインです。

15.THE WALL

2536_17.jpeg
https://wall.plasm.it/

THE WALLの404ページは、沢山のサムネイルで404の文字をデザインしたものです。スクロールすると表示位置を変えることができ、色々な写真を見ることができます。

Search Console(サーチコンソール)でクロールエラーを確認しよう

「エラー」という表示を見ると、すぐに修正しなければいけないと思いがちですが、404に関して自社のミス以外はほとんどの場合は対処する必要がないと考えて良いでしょう。

ちなみに、Google Search Consoleの「クロール」→「クロールエラー」の項目で、ホームページ内に存在するクロールエラーを確認することができます。
404.png
対処の優先順位が高いURLから順に表示されているので、1番目に表示されているURLを確認して、特に表示されなくても影響がなさそうなページであればそれ以降のページでも対処する必要はないでしょう。

404エラーの関連記事

行き止まりで離脱しないために!UX上効果の高い404ページを作るために確実に押さえておきたいポイント

行き止まりで離脱しないために!UX上効果の高い404ページを作るために確実に押さえておきたいポイント

UX上効果の高い404ページを作るために確実に押さえておきたいポイントをご紹介します。ユーザーが404ページに出くわしても、離脱するどころか売上アップにつなげる第一歩になれば、404ページの本来の存在意義以上の価値を付与できます。

Web制作やデザインについてもっと知る

Web担当者なら必須!SEOに適したケース別リダイレクト方法

Web担当者なら必須!SEOに適したケース別リダイレクト方法

Webサイトやページの移転に必要なリダイレクト処理は、Web担当者にとって必要不可欠な知識です。Webサイト制作に関わるデザイナーやエンジニアが、SEOに適切なリダイレクト方法を理解していないケースがあるためです。特に、URLの変更を伴うサイト移転をするケースでは、Googleが推奨する正しいリダイレクト処理をしないと、移転後のWebサイトの検索順位に大きなマイナスの影響を与えます。

そのデザイン、ブランド強化に役立っていますか?

そのデザイン、ブランド強化に役立っていますか?

今回は、ブランドの個性をデザインを通じて表現するにあたり、どのような点を考慮しデザインを開発すべきか説明します。