無料の資料掲載・リード獲得し放題サービスはこちら
『MARKETIMES』は、広告収益による運営を行っております。複数の企業と提携し、情報を提供しており、当サイトを通じてリンクのクリックや商品・サービスに関する申し込みが行われた際、提携する企業から報酬を得ることがあります。しかし、サイト内のランキングやサービスの評価について、協力関係や報酬の有無が影響することは一切ありません。
さらに、当サイトの収益は、訪問者の皆様に更に有益な情報を提供するため、情報の質の向上やランキングの正確性の強化に使用されています。

404 not found(404エラー)が起こる原因とは?対処法や個性的なデザイン事例を解説

404 not found(404エラー)が起こる原因とは?対処法

404 not found(404エラー)とは、アクセスしたWebページが存在しない場合に、表示されるエラーページ(HTTPステータスコード)です。何らかの原因によって、ページがすでに無いことをユーザーに伝える重要な役割を担っています。

「SEOに悪影響を及ぼすのでは?」という疑問もあるかと思いますが、Webサイトを運営するうえで、404 not found(404エラー)の存在は欠かせません。そのため、Webサイトの運営者である以上、404 not found(404エラー)の基礎知識から設定方法まで知っておく必要があります。

そこで本記事では、404 not found(404エラー)の概要から表示される原因、対処方法や参考になるページの事例を解説します。

  • 「404 not found(404エラー)ページの概要や原因・対処法は?」
  • 「404 not found(404エラー)ページの魅力的な事例を教えて欲しい」

このような疑問・要望がある方はぜひ最後までご覧ください。

目次(クリックしてジャンプ)

404 not found(404エラー)とは

404 not found(404エラー)とは

404 not found(404エラー)とは、すでに存在していないページにアクセスした際に表示されるエラーページ(HTTPステータスコード)のことです。インターネットを回遊している際に、「404 not found」の文字が表示されたページを見かけた経験がある方もいるのではないでしょうか。

削除されたページで404 not found(404エラー)が表示される仕組みのとおり、not foundには「未発見」や「発見できなかった」という意味があります。

本来、アクセスしたWebページには、Webサイトの提供元が指定したページが表示されます。しかし、何かの原因によってページを表示できなかった場合は、そのことをユーザーに伝えるために「404 not found(404エラー)」と表示されるようになっているのです。

つまり、404 not found(404エラー)のページが表示されるおかげで、「いまこのページは見れないんだな」とユーザーは理解できます。ユーザーの利便性を向上させるためにも、404 not found(404エラー)のページの存在は欠かせません。

Webサイト運営を行っているのであれば、必ず設定するようにしましょう。

そもそもHTTPステータスコードとは

HTTPステータスコードとは

そもそもHTTPステータスコードとは、Webブラウザにアクセスした際に、Webサーバーから返される3桁の数字のことです。

さまざまな種類のHTTPステータスコードがあり、404 not found(404エラー)はその中の一つです。詳しくは後述で解説するので、そちらをご覧ください。

ソフト404エラーと異なるポイント

ソフト404エラーとの違い

404 not found(404エラー)と似ている言葉で、ソフト404エラーがあります。
しかし両者には明確な違いがあり、ソフト404エラーを放置しているとSEOに悪影響を及ぼします。

404 not found(404エラー)とソフト404エラーの違いを理解したうえで、早急に対処しましょう。

  • 404 not found(404エラー):存在しないページにアクセスした際に、サーバー側から送られてくるエラーのこと
  • ソフト404エラー:ページが存在していないのにもかかわらず、処理に成功した200番台(正常)のHTTPステータスコードで返答してしまうこと

上記のとおり、ソフト404はページが存在していないはずなのに、リクエストが正常に行われた200番台のHTTPステータスコードとして処理されている状態です。本来、ページが存在しないのであれば、404 not found(404エラー)の処理が行われなければいけません。

ソフト404の問題点は、検索エンジンのクローラーがエラーページを「エラー」と認識できない点にあります。つまり、問題のないページとしてクローリングを行うので、クローラビリティの低下につながり、SEO評価に悪影響を及ぼすわけです。

その結果、Webサイトの検索順位が下がる原因につながるでしょう。

もしソフト404になっている場合は、早急に対処することをオススメします。

404 not found(404エラー)がSEO評価に与える影響

404 not found(404エラー) SEO評価への影響

404 not found(404エラー)が、「SEOに悪影響を及ぼすのではないか」と、不安になる方もいるでしょう。結論から言いますと、404 not found(404エラー)が表示されても、SEO評価が下がることはありません。

