404エラーページの作り方～デザインやサンプル交えてご紹介～

Webページを開こうとした際、該当するページが存在しなければ、ブラウザ上では“404エラー”が表示されます。そう、「404 Not Found」や「ページが見つかりません」といった文言が並ぶ、あれです。あの画面を目にした経験、一度はあると思います。

おそらく、デフォルト仕様が一般的なため、件のページに対して淡白な印象を受けている人は多いかもしれません。しかし、Webサイトによっては、独自の404エラーページを表示させているケースもみられます。
本記事にてフォーカスするのは、ずばりそういったユニークな404エラーページです。
作り方やメリット、事例の紹介とあわせて具体的にデザインの魅力についても解説します。

404エラーとは？

そもそも404エラーとは、リクエストされたURLにWebページが存在しないというエラーの一種です。
以下、あらためて仕組みを細かく伝えます。
まず、ブラウザなどでWebサイトを閲覧する際、リンクのクリックやURL入力が必要です。つまり、サーバ側に「ページを表示したい」というリクエストを送らなければなりません。サーバ側はこのリクエストを処理した結果をHTTPステータスコードと呼ばれる3桁の数字で返します。
正常にページを表示させることに成功した場合、別URLにリダイレクトした場合、Webサーバにアクセスが集中しすぎたためページの閲覧を制限している場合……等々、それぞれ割り当てられたコードが存在するなか、そのうちの一つ、指定されたURLにページが見つからない場合だと、サーバ側からは“404”のHTTPステータスコードが返ってくるというわけです。

404エラーの原因

よく分かっていない方が404エラーページに遭遇すると、時々、慌てふためく様子が見受けられます。
URLの入力ミスや、リンク先が変更していた、削除されていた、など原因はいたってシンプルです。これらはいずれも404エラーに該当します。落ち着いて対処しましょう。

404エラーとSEOの関係

すでに遷移先のページが消滅していたなど内部リンクの設定ミスで404エラーが発生した場合、サイト構造の致命的な問題としてSEOにまで悪影響を及ぼす懸念が生じる方もいらっしゃるでしょう。
しかし、Googleはそれによって検索順位の下落は無いとアナウンスしています。
あくまで404エラーは、無効なURLに対してサーバ側が返す答えという概念です。なお、Googleは一部の内部リンクで仮に404エラーが出たとしても、他（の内部リンク）が正しく機能しているのであればサイトの評価を下げる理由には値しないという判断をされています。
サービスの終了したリンク先に対して適切に404エラーを返しているわけです。むしろ、これは正常に稼働しているWebサイトとも捉えることができます。

もちろん、リンク切れによってユーザー体験を損なわせてしまう恐れもあります。だからこそ、404エラーの発生を確認した場合はそのまま放置せず、原因をしっかり調べ、内部リンクの修正や正しいページへのリダイレクトなど適切に対処するようにしましょう。すなわち、ユーザビリティの意識が大切です。そして、お察しの通り、その手段の一つにはオリジナリティに富んだ404エラーページの作成が含まれます。

404エラーページを魅力的に作る意義とメリット

404エラーページを目の当たりにしたユーザーのなかには、サイト自体、無くなってしまったと勘違いされる方がいます。聞くとどうやら、無機質な「Not Found」の画面に出くわしたときの残念な気持ちが、即座に離脱行為へと向かわせるようです。Web知識に疎ければなおさら、そういった行動になる模様。
一方で、オリジナルの404エラーページは、サイト自体にまだ活力が漲っているのだとか（笑）。少なくとも、サイトをフレーム構造にするなどの工夫を行い、404エラーページと一緒にサイトのトップページへのリンクやサイト内メニューが表示されるように手を加えるだけでも、直帰率はある程度抑えられそうです。
また、サイト内の回遊だけでなく、デザインにユーモアがあればたちまちブランディングに寄与する期待も持てます。
“存在しないページの設計に凝るなどというのは、時間の無駄だ”と安易に決めつけてしまっては、思わぬ収穫を逃しかねません。オリジナルの404エラーページのメリットは、意外にも大きいと感じます。

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

オリジナルの404エラーページをデザインするにあたっては、いくつかおさえておきたいポイントがあります。

一つは、Webサイト全体の統一感が損なわないようにすることです。404エラーページであっても、サイトデザインのテーマはしっかり馴染ませるようにしましょう。

そして、表示内容のテキストに考えられるページが存在しない理由を添えてあげることです。先述した404エラーをわかっていないユーザーは、こうした配慮があるだけで、信頼感を抱くようになります。
こうした補足一つでそのサイトに対する印象の良し悪しが左右されることは往々にしてあるものです。対応しないわけにはいきません。
加えて、サイトマップの掲載やサイト内検索窓、リンク切れ報告用のメールフォームまで用意してあげられると尚良いでしょう。

404エラーページの作成手順

さて、ここからは404エラーページの作り方について説明します。
まず、コンテンツエリアに載せる内容を整理しましょう。
繰り返しお伝えしている通り、404エラーが発生した旨とその原因、サイトマップやサイト内検索窓、リンク切れ報告用のメールフォームなど、ユーザーが戸惑わないための要素は確実に盛り込みたいところです。

