404エラー（not found）とは？よくある原因と解決方法を解説

.htaccessを使用する場合

「.htaccess」とは、サーバーをディレクトリ単位で制御するためのファイルのことです。.htaccessを使って404ページを設定する手順を紹介します。

WordPressの場合

WordPressはデフォルトの設定の場合、404のHTTPレスポンスコードが届くとトップページが表示される仕様になっています。404ページを表示させるためには、以下の作業が必要です。

ただしWordPressで使用しているテーマによっては、すでに404.phpが存在するケースもあります。使っているテーマの仕様およびテーマごとに設定方法を確認するのが安心です。

サーバーの管理ページで設定できる場合

利用しているレンタルサーバーによっては、サーバーの管理ページから404ページを設定できるケースがあります。この場合は、レンタルサーバー側の指示に沿って404ページの設定をしてください。「エラーページ」といった項目から設定できるケースが多いです。

サイト全体と統一感を持たせる

オリジナルの404ページを作成する際、サイト全体と統一感を持たせる意識が必要です。

404ページのデザインや印象が異なると、ユーザーは「別のサイトへ移動してしまったのか」「怪しいリンクを踏んでしまったかもしれない」など、不安に感じるでしょう。Webサイト閲覧中の不安や混乱は、結果としてサイト全体への悪印象につながる恐れがあります。

ユーザーの混乱を招かないよう、404ページもサイト全体のデザインと統一感を持たせる必要があります。404ページ単体で作るのではなく、Webサイトに存在するページのひとつとして作成しましょう。

404ページであることを伝える

404ページでは、ファーストビューでわかりやすく404ページであると伝える必要があります。表示しようとしたページが存在しないため、「エラーページが表示されている」と端的に伝えましょう。

エラーページという旨は、短文かつわかりやすいフォントで記載した上で目立たせるのが効果的です。併せてエラーページが表示されている理由や、別のアクションへ誘導する文章なども記載すると、より親切な印象になります。

サイトマップなどを配置する

サイトマップなどのテキストリンクを配置し、ユーザーが目的とするコンテンツが存在すると伝えることも大切です。

404ページという旨だけが表示されていては、ユーザーは「結局どうすれば良いの？」と感じてしまうでしょう。目的のページを見つけられない・放り出されたような気持ちになってしまい、サイトから離脱してしまう恐れがあります。

404ページによる離脱を防ぐため、サイトマップやサイト内検索窓など、ユーザーを目的のコンテンツへ誘導する工夫も必要です。

デザイン例①Amazon

画像参照元：アメリカ版Amazon公式サイト404ページ

アメリカ版Amazonの404ページは、キャプチャ画像のように犬の写真が大きく表示されたデザインです。今回紹介したデザイン以外にもいくつかの種類がありますが、いずれも犬の写真がメインのデザインとなっています。

404ページが表示されると残念な気持ちになり、Webサイトに対して悪印象を持ってしまうケースも珍しくありません。しかし、このように癒やされる・思わず見てしまうようなデザインであれば、悪印象にはなりにくいでしょう。

なお、米Amazon公式サイトの404ページで表示されるのは、全てAmazonの従業員に飼われている犬の写真です。Amazonのオフィスには犬が楽しめるような設備を用意しているほか、従業員は犬とともに出勤できるユニークな社風であるため、404ページで単に遊び心を加えるというだけでなく、社内環境や雰囲気のアピールにもつながっているのです。

デザイン例②任天堂

画像参照元：任天堂公式サイト404ページ

任天堂の404ページでは、同社の代表作であるマリオシリーズのキャラクターであるマリオが大きく表示されています。

マリオは日本国内に限らず、世界的に有名かつ人気のゲームキャラクターです。任天堂といえばマリオというイメージを持つ人も少なくありません。

404ページの文章そのものは特別なものではなく、最小限の情報のみのシンプルな内容です。だからこそ、同社の代表的なキャラクターであるマリオが強く印象に残り、ブランド色のアピールにつながっています。

なお、シンプルな文章とはいえ、ユーザーへの案内には十分に効果的です。トップページへのリンクと上部メニューへの誘導により、目的のページを探すサポートをしています。

ブランド色のアピールとユーザーへの案内を上手く両立している例です。