404 not found(404エラー)の意味や原因・解決方法とページの作り方を紹介

インターネットで様々な情報を探しているという人は、最近のインターネット社会において多いです。人とのやり取りでもリンクを貼って教え合うというようなことも少なくないでしょう。

そんなブックマーク内やメールなどに貼り付けられたリンクなどからアクセスした際などに、「404 not found」のエラー画面が表示されることがあります。この「404 not found」エラーは、ブラウザによって表示されるものです。

「404 not found」というエラーは、昔から見られるエラー番号なので知っている人も多いかと思います。

しかし、見かけたことはあるけれど「404 not found」がどういう意味なのかを知らない人もいるかと思いますので、まずは「404 not found」のエラーの意味の説明からしていきます。

「404 not found」のエラーコードは、そのサイトが存在していないことを意味しているものです。存在していない、の意味の中には『以前はあった』というサイトも含んでいます。

HTTPステータスコードと呼ばれる3桁の数値で分けられるエラーのうちの1つで、400番台はクライアントエラーを示します。余談ですが、100番台は情報、200番台は成功、300番台はリダイレクション、500番台はサーバーエラーを示します。

なお、「404 not found」のエラーはサーバー側からそのWebサイトのURLは存在していないことを意味して表示されるエラーですが、400エラーと似たものにソフト404エラーというものがあります。

ソフト404エラーは、そのWebサイトのページURLが存在していないにもかかわらず、正常値を示す200のステータスコードを返してしまうエラーです。

閲覧者側からするとどちらも同じく「404 not found」が表示されるため大きく問題はないのですが、ソフト400エラーが表示されることが問題となるのはサイト管理者の方です。

ステータスコードが200で返されるということは検索エンジン側からすると正常なページとして判断されてしまうということです。

実際に存在しないページにも関わらずGoogleなどの検索結果に表示されてしまうため、検索エンジンのクローラビリティに影響することもあるのです。ものすごく重大なエラーではないものの、改善する必要があるのは事実です。

「404 not found」の意味が分かったところで、「404 not found」のエラー画面がなぜ出るのか、その原因の話に移ります。

「404 not found」のエラー画面が表示される原因として考えられるものの1つは、URLを直接入力して探していた場合などに多い、URLの入力ミスです。閲覧者側に多い原因ですね。

前述したとおり、「404 not found」は存在していないWebページを意味するエラーです。URLが存在していないものを開いていれば当然「404 not found」が表示されます。

URLを入力した際、中途半端なところで止まってしまっている、1文字不足している、というような場合でそのページが存在しない場合「404 not found」が表示されてしまうということになります。

偶然別のページが開くこともありますが、URLが違うため目的のページでないということは間違いありません。

必ずしも「404 not found」が表示されるというわけではありませんが、直接入力した場合に「404 not found」が表示される場合はこちらの可能性も考慮に入れてください。

なお、前述した意味で説明したとおり、「404 not found」は現在は存在しないものを示しています。

これは『以前は存在したけれど今は削除されている』Webページを意味するものでもあるため、削除されたページを表示している場合にも「404 not found」が表示されるのです。

URLが間違っているかどうかの確認をして、1文字も間違っていないことを確認した上で「404 not found」が表示された場合は削除されたページを表示していると判断しましょう。

サイト側がそれと同じ内容のページを作成して移動させた、という場合に「404 not found」が表示される場合、古いURL(「404 not found」が表示されるページ)から新しいURLへのリダイレクト(転送)が設定できてていないことが考えられます。

こちらは閲覧者側に問題があるのではなく、サイト運営者側が転送設定ができていない/リダイレクト先のURLのミスが原因ですので、修正されるのを待ちましょう。サイト運営社側は気づいた時点での修正をしましょう。

URLを直接入力していなくても、URLが間違っていることがあります。Webサイトのリンクから飛んだ場合はそこに貼られているURLがそもそも違っている、というような場合です。

これをリンク切れというのですが、そのサイトに貼られているURLが原因なので、閲覧する側からすると押したリンク先で「404 not found」が表示されたという状態ですね。

そんなリンク先がリンク切れの状態になっている場合もそのページが存在しないという意味で「404 not found」が表示されます。

