存在しないページにアクセスしたとき、「ページが見つかりませんでした」という画面が表示された経験はありませんか?あの画面こそが「404エラーページ」です。一見ネガティブな場面ですが、このページをどう設計するかで、ユーザーの離脱を防いだり、会社のブランドイメージを守ったりすることができます。
この記事では、404エラーページの基本的な意味から、なぜ発生するのか、SEOへの影響、そしてユーザーに喜ばれるページの作り方まで、発注者の立場からでも理解しやすいよう丁寧に解説します。
404エラーページとは
404エラーページとは、ユーザーがアクセスしたURLに対応するページがサーバー上に存在しない場合に表示される画面です。
「404」という数字はHTTPステータスコードと呼ばれるもので、Webサーバーがブラウザに「このページは見つかりませんでした」と伝えるための番号です。正式名称は「404 Not Found」といいます。
HTTPステータスコードとは
HTTPステータスコードとは、Webブラウザがサーバーにページを要求したとき、サーバーが「どんな状態だったか」を3桁の数字で返すものです。日常で使うことはあまりありませんが、Webの世界では常に飛び交っています。
主なステータスコードをいくつか紹介します。
| コード | 意味 | 発生タイミング |
|---|---|---|
| 200 | OK(成功) | ページが正常に表示されたとき |
| 301 | 恒久的なリダイレクト | URLが別の場所に永続的に移動したとき |
| 302 | 一時的なリダイレクト | URLが一時的に別の場所に移動しているとき |
| 404 | Not Found(見つからない) | ページが存在しないとき |
| 500 | Internal Server Error | サーバー側で問題が発生したとき |
この中でも404は、ユーザーが日常的に遭遇しやすいコードのひとつです。
404エラーページが表示される仕組み
ブラウザがURLを入力してサーバーにアクセスしたとき、サーバーが「そのURLに対応するファイルがない」と判断した場合に、ステータスコード「404」とともにエラーページを返します。
このエラーページは、特に何も設定しなければWebサーバーが用意しているデフォルトの無機質な画面が表示されます。一方、Webサイト側でカスタムした404ページを用意しておくと、デザインや案内文を自由に設定できます。
404エラーが発生する主な原因
404エラーが起きるケースはいくつかパターンがあります。ひとつずつ見ていきましょう。
ページが削除されている
過去に公開していたページを削除・非公開にした場合、そのURLにアクセスしたユーザーには404エラーが返ります。
例えば、キャンペーンが終了してランディングページを削除した場合や、サービスが終了して案内ページを消した場合などが該当します。削除するだけでなく、リダイレクト設定(後述)とセットで対応できるとベストです。
URLを変更したがリダイレクト処理が漏れている
サイトのリニューアル時に記事やページのURLを変更した際、旧URLへのリダイレクト設定が漏れてしまうと404エラーになります。
サイト全体のURL構造を変えるリニューアルでは特に起きやすいパターンです。変更前後のURLを一覧化して、漏れなくリダイレクト設定できると安心です。
ユーザーがURLを誤入力した
URLをキーボードで手打ちしたときのタイプミスや、コピー&ペーストの失敗など、ユーザー側の操作ミスでも発生します。
この場合はサイト側に問題はありませんが、それでもユーザーが迷子になっていることは変わりません。わかりやすい案内をしてあげることが大切です。
サイト内のリンク設定ミス
ページの本文や導線ボタンに設定されているリンク先URLが間違っている場合にも発生します。たとえば内部リンクのスラッグ(URLの末尾部分)が古いままになっているケースなどです。
サイトの更新頻度が高い場合は、定期的にリンク切れのチェックを行えるとよいでしょう。
404エラーページはSEOに影響するのか
Webサイトを運営していると、「404エラーが多いと検索順位が下がるのでは?」と心配される方もいます。結論からお伝えすると、404エラー自体はSEOに直接的な悪影響を与えません。
Googleも公式に「サイトに404ページが存在しても検索順位には影響しない」と述べています。URLが間違っていたり、ページが存在しないURLにアクセスがあるのは自然なことで、Googleはそれを問題視しません。
ただし、以下のケースでは間接的にSEOへの影響が出ることがあります。
被リンクがあるページを削除した場合
外部サイトから被リンク(他のサイトからのリンク)を受けているページを削除して404のままにしておくと、そのリンクが持つSEO上の評価(リンクジュース)が失われてしまいます。
被リンクを受けているページを削除する場合は、関連性の高い別のページへ301リダイレクトを設定するのが適切な対処法です。
ソフト404エラーに注意
「ソフト404エラー」という少し特殊なケースもあります。これは、ページのコンテンツが「このページは存在しません」という内容でありながら、HTTPステータスコードは「200(正常)」を返してしまっている状態です。
本来は404であるべきなのに200として扱われると、Googleがそのページを正常なページとしてクロール・インデックスしようとして混乱します。意図せずソフト404が発生していないかは、Google Search Consoleで確認できます。
カスタム404ページを作るメリット
デフォルトの無機質な404ページのままにしておくのと、きちんとカスタマイズされた404ページを用意するのとでは、ユーザー体験に大きな差が出ます。
離脱(直帰)を防ぐことができる
デフォルトの404ページはブラウザが用意した素っ気ない画面で、「元のページに戻るしかない」という状況を生み出しがちです。一方、カスタム404ページにトップページへのリンクや人気記事一覧、検索ボックスなどを設置しておくと、ユーザーがサイト内を回遊してくれる可能性が高まります。
迷い込んでしまったユーザーを、そのままサイトの中に留めておけるわけです。
ブランドの印象を保つことができる
デフォルトの404エラー画面はサイトのデザインとまったく異なることが多く、ユーザーに「このサイト、大丈夫かな?」という不安感を与えることがあります。
カスタム404ページをサイト全体のデザインと統一しておくと、エラーが起きた瞬間でもブランドイメージを維持できます。
コンバージョンにつなげることもできる
404ページに問い合わせボタンや資料請求のリンクを設置しておくことで、エラーページを経由してもコンバージョンが生まれる可能性があります。「ページが見つからなかった場合でもチャンスに変える」という発想です。
優れた404ページに必要なコンテンツ要素
カスタム404ページを作る際には、何を盛り込むかが重要です。ユーザーが迷子になっている場面なので、「次の行動」を明確に示してあげることがポイントです。
エラーの内容をわかりやすく伝える
「お探しのページが見つかりませんでした」という旨を、シンプルかつ明確に伝えます。専門的な表現(「404 Not Found」のみ)だと一般のユーザーには伝わりにくいので、日本語でやわらかく説明するのが親切です。
トップページへの導線
最低限、トップページへ戻るリンクは必ず設置します。迷子になったユーザーが「とりあえずトップに戻れる」という安心感を与えることができます。
サイト内検索ボックス
何かを探していてたどり着いた可能性も高いので、検索ボックスを置いておくとユーザーが自分で目的のページを探せます。
人気ページや関連ページへのリンク
「よく読まれている記事」「おすすめのサービス一覧」など、ユーザーが関心を持ちそうなページへのリンクを置いておくのも効果的です。
ナビゲーション(ヘッダー・フッター)を残す
404ページにもサイト全体のヘッダーとフッターを表示しておくことで、メニューから別のページへ移動しやすくなります。404ページだからといってヘッダーを外すと、ユーザーはどこにも行けなくなってしまいます。
404ページのデザインで意識したいポイント
見た目の設計でも、いくつか押さえておきたいことがあります。
サイト全体のデザインに合わせる
先ほども触れましたが、404ページはサイトの一部です。フォント・色・ロゴなどを他のページと揃えることで、ブランドとしての統一感を保てます。「エラーが起きたのに、見た目は一貫していた」という体験は、意外と好印象を与えます。
エラー感を出しすぎない
真っ赤な警告風のデザインや、威圧的な文言は避けましょう。ユーザーは自分が間違えた可能性もある場面にいるので、責めるようなデザインは印象が悪くなります。「申し訳ありません、ページが見当たりませんでした」程度のやわらかいトーンが適切です。
スマートフォン対応も忘れない
現在はスマートフォンからのアクセスが多くのサイトで過半数を超えています。404ページもレスポンシブ対応(画面サイズに合わせて自動調整)できているか確認しておきましょう。
ユーモアやブランドらしさを取り入れることもできる
少し上級者向けですが、ブランドのキャラクターや世界観を404ページで表現している企業もあります。例えばゲーム会社ならゲームキャラクターを登場させたり、環境団体なら絶滅危惧種のイラストを使ったりと、404ページをブランドコミュニケーションの場として活用しているケースもあります。
ただし、わかりやすさが最優先。ユーモアよりも「次にどこへ行けばいいか」の案内を先に考えるとよいでしょう。
実際の404ページ事例
参考になりそうな企業の事例を紹介します。
Amazon
Amazonの404ページには、かわいい犬の画像が使われており、エラーを感じさせない穏やかな雰囲気です。サイト全体のナビゲーションはしっかり残されており、トップへの導線も明確です。
LEGO
LEGOの404ページは、LEGOブロックのキャラクターが登場するデザインで、ブランドの世界観がそのまま表現されています。見た瞬間に「LEGOらしい」と感じられ、エラーであることを一時忘れるほどです。
任天堂
任天堂の404ページはシンプルで、サイトの案内を明確に提示しています。過剰な演出よりも、次のアクションがわかりやすいことを重視したデザインです。
これらの事例に共通するのは、「デザインの統一感」と「次の行動への明確な導線」の両立です。
404エラーページの設定方法
404ページをカスタマイズする方法はいくつかあります。主なものを紹介します。
WordPressの場合
WordPressを使っているサイトであれば、テーマの中に 404.php というファイルがあります。このファイルを編集することで、404ページのデザインや内容をカスタマイズできます。
テーマによっては管理画面から設定できるものもありますし、プラグインを使って簡単にカスタマイズする方法もあります。
専門知識がない場合の対応
HTMLやPHPがわからない場合は、Web制作会社に依頼するのが確実です。404ページの設定は比較的小さな作業ですが、サイト全体のリニューアル時にまとめて整備してもらうのがスムーズです。
.htaccessを使う方法
WordPressを使っていないサイト(HTMLのみのサイトなど)では、サーバーの設定ファイルである .htaccess に以下のような記述を追加することで、カスタム404ページを指定できます。
ErrorDocument 404 /404.html
この設定を追加すると、404エラーが発生したときに /404.html のページを表示するようになります。
レンタルサーバーの管理画面から設定する方法
エックスサーバーやロリポップなどの主要レンタルサーバーでは、管理画面からエラーページをカスタム設定できる機能が提供されています。コードを書かずに設定できるため、初心者の方にも扱いやすい方法です。
404エラーを減らすために日頃からできること
404エラーページを整備することも大切ですが、そもそも404が発生しにくいサイト運用も意識できるとよいでしょう。
ページのURLを変更するときはリダイレクトをセットで設定する
URLを変更する場合は、必ず旧URLから新URLへの301リダイレクトを設定します。これにより、古いURLへのアクセスが自動的に新しいURLに転送されます。
定期的にリンク切れをチェックする
社内スタッフが記事を更新するサイトや、外部からリンクを多く受けているサイトでは、定期的にリンク切れの点検をするとトラブルを未然に防げます。無料のリンクチェックツールを使うことで、サイト内の壊れたリンクを一覧で確認できます。
Google Search Consoleで定期的に確認する
Google Search ConsoleのカバレッジレポートやURLの検査機能を使うと、Googleがクロールした結果として404になっているURLを確認できます。意図せず404になっているページが見つかることもあるので、月に一度程度の確認をおすすめします。
まとめ
404エラーページは、ユーザーが迷い込んだときに表示される画面です。デフォルトのままにしておくと「使いにくいサイト」という印象になりがちですが、きちんと設計されたカスタム404ページを用意することで、離脱を防ぎ、ブランドの信頼感を保つことができます。
SEOへの直接的な影響は小さいものの、ユーザー体験の観点から放置するのはもったいない箇所です。サイトをリニューアルするタイミングや、定期的なサイト改善の際に、404ページも一緒に見直してみてください。
「自社のサイトの404ページがどうなっているか確認したい」「カスタムエラーページを整備したい」という場合は、ぜひ当社にご相談ください。