PINTO!株式会社PLAN-Bの情報発信メディア

2018.08.30

五十嵐 和希

WEB CREATION

目次
    1. 404エラーページとは?
    2. HTTPステータスコード一覧
      1. ・100番台(情報や案内)のコード例
      2. ・200番台(処理の成功)のコード例
      3. ・300番台(リダイレクト)のコード例
      4. ・400番台(処理の失敗)のコード例
      5. ・500番台(サーバーエラー)
    3. そもそもなんで作らないといけないのか?
    4. 404エラーページはデザインから決める
    5. 404エラーページ参考例
      1. 1.テレビ東京
      2. 2.Suumo
      3. 3.マクドナルド
      4. 4.ZOZOTOWN
      5. 5.RIZAP
      6. 6.東京ディズニーリゾート
      7. 7.原哲夫 公式ウェブサイト
    6. 404エラーページの作り方
      1. 01:サイト全体のデザインを統一する
      2. 02:エラーページである旨を分かり易く記載する
      3. 03:サイトの目的に合わせたページへの誘導
    7. WordPressの場合
    8. まとめ:404エラーページをカスタマイズして、魅力的なサイトにしよう!

お気に入りに登録していたページを見ようとした際に、コンテンツが無くなっていて「Not Found」という文字が表示されたという経験はありませんか?これは404エラーページと呼ばれ、リンク先のページや、検索結果を開いた先にページが存在しない場合に表示されることがあります。

普段何気なく目にするこの404エラーページですが、実はサイトを運営するうえで重要な役割を担っています。今回はそんな404エラーページの作り方についてお話します。


404エラーページとは?

サイト上に表示されるページには、必ずHTTPステータスコードが存在します。HTTPステータスコードとは、Webブラウザ、またはクローラーがサーバーにアクセスした際に返されるレスポンスのことで、ページが存在しない場合に404のステータスコードが返されます。

404エラーページを個別に設定していない場合は「Not Found」の文字が表示されるパターンが一般的です。

not found


HTTPステータスコード一覧

404以外にもHTTPステータスコードはいくつか存在します。なかでも100~500番台で大きく5つの内容に分かれており、400番台は処理の失敗を表します。

・100番台(情報や案内)のコード例

100 Continue サーバー側がリクエストを受け取り、継続してリクエストを出しても問題がない状態を表します。 101 Switching Protocols プロトコルの切り替えを表します。

・200番台(処理の成功)のコード例

200 OK サーバーへのリクエストが正しく処理され、ページが表示される状態です。我々が通常見ているWebページは、このHTTPステータスコードを返していることが多いです。 202 accepted サーバー側がリクエストを受け取ったうえで、処理は完了していない状態を表します。外部のプログラムでデータを生成する場合などに返されるステータスコードです。

・300番台(リダイレクト)のコード例

301 Moved Permanently リクエストしたページが恒久的に移動されている場合に返されるステータスコードです。サイトリニューアルでURLが変更される際などに利用します。 302 Found 301 Moved Permanentlyと同様にリクエストページが移動されている場合に返されるステータスコードですが、一時的な移動を表します。期間限定のページを使用する際などに利用します。

・400番台(処理の失敗)のコード例

403 Forbidden 権限を与えられた特定の者にのみページへのアクセスが許可されている状態です。権限が無い場合は閲覧ができません。 404 Not Found リクエストをサーバーが受けたものの、対象物が見つからずに処理できない状態です。

このステータスが返っているページは、Googleの評価対象にはならないため、大量に存在していたとしてもSEOに影響を与えることはありません。

・500番台(サーバーエラー)

500 Internal Server Error サーバーの内部にエラーが発生している状態です。Googleサーチコンソールのサーバーエラーの項目で該当のURLを確認することができます。 503 Service Unavailable 一時的にWebページが利用できない際に返されるステータスコードです。

サイトのメンテナンスやアクセスが急激に増えるなど、サーバーに負荷がかかった時に表示されます。


そもそもなんで作らないといけないのか?

404エラーページに訪れたユーザーに対して、Not Foundの文字のみが表示されたページを出すと、別サイトへ移動してしまう可能性が高いです。そこでサイトの離脱を最小限に抑えるために、グローバルナビや別コンテンツの情報を出す必要があります。

また404エラーページが整っていると、サイトの細部にまでこだわっているという印象をユーザーに与えるので、ブランドイメージを良くするのに最適です。


404エラーページはデザインから決める

メニューの配置によってユーザーにページ移動を促すことを前提に、404エラーページのデザインを決めましょう。まずはサイトから離脱させないためにユーザーの目に留まる分かり易いものにすると良いです。例えばイメージキャラクターを利用して、404ページである旨を伝えるのも一つの手段です。


404エラーページ参考例

デザインのイメージが湧かないという方は、実際に404エラーページの参考例をいくつか見てみましょう。