さて、「404 not found」が表示される場合、どのように解決するのか、アクセスする側に原因があるのか、サイト運営側に原因があるのかによって解決方法が異なるため、それぞれの解決方法を紹介していきます。

アクセスする側の原因としては入力したURLが間違っているという場合です。一度入力したURLに間違いがないかどうか確かめて、間違っていれば直してアクセスすれば解決する可能性が高いです。

なお、その特定ページが削除されているだけでサイト自体は残っている、という場合はサイトトップページにはアクセスできるため、サイトトップページから解決の糸口を見つけられる可能性があります。

ドメインだけの状態でサイトトップにアクセスして「404 not found」が画面上に表示されず、サイト内検索があるのであればそれを利用して見たいページがあるか確かめましょう。

なお、サイト内検索がなくても、Google検索から「site:URL」でキーワード検索して探すこともできますので、キーワードと一緒に上記のような形で検索して同じ内容の別ページを探すなどしてみてください。

サイト運営社側に原因がある場合、解決方法はその原因それぞれで異なります。リダイレクトの設定ができていないことが原因であれば301リダイレクトの設定を正しくすれば解決する事ができます。

リダイレクトの設定方法/作り方としてSEO上最推奨されているのが.htaccessを利用したものです。今回はこちらでの説明をしていきますので、他にも方法はありますが説明は割愛します。

ページ単位でのリダイレクトとディレクトリ単位でのリダイレクトで若干の違いがあるため、下記の表を参考にしてhtaccessファイルをテキストエディタで作成してください。​​​​​​​

また、サイトに貼ってあるアドレスが異なっているリンク切れが原因であれば、そのURLの修正や削除もおこなっておくことで解決できます。

なお、リンク切れなどはサーチコンソールの『インデックスカバレッジ』をチェックすることで気づくことができますので、定期的にチェックすることをおすすめします。

さて、サイトによっては自身のドメイン下で「404 not found」が表示された場合、オリジナルデザインの「404 not found」エラー画面を用意しているサイトもあります。ここでは「404 not found」のエラー画面の作り方の説明をしていきます。

「404 not found」のエラーがデフォルト表示のものだと、そのサイトにアクセスした人がサイトから離脱して別のサイトにアクセスしてしまうことになりやすいのです。解決方法を知らない人などにとっては特に離脱する理由になりえます。

そのため、オリジナルデザインページがあるかないかで閲覧者がサイトから離脱すること理由となることを防ぐ効果があるのです。

オリジナルデザインの「404 not found」エラー画面があることでその確率を減らすことは、SEOの観点上からも必要な画面でもあります。可能であれば分かりやすい「404 not found」画面をしましょう。

当サイト「Appli World」でもそのURLが存在していない場合は上記のようなエラー画面が表示されます。「404 not found」と表示されるよりも、どういった原因があってそのエラーが出るかどうかを理解する事ができますよね。

オリジナルデザインの「404 not found」のエラー画面の作り方のコツの説明に移ります。

「404 not found」のエラー画面は結局のところ、そのサイト内に存在していないのです。そのため、存在しないページから正しいページへ誘導するための道筋を作ることが閲覧者側にとっても解決方法となることになります。

サイト内のキーワード検索やサイトマップなどを示しておけば、サイト内を回遊するきっかけを作り、目的のコンテンツにたどり着くために誘導するようなオリジナルデザインの「404 not found」画面の作り方をする必要があります。

エラー画面のコードの作り方は次の点を踏まえることでユーザービリティ向上が見込めます。

• 「404 not found」画面をサイト全体のものと統一する
• エラーページである旨の記載を分かりやすくする
• サイトの目的に沿ったページへのリンクなどを置いておく

順に確認していきましょう。まずは「404 not found」画面を含めてデザインをサイト全体で統一する、と言う点です。

グローバルメニュー、ヘッダー、フッターなど、基本的な部分をサイト全体と同じにし、メインカラム部分に「404 not found」に当たる画面である旨を記載しておきましょう。場合によってはエラーの旨の記載をせずトップページと同じ内容にするのもありです。

それにより「404 not found」のエラーであっても、そのサイト内にいる状態である、ということを閲覧者側に意識させることができ、サイトからの離脱を極力防ぐことができる可能性があります。