インターネットの世界において、ページが存在しなくなるのはごく自然に起こり得るからです。また、自サイトからリンクしている外部サイトのページが存在しなくなった場合、こちらではコントロールしようがありません。

外部サイトのリンクを削除するなどの対策は可能ですが、「いつ削除されたのか」がわからないので、すぐに実行するのは難しいですよね。

そのため、自サイト内で404 not found(404エラー)が表示されても、SEO評価に悪影響を及ぼすことはありません。その証拠に、Google公式は「404 not found(404エラー)が与える検索順位への影響」について以下のように解説しています。

サイトの一部の URL が既に存在しない、または 404 を返していた場合も、サイトの他の URL ( 200(Successful) を返すもの)の検索結果内での掲載順位には影響しません。404 レスポンス コードは、インターネットにとっては正常な動作です。

引用:Google検索セントラル 404 はサイトに悪影響を与えますか?

ただし、前述でも解説したとおり、ソフト404になっている場合はSEOに悪影響を及ぼす可能性もあります。ソフト404には注意しましょう。

404 not found(404エラー)以外のHTTPステータスコード

404 not found(404エラー)以外のHTTPステータスコード

HTTPステータスコードには、404 not found(404エラー)以外にさまざまな種類が存在します。

  • 100番台のHTTPステータスコード
  • 200番台のHTTPステータスコード
  • 300番台のHTTPステータスコード
  • 400番台のHTTPステータスコード
  • 500番台のHTTPステータスコード

それぞれの種類のHTTPステータスコードを具体的に解説します。

100番台のHTTPステータスコード

100番台のHTTPステータスコード

100番台のHTTPステータスコードは、主に以下の3種類があります。

  • 100 Continue
    リクエストを受け取り、問題なく継続して処理できている状態を表す
  • 101 Switching Protocols
    プロトコルを切り替えている状態を表す
  • 102 Peocessing
    処理を継続して行っている状態を表す

200番台のHTTPステータスコード

200番台のHTTPステータスコード

 

  • 200 OK
    サーバーへのリクエストが正常に処理され、問題なくWebページが表示されている状態を表す
  • 201 Created
    サーバーへのリクエストが成功し、新たに作成されたリソースのURLが返信された状態を表す
  • 202 Accepted
    サーバーがリクエストを受け取り、まだ処理できていない状態を表す

300番台のHTTPステータスコード

300番台のHTTPステータスコード

  • 300 Multiple Choices
    サーバーへのリクエストが複数存在している状態を表す
  • 301 Moved Permanently
    永久的にWebサイトの移転が続いている状態を表す
  • 302 Found
    一時的にWebページが移動している状態を表す

400番台のHTTPステータスコード

400番台のHTTPステータスコード

  • 400 Bad Request
    Cookeiやブラウザなどユーザー側の原因によって、リクエストに問題がありWebページにアクセスできない状態を表す
  • 401 Unauthorized
    Webページを閲覧するために認証が必要な状態を表す
  • 403 Forbidden
    アクセス自体が禁止・拒否されている状態を表す
  • 404 Not Found
    アクセスしたWebページが存在していない状態を表す

500番台のHTTPステータスコード

500番台のHTTPステータスコード

  • 500 Internal Server Error
    サーバー内で何かしらのエラーが発生している状態を表す
  • 503 Service Unavailable
    一時的にWebページにアクセスできない状態を表す

自サイトの404 not found(404エラー)ページをカンタンに確認するには

404 not found(404エラー) 確認方法

404 not found(404エラー)を確認する方法は非常にカンタンで、以下の手順どおりに行えば誰でも確認できます。

  1. Google Analytics(アナリティクス)にアクセスする
  2. 行動からサイトコンテンツを開き、ランディングページをクリックする
  3. セカンダリディメンションからページタイトルを追加する
  4. アドバンスをクリックしてページタイトルで絞り込む
  5. ページタイトルに「404 not found(404エラー)」ページのタイトルを入力する

もし、404 not found(404エラー)ページのタイトルを入力しても表示されない場合は、自サイトのなかに存在しないページがないということです。これまで確認してこなかったのであれば、一度チェックしてみてはいかがでしょうか。

404 not found(404エラー)が表示される原因と対処法

404 not found(404エラー)原因と対処法

404 not found(404エラー)が表示される原因と対処法を4つまとめました。

  • URLが誤っている場合
  • 削除したページを表示している場合
  • リンク切れを起こしている場合
  • 新しいURLへリダイレクト設定ができていない場合

原因と対処法1:URLが誤っている場合

404 not found(404エラー)の原因と対処法1

404 not found(404エラー)が表示された場合、誤ったURLを入力している恐れがあります。