1.テレビ東京

「お探しのページは見つかりませんでした」とフォントサイズを大きくすることで、コンテンツが存在しないページであることを分かり易く伝えています。グローバルナビだけでなく、フッター部分のサイトマップへの誘導もあることで、次ページへの導線が強化されています。

2.Suumo

テレビ東京の公式ホームページと同様に、メインとなるエラーページの情報のフォントサイズを大きくすることに加え、注意喚起のアイコンが目立ちます。情報量の多いトップページへ戻るボタンと、前のページに戻るボタンの2つ設置しているのが特徴的です。 

3.マクドナルド

全体的にシンプルな作りで、トップページへのボタンを一番目立たせています。またマクドナルドのように、期間限定の商品を公開するページを有するサイトの場合は、404エラーページの理由として記載しておくとユーザーの理解を得るのが容易になります。

4.ZOZOTOWN

商品画像と値段を載せることで、商品ページへの導線を強化しています。ECサイトでは、このように商品ページに直接誘導する訴求方法も良いでしょう。あるいはもう少しユーザーに対して選択肢を広げて、商品のカテゴリーページをリンクとする方法も手段の一つです。

5.RIZAP

問い合わせや予約フォームへの導線に加え、電話番号をファーストビューに設置しています。またRIZAPの商品やコースを紹介するバナーも設置されており、404エラーページを他のページと同様にひとつのコンテンツとして扱っている印象を受けます。

6.東京ディズニーリゾート

シンプルな文言と、トップページへ促すリンクで構成されていますが、複数の言語で同様の注意書きが書かれています。リンク先も各言語に対応したページへ移動するようになっており、サイト利用者の国籍が多岐に渡る東京ディズニーリゾートならではの404エラーページと言えます。

7.原哲夫 公式ウェブサイト

見た目はトップページと同じコンテンツが表示されますが、HTTPステータスコードは404を返しています。エラーページ自体を無くしてしまうことで、ユーザーが通常のページを利用するのと変わらないようにしています。


404エラーページの作り方

404エラーページの参考例を基に、自身のWebサイトにも404エラーページを設定してみましょう。まずはページを作成しますが、ユーザビリティ向上に必要な基本パターンとして以下の内容が挙げられます。

404エラーページの作り方

01:サイト全体のデザインを統一する

グローバルメニューや、フッターメニューなどは他のページと同様に使用し、極力サイト全体のデザインと統一すると良いでしょう。

02:エラーページである旨を分かり易く記載する

コンテンツが存在していないことをフォントの大きさや、文字色等で調整し、明確にすることが大事です。補足としてコンテンツが存在しない理由を書いておくとより丁寧な印象を与えます。

03:サイトの目的に合わせたページへの誘導

トップページへのリンクを目立たせるのが基本系ではありますが、商品ページや問い合わせフォーム等、コンバージョンに直結するページへの誘導も良いでしょう。 404エラーページを作成しただけでは、存在するコンテンツとして認識されてしまいます。そこでHTTPステータスコードで404を返すために、htaccessを使用します。

作成した404エラーページのファイルを「404.html」とした場合のhtaccessの設定方法です。 まず、作成した404.htmlファイルをドメイン直下のルートディレクトリに置きます。

次に同じ階層に設置しているhtaccess内に以下の記述を記載します。 ErrorDocument 404 /404.html この記述により、404を返す場合は404.htmlの内容をページとして表示する設定が完了します。

htaccessには、上記の様に相対パスで指定するようにしましょう。万が一絶対パスで指定した場合、通常ページと同様に200のステータスコードが返り、ページが存在する状態で扱われる可能性があります。


WordPressの場合

オリジナルの404エラーページをWordPressで設定したい場合は、404.phpというファイルを作成することで、自動的に404.phpの内容が読み込まれるようになります。

404.phpはテーマフォルダの直下に設置してください。

テーマによっては既に404.phpが存在していることがあるので、事前に確認してから作成しましょう。またWordPressでは404エラーページにアクセスしたユーザーを、存在するページへリダイレクトするプラグインがあります。

404エラーページにアクセスして欲しくない場合は、リダイレクトのプラグインを使用するのも良いでしょう。

リダイレクトのプラグイン: Redirect 404 Error Page to Homepage or Custom Page with Logs .


まとめ:404エラーページをカスタマイズして、魅力的なサイトにしよう!

404エラーページがサイトにとって重要な役割を担っていることは、お分かりいただけましたでしょうか?基本的な構造は同じですが、サイトごとにさまざまな特徴があり、それぞれに個性を感じます。一番の目的はユーザーをサイトから離脱させないことですが、それ以上にサイトの魅力を伝えるのに利用できるページです。

今まであまり意識していなかった方も、これを機にこだわりの404ページを作成してみてはいかがでしょうか。