404エラーページとは？作り方やデザイン例を解説！

誰しも「404 Not Found」や「ページが見つかりません」といった文言が並ぶ、404エラーを見かけたときは、落胆してすぐにページから離脱するという経験をしたことがあるのではないでしょうか。

白いページにそれらに関する文字が並んでいると、淡白な印象を受けている人は多いかもしれません。しかし、Webサイトによっては、独自の404エラーページを表示させているケースも見られます。

本記事では、オリジナルの404エラーページを作成したい人に向けに、メリットや作り方を解説しています。そもそも404エラーとは何か、SEOに関係するのかなどの基礎知識も紹介しているので、ぜひ参考にしてください。

404エラーページとは

404エラーページとは、リクエストされたURLにWebページが存在しないというエラーです。「Not Found」という表示が出ます。これは、サーバ側がリクエストを処理した結果をHTTPステータスコードと呼ばれる3桁の数字で返すものです。

404エラーが表示される主な原因は「ページが削除されている」「リンク先が変更している」「URLの入力ミス」などシンプルなものです。原因が比較的明確なので、対処しやすいエラーとなります。

404エラーとSEOの関係

404エラーは、無効なURLに対してサーバ側が返す答えという概念です。仮に404エラーが出たとしても、サイト全体が正常に機能しているのであれば、検索順位やサイトの評価を下げる理由にはならないとGoogle自体が明言しています。

ただし、404エラーを放置していると、質の悪いコンテンツと判断される可能性はあります。エラーが出たら、原因を調査して対策しておきましょう。

HTTPステータスコード一覧

100番台	情報処理中
200番台	正常
300番台	リダイレクト
400番台	クライアント側のエラー
500番台	サーバー側のエラー

HTTPステータスコードは、404以外にもあります。上記のテーブルにまとめたので参考にしてください。400番台と500番台が出た場合は、何かしらのエラーが起きているので速やかに対策しましょう。

オリジナルの404エラーページを作るメリット

オリジナルの404エラーページを作るメリットは、デフォルト表示ではなくオリジナルのページにすることで、サイト自体は運営されているとユーザーに見せられます。つまりは「サイトからの離脱（直帰）率の減少」に繋がります。

デザイン性に富んだ内容であれば、サイト内の他のページを見てくれる可能性があります。また、一時的な404ならば、いつ頃普及するかを明記することで再訪問に期待できます。

このように、オリジナルの404エラーページを作れば、ユーザーの次のアクションを起こさせることが可能になります。むしろメリットのほうが良いので、オリジナルの404エラーページを作りましょう。

404エラーページの作り方

404エラーページを作る際は、サイトのデザインに沿ったペラ1枚のページを作成しましょう。記載する内容は「404エラー」「お探しのページはありません」「現在ページは使用できません」など、表示できない旨のお知らせを記載してください。

ページが出来たら、次は表示設定です。「WordPress」と「.htaccess」に分けて解説します。

WordPressでの設定手順

WordPressでの設定方法は2種類あります。「404.phpの作成」「プラグインを使用」のどちらかです。

ファイルを作成する場合は、「404.php」を、テーマディレクトリ内で作成するだけです。それ以外の設定はありません。WordPressのテーマによってはすでにファイルが存在している場合があります。その際は、既存のファイルを直接編集するか子テーマで上書きすればOKです。

プラグインを使用する際は「Smart Custom 404 error page [404page]」がおすすめです。記事を書くように、自由に404エラーページの編集ができます。

.htaccessを使用した設定手順

WordPress以外でサイトを作成している場合は「.htaccess」ファイルを使用しましょう。手順は以下の通りです。

なお、404を設定するときは相対パスで記述し、「ハード404」にしてください。「ソフト404」というものがあり、404エラーページが表示されるにも関わらず正常表示を意味する200が返ってきてしまいます。絶対パスで記述しないようにしましょう。

404エラーページをデザインする際の注意点

404エラーページをデザインする際は「見た目」と「導線」の2つに注意して作成しましょう。メリットで紹介したように、離脱率に関わってくるからです。どういう風にすればよいか、もう少し解説していきます。