たとえば、正規のURLが「sample.com/service」にもかかわらず、「sample.com/sarvice」のように、知らず知らずのうちに1文字だけ入力を誤ってしまい、404 not found(404エラー)が表示されるケースは多々あります。

もしこちらが誤ってURLを入力しているのであれば、修正すればすぐに解決できます。しかし、外部リンク先がミスしている場合は、担当者に連絡をして対応してもらわなければいけません。

もし404 not found(404エラー)が表示されたのであれば、入力ミスを疑ってみると良いでしょう。

原因と対処法2:削除したページを表示している場合

404 not found(404エラー)の原因と対処法2

削除されたページにアクセスした場合、当然ページはすでに存在していないので404 not found(404エラー)が表示されます。

該当のページが別のディレクトリに変更された場合も、このような原因によるものです。

自サイトから外部サイトへリンクを貼り付けたものの、「いつの間にかページが削除されていた」「ディレクトリーが変更された」などのケースはよくあります。Webサイトのメンテナンスを定期的に行い、外部リンクのページが「削除」or「ディレクトリ変更」されていないか確認しましょう。

原因と対処法3:旧URLから新しいURLへリダイレクト設定ができていない場合

404 not found(404エラー)の原因と対処法3

旧URLから新しいURLへリダイレクト設定できていない場合も、404 not found(404エラー)が表示される原因になります。

404 not found(404エラー)がそのような原因によるものと判断できるのであれば、301リダイレクトの設定でカンタンに解決できます。

301リダイレクトとは、URLが恒久的に変更された際に使われるURLの転送処理のことです。サイトを移転する場合などによく利用され、旧URLにアクセスしたユーザーや検索エンジンのクローラーを新しいURLに自動で誘導してくれます。

もし404 not found(404エラー)の原因がリダイレクト設定によるものであれば、301リダイレクトの仕組みを使って解決すると良いでしょう。

魅力的な404 not found(404エラー)ページを作るポイント

404 not found(404エラー)ページを作る際のポイント

 

魅力的な404 not found(404エラー)ページを作るポイントをまとめました。

  • サイトコンセプトとページデザインを一致させる
  • エラーが起きていることを簡潔に記載する
  • ユーザーを迷わせないようにサイトマップを設置する

サイトコンセプトとページデザインを一致させる

404 not found(404エラー)ページ作成のポイント1

404 not found(404エラー)ページとはいえ、自サイト内の立派なWebページの一部です。

もし404 not found(404エラー)ページが、サイトコンセプトに合っていなければユーザーをがっかりさせてしまう恐れがあります。最悪の場合、商品やサービス、あるいは企業のブランドイメージの低下につながってしまうでしょう。

そのため、404 not found(404エラー)ページも、サイトコンセプトと統一したデザインで作らなければなりません。たとえば、サイトコンセプトを「シンプルかつ高級感」で設計しているのであれば、404 not found(404エラー)ページも高級感の漂う色を使ったり、シンプルな装飾を施したりなどの工夫を施す必要があります。

エラーページだとしても手を抜かないようにしましょう。

エラーが起きていることを簡潔に記載する

404 not found(404エラー)ページ作成のポイント2

404 not found(404エラー)は、ページが存在していないことをユーザーに伝えるのが目的です。そのため、デザインばかりに気を取られてしまい、ユーザーに伝えるべき本質的なメッセージを忘れてしまっては意味がありません

何が起きているのか簡潔に、404 not found(404エラー)ページに記載するようにしましょう。

後述で解説する404 not found(404エラー)ページの参考事例をもとに、メッセージを考えてみてください。

ユーザーを迷わせないようにサイトマップを設置する

404 not found(404エラー)ページ作成のポイント3

404 not found(404エラー)ページを作る際は、ユーザーファーストの精神を持つことが大事です。

ユーザーに次の行動を迷わせないようにするためにも、404 not found(404エラー)ページにサイトマップを設置しましょう。「トップページはこちら」「事業概要はこちら」というリンクがあるだけでも親切さが増し、ユーザビリティの向上につながります。

直接的なSEO効果はないものの、Webサイト運営を成功させるには、そのようなユーザーファーストの精神が欠かせません。404 not found(404エラー)ページにサイトマップを設置して、ユーザーがサイト内を回遊しやすい仕組みを作りましょう。

404 not found(404エラー)を設定する3つの方法

404 not found(404エラー)ページ 設定方法

404 not found(404エラー)を設定する方法を3つまとめました。

  • .htaccessを使用した場合の設定方法
  • WordPressの場合の設定方法
  • レンタルサーバーを利用した場合の設定方法

それぞれの方法をわかりやすく解説します。

