404 エラーとは？原因と解決策【オシャレなデザインも紹介】

悩む人

サイトを開こうとしたら、画面上に404エラー（お探しのページが見つかりません）って表示が出たけど、404エラーって何？また、404エラーが表示されたときの具体的な原因と対策があれば知りたいです。

こんな悩みに答えます。

本記事の執筆者

Webディレクター歴6年目で、過去に複数のWebサイトを管理・運用した経験があります。

気になるWebサイトがあって、クリックしたら以下のように404エラー（404 Not Found）のページが表示されたことがないでしょうか？

当ブログ404エラーメッセージ画面

急に404エラー（お探しのページが見つかりません）が出たら何が起きたのか分からず正直焦りますよね・・・。

僕もWebディレクターで新人時代は、404エラーと表示されても『一体何のこと？何でサイトが見れないの？』と思って、何回も混乱した経験があります。

KEI

本記事では、過去に苦戦した自分に向けて、404エラーが出る原因から404エラーが出たときの対処方法について、書いてみます。

記事後半では、404エラー画面でちょっとオシャレなデザインもいくつか紹介してみますので、404エラーを詳しく知りたい方の参考になりましたら幸いです。

[toc]

404エラー(Not Found)とは？

404エラーは、サーバーエラーの１つでして、指定したURLが存在しないときに表示される画面のことです。

GoogleなどWebブラウザでサイトを閲覧しようとするのに、サーバーに向けて「この情報ください！」といったリクエストを送る作業が行われます。

図解にすると以下のように、Webブラウザとサーバー間でやりとりが行われています。

Webブラウザ側が、『このサイトを見せて〜（リクエス）』と要求しているのに、Webサーバーから『そんな情報はない！』と返答するときに404エラーが表示される感じです。

404エラーの原因と対処法は？

404エラーが表示されてしまう原因は、以下の原因が考えられます。

404エラーが表示される原因

・リンク切れしており遷移先にアクセスできない
・入力したURLが間違っている（スペルミス）
・アクセスしたいページがすでに削除されている（存在しない）
・リダイレクト設定ができていない

404エラーが表示される原因は、上記が考えられます。

僕が新人ディレクターの時によくやっていたミスで、アドレスバーに間違ったスペルを入力して404エラーが表示されることが多かったです・・・。

KEI

その他に、お気に入りのページをブックマークしていて、久しぶりにページを開こうとしたら、ページがすでに削除されており404エラーでページが表示されることもありました。

404エラーがあることでのSEO問題

404エラーがあることでSEOに直接問題はないと言われています。

一般的に、404 エラーが発生してもサイトの検索パフォーマンスに影響が及ぶことはありません。したがって、対象の URL が自分のサイトに存在しないことが明確な場合は、このエラーを無視しても問題ありません。

参考元：Search Console ヘルプ

もし、SEO対策をするのであれば、リンク切れがあるページを探して対策するより、他のSEO対策に取り組んだ方が良さそうですね。

また、404エラーページがGoogleにインデックスされていても、検索結果に表示されなくなります。

とはいえ、SEOに関係がなくても、古いページが404エラーページになる場合は、リダイレクト設定をしてあげて、新ページへ誘導してあげるとユーザーに親切になるので、設定しておくことをオススメします！

: 【簡単！】WordPressで301リダイレクト設定のやり方

続きを見る

WordPress記事で404エラーが出たときの解決と対処法

繰り返しになりますが、サイトを使っていて404エラーが出たとき一瞬焦りますよね...。

特に、WordPressを使ってブログやサイト開設したばかりで、404エラーが表示されても何のこと？と思う方もいるかと思います。

WordPress（ワードプレス）で404エラーが表示される原因としては、

・サイトの移転

・プラグインを導入

・URLの入力ミスがある

・削除されているページである

・パーマリンクを変更している

上記をした後に、404エラーが発生する可能性があります。

そんな時は、以下の方法で解決できるか試してみてください。

URLの入力ミスがある
パーマリンク設定の修正をする
htaccesファイルにパーマリンク設定を書き込む

