404エラーはサイトからの離脱を招くうえに、ユーザーにとっては無用な体験です。
今回は、404エラーが発生する原因から、404エラーページの設定と作り方について紹介致します。
Contents
404エラーページとは？
ページを開こうとしたとき「404 Not found」や「ページが見つかりません」といったような表記が出てきた経験は皆さんあるかと思いますが、404エラーページとは、該当するURLのページが存在しなかった時にサーバーから返されるエラーメッセージの一つです。
404以外だと、503などは日常的に目にすることがあるかと思いますが、それ以外のものはあまり目にする機会が無いかもしれませんね。
要するに、存在しないページにアクセスしようとしたときに404エラーページが出てくるわけですが、原因としては下記のようなものが多いかと思います。
- URLの入力を間違えてしまった時
- 該当するURLのページが削除されていた時
- リンク先がリンク切れしていた時
上記のような原因が考えられますので、ユーザーが、404エラーページに遭遇した時は、まず、自分が開こうとしているURLに間違いが無いか確認することで、間違いに気づくケースもありますが、間違いに気づかなかったり、ページが削除されていた場合やリンク切れの場合には、ユーザー側で対処することが難しくなるため、多くの場合はそのままサイトから離脱してしまいます。
実際、私自身も404エラーページは何度も見たことがありますが、ただ単に「Not Found」と書かれただけのページが出てくれば、「このページは消えちゃったのかな」と思って、ブラウザバックしてしまうのは当然のことと言えます。
そうならない為にも、しっかりとした案内を記載した404エラーページを用意することで、サイトからの離脱を防ぐことに繋がるのです。
404エラーによるSEOへの影響についてはこちらの記事をご覧ください。
404エラーページの作り方
404エラーページに必要な内容の精査
では、どんな内容の404エラーページを作成すると良いのでしょうか？
最低限押さえておきたい内容を下記にまとめました。
- デザインはもとのサイトのデザインを出来るだけ引き継ぐ
- ページが存在しない理由を明記する
- 他の記事(一覧ページ)やサイトのTOPページへのリンクをはる
上記を満たしていれば、404エラーページの案内としては十分かと思います。
更にユーザビリティを意識するのであれば、検索窓も用意しておくと、そこで検索しなおす選択肢をユーザーに与えることが出来ます。
そのうえで、ページが存在しないことをどのように表現するかは自由ですので、中にはユニークな404エラーページを用意しているサイトもあります。
ユーザー目線で考えれば、求めていたページへのアクセスを拒否されたようなものですから、少なからず残念な気分になるはずですので、ユニークな表現であったり、ユーザビリティを意識した404エラーページの存在は、ユーザーにとって非常に有用なページであると言えます。
404エラーページの構築
まず最初に、先の内容を押さえた404エラーページを作成します。
多くのサイトであれば、ヘッダーやフッター、サイドの共通部分があるかと思いますので、それらのデザインを引き継いだ状態で、コンテンツエリアの内容を書き換えればOKです。
当サイトにも404エラーページは存在していますが、かなり簡素な作りになっています。
簡素ではあるものの、最低限の内容は押さえていますので、これだけでも、設定しないよりは離脱を防ぐことに繋がっているはずです。
ファイルの準備が出来たら「404.html」などの名前で保存します。(ファイル名は任意)
PHPコードを使用している場合は、「404.php」などで良いでしょう。
ここまで準備が出来たら、ファイルをアップロードします。
アップロード先は、サイトのインデックスファイルがあるディレクトリです。
.htaccessの設定
404エラーページを作成しても、設置しただけでは、実際にエラーが発生した場合でも、表示されませんので、「.htaccess」を使って表示設定を行います。
.htaccessも基本的にはインデックスファイルと同じディレクトリに設置します。
最初から.htaccessが入っている場合は、後述の記述を書き足せばOKです。
入っていない場合は、「.htaccess.txt」を作成し下記の記述をした後、サーバーにアップロードし、その後「.txt」の部分を削除すれば、機能するようになります。
記述内容はこちらです。
.htaccessのアップロードまで終われば、404エラーが発生した際に、作成した404エラーページが表示されるようになります。
正常に動作しているか確認する場合は、サイトのURLの最後に適当な文字列を入れて実際には存在しないページを開こうとすることで確認できます。作成したページが表示されれば設定完了です。
404エラーページは必ず用意したほうがいいの？
404エラーページは必須ではありませんが、冒頭にもある通り、真っ白なページにただ「404 Not Found」とだけ書かれたページが出てきたのでは、多くのユーザーが戸惑ってしまいますし、わざわざURLを確認してそのサイトの閲覧を続けることはしないことが考えられます。
ユーザビリティを考えるのであれば、必須と言えますが、そもそも「404エラーなんて起こさせないよ！」という場合は、必要ないかもしれませんね。とは言え、意図せず発生してしまうこともありますから、用意しておいて損はないものと言えるかと思います。
参考にしたい様々な404エラーページ
多くの企業のサイトでユニークな404エラーページが用意されています。
サイトの離脱防止から、そのまま自社の利益につながる施策、ユーザーを楽しませる工夫など参考になるかと思います。
Screaming frog
https://www.screamingfrog.co.uk/seo-spider/404notfound
水面をクリックするとカエルが出てきたり、ハエや池の中の魚はマウスポインターを近づけると逃げていきます。
アニメーションを使った表現で、404エラーのショックも和らぎそうですね。
PIXAR
https://www.pixar.com/404notfound
インサイドヘッドに出てくるキャラクター「カナシミ」が表示されます。
こんなにも悲しい表情をされたら、こちらが申し訳なく感じてしまいますね。
Amazon
https://www.amazon.com/404notfound
こちらは海外版のAmazonの404エラーページです。
Amazonで飼っている？犬が出てきます。なんとも哀愁溢れる表情です。
リロードすると別の犬が出てきます。犬の画像をクリックすると、可愛らしい犬たちの一覧が出てきます。
404エラーページで会社内のちょっとした紹介をするのも、ページの有効利用ですね。
ちなみに、日本語版Amazonサイトの404エラーページは非常にシンプルなものでした。
Honda -本田技研工業株式会社-
http://www.honda.co.jp/404notfound
非常にユーザビリティが高い404エラーページです。
下に進むとリンクが無効になってしまった原因を追究し改善するための報告用フォームまで用意されています。
ユーザーが二度と404エラーページに到達することの無いような努力の姿勢が見受けられます。
プラチナゲームズ
https://www.platinumgames.co.jp/404/
「ベヨネッタ」などのアクションゲームで有名なプラチナゲームズの404エラーページです。
404エラーページであるにもかかわらず、ゲームが出来てしまいます。
ジャンプと攻撃を使って画面右からやってくる敵を倒すとスコアがカウントされ、ゲーム終了後はスコアをツイッターで共有できるようになっている、遊び心溢れる404エラーページです。
MARVEL
MARVELの映画に出てくるキャラクターが404エラーのメッセージを伝えてくれます。
こちらもリロードするといくつかのパターンがあるようです。
画像はアントマンが表示されているバージョンで、虫眼鏡を動かして小さな文字を読むことが出来ます。
まとめ
404エラーは少なからずユーザーにマイナスな印象や感情を与えるきっかけになります。その結果、サイトから離脱してしまうことになり、意図しないところでユーザーを逃してしまうことになってしまいます。
せっかくアクセスしてくれたユーザーを逃さない為にも、404エラーページは最低限の設定をしておくべきでしょう。
今回、この記事を書くにあたって、様々なサイトの404エラーページを見ましたが、上記で紹介したサイト以外にも多くの工夫を凝らした404エラーページがいくつかありました。
メインコンテンツでは無いので、そこまで時間をかけて作るものなのかどうかは個人の判断によりますが、ユニークな404エラーページはユーザーの体験を助ける有用なものだと言えます。ただし、あまりにも悪乗りが過ぎるような404エラーページはかえってユーザーに悪い印象を与えてしまうことになりかねないので、やりすぎは禁物です。
もし、404エラーページを用意していない場合には、是非設定してみてください。