なお、作成したページはわかりやすく「404.html」「404.php」といったファイル名で保存することをおすすめします。
また、画像やCSSファイルなどを用いる際のパス表記は、必ず「/」から始まるルートパスにすることが404エラーページの原則です。しっかり守るようにしましょう。さもなければ、表示不具合が起きてしまいます。

デザイン構築も含め、404エラーページを作成した後で行う作業は、サイトのインデックスファイルが存在するディレクトリへのアップロードです。正しく表示されるように「.httaccess」の設定も忘れてはいけません。方法は簡単。「.htaccess.txt」というファイルに、「ErrorDocument 404 /404.html」と記述するだけでOKです。
ちなみに、ここを絶対パスで記述した場合、404エラーページへの転送処理が挟まってしまします。結果、404エラーページが表示されるにも関わらず、HTTPステータスコードは正常表示を意味する200が返ってくるのです。それによって、検索エンジンが404エラーページをインデックスしてしまう可能性があります。そうなると対象ページは低品質コンテンツと捉えられ、当然、サイト評価も下がる恐れがあるでしょう。
なお、この現象は「ソフト404」と呼ばれます。

また、EC-CUBEやWordPressなどは、比較的、設定が容易だと考えます。というのもそれらは、404エラーページを表示させるためのシステムがデフォルトで備わっているからです。気を付けたいのは、それぞれの設定方法に従えば問題ないと思いきや、複数のプラグインやテーマが入り組んでいる場合、すべてに対応させる必要があります。各シチュエーションにおいて見落としがないよう、あくまで慎重に対処しましょう。

言うまでもなく、アップロード後はきちんと見直すことが大事です。
作成した通りの404エラーページが表示されているかどうか。
HTTPステータスコードが404を返しているかどうか（ソフト404が発生していないかどうか）。
前者は、対象ページのURLをブラウザに入力、後者はブラウザごとの開発者ツールを使用。それぞれ、しっかりチェックしましょう。
ここまで実行し、問題なければ、ひとまず安心です。

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

独自の404エラーページを作るといっても、初心者がいきなり着手するにはやはり少々不安がつきまとうものです。
本章では、秀逸だと思ったページをサンプルとしていくつかご紹介します。
いずれも各企業のカラーやブランドイメージに合ったキャッチーなページデザインです。
ぜひ参考にしてみてください。

Amazonの404エラーページ

海外版Amazonの404エラーページでは、犬の画像が名前付きで表示されています。トップページに加えて、Amazon本社で行われている「Dog of Amazon」（社員が愛犬と同伴出勤する活動）の説明ページのリンクが用意されているのも実に巧みです。企業の取り組みをうまく適用させた、戦略的にも優れたデザインといえるでしょう。

可愛いワンちゃんが印象的なAmazonの404エラーページはこちら＞

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

プラチナゲームスは、「ベヨネッタ」「ニーア オートマタ」などの人気ゲームを手掛けるゲーム開発会社です。
この企業の公式サイトではインタラクティブな404エラーページが用意されています。というのは、ページ上でゲームがプレイできるのです。
襲ってくる敵をジャンプと射撃を駆使して撃退するアクションゲーム。これが結構楽しいのです（笑）。
ゲームの途中、「ベヨネッタ」のキャラクターがドット絵で登場し、BGMも当ゲームの8ビットアレンジを使用するなど、ブランドアピールもしっかり行っています。
ゲーム終了後に表示されるスコアは、Twitter上に共有することも可能です。
ゲーム会社ならではの遊び心満載の404エラーページです。

君はスコアをどれだけ伸ばせるか！？プラチナゲームスの404エラーページはこちら＞

本田技研工業株式会社の404エラーページ

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

丁寧なつくりが好印象！本田技研工業株式会社の404エラーページはこちら＞

NASAの404エラーページ

NASAの404エラーページはデザインこそシンプルなものですが、文言に注目すると、実はユーモラスであることに気づかされます。
ここでは、「The cosmic object you are looking for has disappeared beyond the event horizon.（あなたが探している宇宙の物体は、事象の地平線の彼方に消えました。）」と、宇宙に絡めた言い回しで404エラーを表現しています。※事象の地平線とは光すら到達不可能な距離のことで、俗に言う「宇宙の果て」と同義です。
このように、テキストでオリジナリティを伝えるのも有効です。ブランドや企業、組織の特徴を洒落た言葉であらわすのも一つのテクニックだといえます。

クスッと笑えるNASAの404エラーページはこちら＞

オリジナルの404エラーページでユーザーの心をつなぎとめよう！

404エラーはユーザーにとってマイナスな感情を想起させてしまうものですが、オリジナルのページに仕立てることで、逆にプラスに作用させることもできます。
ユニークな404エラーページがユーザーのあいだで話題となり、結果的にサイトへのアクセス数向上につながるケースも、決して珍しくありません。
「ページビューやコンバージョンが伸びない」とサイト運営に悩まれている方は、ここに着目してみてはいかがでしょう。意外と打開策につながるかもしれません。

そういうわけで、404エラーページの魅力、その可能性を、今後も追跡していきたいと思います。