サイト全体のデザインに合わせる

404エラーページを作成するなら、サイト全体のデザインに合うようしましょう。全く異なるデザインにした場合、ユーザーがほかのページを見た際に驚いてしまいます。また、ギャップの差で違うサイトに行ってしまったかと勘違いして離脱する可能性も捨てきれません。

ユーザーファーストな設計にする

ここで言うユーザーファーストな設計は、「サイト内検索窓」「サイトマップ」「おすすめ関連記事」「問い合わせフォーム」など、次のアクションを起こしやすい導線を設置することです。離脱させない工夫を、ユーザー目線に立って考えてみてください。

参考にしたい404エラーページのデザイン

独自の404エラーページを作るといっても、初心者がいきなり着手するにはやはり少々不安がつきまとうものです。

ここでは、秀逸だと感じた404エラーページの見本として有名企業のものを紹介します。デザインに迷っている人は参考にしてみましょう。

Amazonの404エラーページ

404ページ：Amazon

海外版Amazonの404エラーページでは、犬の画像が名前付きで表示されています。トップページに加えて、Amazon本社で行われている「Dog of Amazon」（社員が愛犬と同伴出勤する活動）の説明ページのリンクが用意されているのも実に巧みです。

ページ更新（F5）すれば、色んな犬の写真に切り替わるので見ているだけでも楽しいエラーページとなっています。まさに、デザインと企業の取り組みを上手く適用させたい。戦略的なページです。

プラチナゲームスの404エラーページ

404ページ：プラチナゲームス

プラチナゲームスは、「ベヨネッタ」「ニーア オートマタ」などの人気ゲームを手掛けるゲーム開発会社です。この企業の公式サイトではインタラクティブな404エラーページが用意されています。というのは、ページ上でゲームがプレイできるのです。襲ってくる敵をジャンプと射撃を駆使して撃退するアクションゲーム。これが結構楽しいので、ついついプレイしてしまいます。

ゲームの途中、「ベヨネッタ」のキャラクターがドット絵で登場し、BGMも当ゲームの8ビットアレンジを使用するなど、ブランドアピールもしっかり行っています。ゲーム終了後に表示されるスコアは、X（旧Twitter）上に共有することも可能です。ゲーム会社ならではの遊び心満載の404エラーページです。

HONDAの404エラーページ

404ページ：HONDA

本田技研工業株式会社の404エラーページは、非常にしっかりしたつくりです。サイトデザインとの統一感もさることながら、各ページへの誘導も自然に機能しています。そのほか、リンク切れになったURLの報告フォームを用意するなど、要所をしっかりおさえている印象です。

企業としては完成された404エラーページと言えます。どういったページを作るか悩む場合は、HONDAのページを参考にしてみても良さそうです。

NASAの404エラーページ

404ページ：NASA

NASAの404エラーページはデザインこそシンプルなものですが、文言に注目すると、実はユーモラスであることに気づかされます。「The cosmic object you are looking for has disappeared beyond the event horizon.（あなたが探している宇宙の物体は、事象の地平線の彼方に消えました）」と、宇宙に絡めた言い回しで、宇宙の果て＝404エラーと表現しています。

このように、テキストでオリジナリティを伝えるのも有効です。ブランドや企業、組織の特徴を洒落た言葉であらわすのも一つのテクニックだと言えます。

オリジナルの404エラーページでユーザーの心を掴もう！

404エラーはユーザーにとってマイナスな感情を想起させてしまうものですが、オリジナルのページに仕立てることで、逆にプラスに作用させることもできます。ユニークな404エラーページがユーザーのあいだで話題となり、結果的にサイトへのアクセス数向上につながるケースも、決して珍しくありません。

「ページビューやコンバージョンが伸びない」とサイト運営に悩まれている方は、ここに着目してみてはいかがでしょう。意外と打開策につながるかもしれません。筆者も404エラーページの魅力、その可能性を今後も追跡していきたいと思います。