「404 not found」のエラー内容の記載についてはエラーページである旨を分かりやすく記載するの項目に繋がります。

「404 not found」エラーであるという旨として、そのページが存在しない、ページのURLが間違っている可能性がある、などの内容を記載しておきましょう。例文としては次のようなものがありますので、参考にして入れてみてください。

さて、「404 not found」エラー画面の作り方ですが、設定方法は利用する物によって異なってきます。

htaccessを使用する場合、エラー用の画面のhtmlファイルを作成する必要があります。作成した404エラー画面のHTMLファイルは、ドメイン直下のルートディレクトリに置いてください。

そして、同じ階層に設置しているhtaccess内に、下記のコードを記述すればOKです。これは「404error.html」と言うファイルとして作成したと仮定した場合のものです。

WordPressの場合、404.phpというファイルを作成すればOKです。「404 not found」が表示された際は、自動的に「404.php」の内容が読み込まれます。

作成した404.phpファイルはテーマフォルダ直下に保存する必要がありますが、テーマによっては404.phpがもともとある場合もありますので、その点については事前に確認しておいてください。

なお、WordPressの場合は404エラーのページへアクセスしたユーザーを存在しているページにリダイレクトすることができるプラグインもあるため、必要があれば404.phpで表示させるのではなくリダイレクトのプラグインの利用でもOKです。

なお、自身のサーバーではなくレンタルサーバーを利用しているという場合もあるかと思います。

レンタルサーバーの設定画面から「404 not found」の画面設定ができるところがありますので、そこで「404 not found」の設定をしてください。設定方法はそれぞれ異なるため、レンタルサーバーの説明などを確認して設定しましょう。

さて、「404 not found」のエラーページの作り方はこんなところですが、どういったデザインでの作り方が適切なのかというのはなかなかイメージがつかないと思います。そんな人向けに、有名企業のオリジナルデザインのエラーページを紹介していきます

定期的・不定期に変更していることもあるので必ずしも画像の通り表示されるとは限りませんが、参考にしてみてください。

まずは皆さんご存知マクドナルドの「404 not found」のエラーページです。ヘッダーやフッターはそのままに、トップページへの案内などもあって分かりやすいエラーページになっています。

幼少期にお世話になった人も多いであろうサクラクレパスの「404 not found」のエラーページはシンプルに404エラーが表示されます。下にはパッケージデザインの歴史やサイト内検索がありますので、興味を引きつつ回遊しやすいものになっています。

有名な東京ディズニーリゾートは多言語での「404 not found」ページになっています。ヘッダーメニューとトップページへ誘導するリンクで構成されているため、シンプルながら利用しやすい形のデザインです。

日本有数の自動車メーカーであるトヨタ自動車はメニューなどのないスッキリしたデザインですが、数秒後自動的にトップページへ遷移するようにリダイレクト設定がされていますので、リンクを押す必要などがありません。

大人から子どもまで人気のバンダイのサイトの場合は「404 not found」がお知らせという形で表示されます。ページが無いと英語でも併記されていますね。ヘッダーにメニューがあるためそこから回遊できるようにもなっています。

住宅情報サイトのSUUMOはヘッダーメニューの他、トップページへのリンクも置かれています。注意喚起のアイコンが大きいためエラーページであることもひと目で分かるようになっています。

北斗の拳の作者である原哲夫さんの公式ウェブサイトは、404エラーを吐いている状態でもエラーページをトップページと同じものにしているため、閲覧者側は混乱せずに利用することができます。

タカラトミーは商品として有名な黒ひげ危機一髪の絵柄が印象的です。トップページへのリンクの他、商品情報・サイトマップなど閲覧者がアクセスしたいであろうページへのリンクも表示されています。

CSS関連の小技を配信するブログ「CSS HappyLife」は変わった「404 not found」のページです。縦読みのページになっていて、エラー画面にも関わらず楽しめるページになっています。

「404 not found」は、サイト運営社側からするとサイト閲覧者をサイトから離脱させてしまうこともあるものです。原因は様々ですが「404 not found」のオリジナルデザインページを作成しておけば離脱者を少しでも抑える事ができる可能性を高めることができます。

作り方や様々なサイトの「404 not found」のオリジナルデザインを参考にしながら対処をおこなってみてください。