１つずつ順番に紹介します。

KEI

① URLの入力ミスがある

URLが間違っていると、404エラーが表示されます。

404エラーが表示されましたら、まずはURLが間違っていないかを確認しましょう！正しいURLを入力すれば表示されます。

KEI

また、削除されているページにアクセスすると「404 not found(404エラー)」が表示されます。

404エラーが出ましたら、アクセスしたページが削除されていないかをチェックしてみましょう。

なお、WordPressでページ削除されているかのリンク切れをチェックするには、「Broken Link Checker」プラグインがオススメです。

詳しくは以下記事で紹介していますので、興味のある方はチェックしてみてください！

: Broken Link Checkerとは？設定方法を紹介【リンク切れもう悩まない！】

続きを見る

② パーマリンク設定の修正をする

パーマリンク設定の修正はWordPressの管理画面を開きまして、サイドバーにある「設定 → パーマリンク設定」をクリックします。

ページ下にある、「変更を保存」をクリックします。

こちらの設定をすることで、パーマリンクの再設定が行われまして『.htaccess』が自動で上書きされます。

もし404エラーが出ましたら、こちらのやり方を試してみてください。

③ htaccesファイルにパーマリンク設定を書き込む

続いて、「htaccess」ファイルに直接書き込むやり方です。

もし、上記で紹介したパーマリンクの設定でうまく表示されませんでしたら、こちらのやり方も試してみてください。

注意ポイント

「htaccess」ファイルの編集を間違えると、画面が真っ白になる可能性があるので、編集に抵抗がない方はこちらを参考にしてみてください。

なお、htaccessファイルを編集する前にバックアップをしておきたい方は、以下の記事を参考にしてみてください。

: 【便利！】UpdraftPlusプラグインを使ってバックアップする方法【2021年版】

続きを見る

「htaccess」ファイルに直接書き込むには、以下ファイルをコピーします。

 command
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

コピーできましたら、更新をして完了です。

ちなみに、「.htaccess」が存在しない場合は新しく作成して、上記のコードをコピーして貼り付けてあげる必要があります。

修正が完了しましたら、念のため404エラーが表示されないかを確認してみてください。

404エラーぺージのオシャレなデザイン

最後に、404エラーをちょっとユニークで、オシャレなデザインをいくつか紹介します。

参考サイト：https://www.creativebloq.com/web-design/best-404-pages-812505

万が一404エラーが表示されても訪問者をイライラさせないで、楽しさがあるページデザインなのでとても参考になりますよ！

KEI

①：レゴ

参考サイト：レゴ

レゴの404エラーページでは、驚いた表情のレゴキャラクターが表示されて、レゴの世界観が全面的に出ている404エラーペーですね。

404エラーが表示されてもユーザーさんは安心感を得ることができると思います。

KEI

また、サイトに来てくれたユーザーさんを逃さないように、『ショッピングを始める』ボタンを置いているのが特徴的で、ショッピングできる機会を作っているのが魅力的です！

②：ピクサー

参考サイト：ピクサー

ピクサーもレゴと同様に、キャラクターを置いた404エラーページになっています。

『インサイド・ヘッド』に出てくるカナシミちゃんですね！

KEI

『泣かないで、ただの404エラーだよ』といったメッセージを置いて、ユーザーさんに寄り添うエラーメッセージになっています。

画面もシンプルですし、かなり作り込まれた404エラーページになっているので、センスのいい404エラーページだと思います。

404エラーとは？原因から対処法：まとめ

ここまで、404エラーページの原因から対策方法までを紹介しました。

404エラーは、SEO評価に影響がなくてもちゃんと対策をしておくことで、ユーザーさんの信頼性を得られることができます。

404エラーが表示された時は、ユーザビリティが低下してしまう可能性があるので、適切に設定しておくことをオススメします。

本記事を読み、ワードプレスを使って404エラーの内容から適切な対応方法まで理解できましたら幸いです。

ここまで読んでいただき、ありがとうございました。