.htaccessを使用した場合の設定方法

 .htaccessを使用の際の404 not found(404エラー)設定方法

 

 

404 not found(404エラー)ページを作成しただけでは、通常のページとして認識されてしまいます。SEO評価が下がる原因につながりますので、阻止しなければなりません。

そのようなリスクを回避するためにも.htaccessを使用して、エラーが起きた際にHTTPステータスコードで404 not found(404エラー)の処理がされるよう設定しましょう。

具体的な手順は以下のとおりです。

  • 404 not found(404エラー)ページを作成する
  • 作成した404 not found(404エラー)ページをトップ直下のルートディレクトリに設置する
  • 同じディレクトリに設置した.htaccessのファイル内に、「ErrorDocument 404/404.html」を記述する

.htaccessを使用する際の注意点は、絶対パスではなく相対パスで指定することです。
絶対パスで指定すると、ソフト404の状態になってしまい、サイト評価の低下につながります。

相対パスで指定するようにしましょう。

WordPressの場合の設定方法

404 not found(404エラー)ページ 設定方法1

 

WordPressでWebサイトを構築している企業は多いでしょう。404 not found(404エラー)ページは、WordPressでも設定することができます。

手順は以下のとおりです。

  1. 404.phpというファイルを作成する
  2. 作成した404.phpファイルをテーマフォルダの直下に設置する
  3. 404 not found(404エラー)が自動で読み込まれるか確認する

ただしWordPressのテーマによっては、初期段階から設定されている場合があります。

事前に確認したうえで、ファイルの作成に取り掛かると良いでしょう。

レンタルサーバーを利用した場合の設定方法

404 not found(404エラー)ページ 設定方法3

レンタルサーバーを利用して、404 not found(404エラー)ページを設定する方法もあります。
しかし、利用しているレンタルサーバーによって設定の手順が異なるので注意が必要です。もし手順がわからない場合は、インターネットで手順を検索するか、各レンタルサーバーのヘルプページをみると良いでしょう。

現代のレンタルサーバーの画面は、非常に見やすくてシンプルなので、難しい作業は必要ありません。安心して設定してみてください。

個性的で参考になる404 not found(404エラー)ページの作成事例10選

404 not found(404エラー)ページ事例

オリジナルの404 not found(404エラー)ページを作ることで、商品やサービス、あるいは企業のブランディングにつながります。SNSで話題を呼べば、多くのユーザーの認知も獲得できるでしょう。

そのため、できる限り企業の個性があふれるオリジナルの404 not found(404エラー)ページを作ることをオススメします。

そこで本章では、魅力的で個性あふれる、作成に参考になる404 not found(404エラー)ページの事例をまとめました。

  • ANA
  • 江崎グリコ
  • 東京ディズニーリゾート
  • BASE(ベイス)
  • 驚安の殿堂 ドン・キホーテ
  • 日本コカ・コーラ
  • LIG
  • ロコンド
  • 任天堂
  • 日清食品

それぞれの事例を具体的に解説しますので、ぜひ自社の取り組みの参考にしてみてください。

404エラーページ事例1:ANA

ANA 404エラーページ

ANAの404 not found(404エラー)ページの作成事例を紹介します。

404 not found(404エラー)ページでも、ユーザーにワクワクを与えるようなテキストの工夫が施されています。くわえて、「国内の旅に出る」「海外の旅に出る」というボタンと「サイト内検索」の入力窓が設置されており、ユーザーがサイト内で迷わない仕様になっているのが特徴的です。

デザインも航空会社らしくて、非常に魅力的な404 not found(404エラー)ページの作成事例です。

https://www.ana.co.jp/je/

404エラーページ事例2:江崎グリコ

江崎グリコ 404エラーページ

 

江崎グリコの404 not found(404エラー)ページの作成事例を紹介します。

一言で表すと、江崎グリコの404 not found(404エラー)ページは非常にシンプルかつ、ブランドイメージがしっかり表現されています。ページ内には、象徴的な江崎グリコのマークと、ポッキーで作られた404の文字が掲載されているだけです。

ページにユーザーを案内するようなサイトマップはないものの、直感的に情報が伝わる内容になっています。

404 not found(404エラー)ページでブランドイメージを表現したい方は、ぜひ参考にしてみてはいかがでしょうか。

https://www.glico.com/jp/je/

404エラーページ事例3:東京ディズニーリゾート

東京ディズニーリゾート 404エラーページ

東京ディズニーリゾートの404 not found(404エラー)ページの作成事例を紹介します。

主な特徴は、日本語や英語をはじめとした各国の言語で404 not found(404エラー)を伝えている点です。世界中からお客様が訪れる東京ディズニーリゾートらしい工夫が施されています。

またデザインイメージを損ねないように、ほかの要素は「HOME」に誘導するボタンのみです。世界観が統一されていて、魅力的な404 not found(404エラー)ページと言えるでしょう。

https://www.tokyodisneyresort.jp/je

404エラーページ事例4:BASE(ベイス)

BASE 404エラーページ

BASE(ベイス)の404 not found(404エラー)ページの作成事例を紹介します。

ほかの作成事例と比べて非常にシンプルな構成です。

サービスの世界観がデザインで表現されていて、404 not found(404エラー)ページにアクセスしても、BASE(ベイス)とひと目でわかります。

https://thebase.in/je

404エラーページ事例5:驚安の殿堂

ドン・キホーテ 404エラーページ

驚安の殿堂 ドン・キホーテの404 not found(404エラー)ページの作成事例を紹介します。

メインキャラクターのイラストと、「日本語版」「英語版」のトップページに誘導するボタンで404 not found(404エラー)ページが構成されています。

個性的かつユーザーのことをしっかり考えて作られた、404 not found(404エラー)ページです。

https://www.donki.com/htaccess/404-error.php

404エラーページ事例6:日本コカ・コーラ

日本コカ・コーラ 404エラーページ

日本コカ・コーラの404 not found(404エラー)ページの作成事例を紹介します。

一番の特徴は、404の文字の中に炭酸の泡が含まれているのにくわえて、0が缶で表現されている点です。ブランドカラーの赤色の要素もしっかりページ内に盛り込まれています

ブランディングを重要視する企業は、ぜひ参考にしてみてはいかがでしょうか。

https://www.cocacola.co.jp/je

404エラーページ事例7:LIG

LIG 404エラーページ

LIGの404 not found(404エラー)ページの作成事例を紹介します。

数ある404 not found(404エラー)ページの中でも、もっとも個性的な工夫を施しているのがLIGです。404の文字は、LIGの社員が写った写真で構成されており、写真にカーソルを合わせクリックすると画面が切り替わる仕様になっています。

切り替わった後の画面には、「History, To Be Continued」というテキストと、トップページにアクセスできるリンクが表示され、ユーザービリティを重要視しているのがわかります。個性的な404 not found(404エラー)として、自社サイトの参考にしてみてはいかがでしょうか。

https://liginc.co.jp/fe

404エラーページ事例8:LOCOND(ロコンド)

LOCOND(ロコンド)404エラーページ

LOCOND(ロコンド)の404 not found(404エラー)ページの作成事例を紹介します。

基本的にシンプルなのが特徴的ですが、もっとも魅力的なのはユーザーに思いやりのあるテキストが施されている点です。404 not found(404エラー)ページなので、セールス向けのページではないものの、しっかり商品の購入につながる工夫がされています。

https://www.locondo.jp/shop/je

404エラーページ事例9:任天堂

任天堂 404エラーページ

任天堂の404 not found(404エラー)ページの作成事例を紹介します。

画面の上部にメインキャラクターの「マリオ」が表示され、非常にユニークかつ遊び心あふれる404 not found(404エラー)ページです。

また、404 not found(404エラー)のページ内にあるサイトトップページへのボタンや、上部のグローバルナビゲーションにユーザーを案内している点も魅力的です。

https://www.nintendo.co.jp/je

404エラーページ事例10:日清食品

日清食品 404エラーページ

日清食品の404 not found(404エラー)ページの作成事例を紹介します。

404 not found(404エラー)ページには、日清食品株式会社の創業者「安藤 百福」氏の顔のイラストが表示され、非常にユーモアあふれる仕様になっています。シンプルなデザインではあるものの、そのユーモアさからSNSで少し話題にもなりました。

創業者や企業のトップが有名な場合は、ぜひ日清食品の404 not found(404エラー)ページを参考にしてみるとよいでしょう。

https://www.nissin.com/jp/je

まとめ

404 not found(404エラー)まとめ

本記事では、404 not found(404エラー)ページの概要やSEOに与える影響、原因・解決策や個性的なページの事例について解説しました。

Webサイトの運営には、404 not found(404エラー)ページの存在が欠かせません。ユーザーにページが存在していないことを伝え、Webサイトの離脱を防ぐ役割があります。

SEOに直接的な影響はないものの、ユーザビリティの向上につながるため、回り回って間接的にSEOに良い影響を及ぼすと考えてよいでしょう。

これまで404 not found(404エラー)ページを意識していなかった方は、ぜひ本記事の内容を参考に、魅力的で個性あふれるオリジナルの404 not found(404エラー)ページを作成してみてください。