404ページとは？作るポイントからユニークな企業の事例まで紹介！

こんにちは。Webマーケターのサスケ(@KousukeSano)です。今回は「404ページ」について具体例を交えながら、お伝えいたします。

おそらく、あなたは404ページを見たことがあるかと思います。「404 Not Found」という文字だけが表示されているページです。あれを見た時、「チッ」と少しイライラしてページを戻った経験があるんじゃないでしょうか笑

そんなイライラしてしまう404ページなのですが、使い方次第では、ユーザーに目的のページへと誘導することが可能です。404ページを用意するのであれば、少しでもユーザー体験を高める質の高いページにできるようにしておくことが大切です。

404ページを上手く使っているユニークな企業の事例も確認しながら、404ページについての理解を深めていきましょう。

404ページとは？

404ページとは、該当するURLのページが存在しなかった場合に、サーバーから返されるエラーページのことです。

「このページは存在しませんよ」というメッセージページなのです。404とは、サーバーからエラーということを知らせるための番号です。

その他のコード番号について(ソフト404エラーとの違いを明記)

404以外にも、色々な番号があります。私たちが何か指定のページを見たいとクリックすると、Webサーバーに対してリクエストが送られ、「ページは問題なく表示された」「別URLへ移動します」などの結果が数字3桁で返ってくるのです。その3桁の数字のことをHTTPステータスコードと言います。

404以外の代表的なHTTPステータスコードを見てみましょう。

カスタム404ページとは？

404ページとは、ページが存在しないエラーページということが分かりました。Webサイトを運営していると、どうしても存在しないページが出てきてしまう場合があります。そんな時、ただ404ページとして「Not Found」を表示するのではなく、ユーザーに対して、目的のページに誘導してあげることが大切です。そんなユーザーに対して、目的のページが見つかるよう404ページをカスタムしたページのことをカスタム404ページと言います。

後ほど、企業のユニークな404ページをご紹介いたします。

どんな時に404ページが出るのか？

404ページは、ページが存在しない時のエラーページということは分かったのですが、実際どんな時に404ページが出てしまうのか、404ページの原因を見てみましょう。

URLのスペルが正しくない

URLのスペルが間違えてしまっている場合は、ページは存在しないということでエラーとなります。URLの場合は基本、全て正しくないと表示されないので、もし404ページが表示された場合は、スペルが正しいかどうか確認するようにしてください。

消去されたページを出そうとしている

ページがない状態でそのページのURLを出そうとすると、404ページが表示されます。もし消去されたページを出したい場合は、改めてページの設定をし直す必要があります。

正しいリダイレクト設定ができていない

ページの内容が同じだが複数のURLが生成されてしまった場合や、Googleからの低評価を防ぐためにリダイレクト設定を行うことがあります。ただそのリダイレクト設定が上手くできていない場合、404ページが表示されます。

リンク先がそもそもない場合

以前はリンク先があったが、なくなってしまった場合も404ページが表示されます。サイト運営をしていると、リンク先が変わることはしばしばあります。リンク先の見直しは定期的に行いましょう。

カスタム404ページを作る時のポイント

ユーザーが入力するURLのスペルミスなどで、どうしても404ページが表示されることがあります。もし404ページが表示されたとしても、ユーザーが元のページに移動できたり、目的のページへとスムーズに移動するためにも、404ページに表示しておいた方がよいポイントがあります。

ユーザーのストレスをなくすためにも、これからカスタム404ページに作る時のポイントをお伝え致します。

サイトのデザインの統一感を出す

404ページは、Webサイトのデザインと同じような表示にしておくことで、ユーザーの混乱を避けれます。

たとえエラーページだっとしても、いきなり真っ白で「Not Found」と表示するより、同じデザインのままで「お探しのページは見つかりませんでした」と表示することで、ユーザーはサイト内で存在しないページにきてしまったということを混乱せず理解することができます。

いきなり「Not Found」と表示されると、ユーザーによっては、変なページに来てしまったのではないかと取り乱してしまう可能性もあり、サイトへの不信感に繋がります。

次のアクションを促す

404ページでは、次のアクションを促す文章やリンクを掲載しておきましょう。

ユーザーが間違えて404ページに来てしまったとしても、Topページに戻れるようにしたり、また404ページ内で検索できるようにしたりなど、ユーザーの次の行動がしやすい設計が大切です。

カスタム404ページを表示させるには

ポイントを抑えた上で、404ページを作ることができたら、404ページを表示させる必要があります。404エラーが起きた場合に、作成した404ページが表示できるよう設定していきましょう。

.htaccessを使用する

基本的には、「.htaccess」を使って表示設定を行います。

作成した404ページを「404.html」とします。

①作成した「404.html」をドメイン直下のルートディレクトリに配置します。
②同じ階層に設置しているhtaccess内に「ErrorDocument 404/404.html」と相対パスで指定するよう記述します。

WordPressの場合

WordPressは、デフォルトでHTTPステータスコードが404の場合、トップページに移動するようになっております。もし作成した404ページに移動させたい場合は、テーマフォルダ直下に404.phpを設置することで、オリジナル404ページが表示できるようになります。

ユニークなカスタム404ページの例

カスタム404ページを作ろうとなったとき、具体的な例があると作りやすいですよね。そんな時に非常に参考になるのが、企業のカスタム404ページです。

色んなカスタム404ページがあるのですが、その中でも特にユニークだと感じたものを抜粋して紹介いたします。

ZOZOTOWN

「Not Found」を文字をZOZOTOWNで販売している商品で表している面白い404ページです。商品を販売しているサイトであれば、404ページにトップページ以外にも商品へのリンク先を載せておくのもよいでしょう。

出典：ZOZOTOWN 404ページ

amazon

amazonの404ページはシンプルですが、アマゾンの犬が出てくるユーモアさもあります。実はamazonの404ページはFrank君以外にも様々なペットがでてきます。次はどんなペットがでてくるのか楽しみになっちゃいますね。

出典：amazon 404ページ

NASA

”探している宇宙物体は地平線の彼方に消えていきました”

というNASAらしいメッセージ付きの404ページです。404ページを作るときは、"らしい"メッセージを考えて掲載してみましょう。

出典：NASA 404ページ

WWFジャパン

環境保全に取り組む公益財団法人であるWWFジャパンの404ページには、豆知識の情報が掲載されております。そのサイトに関連する情報を掲載することで、ページの回遊率を高めることができるかもしれません。

出典：WWFジャパン 404ページ

ヤマト運輸

ヤマト運輸の404ページは、クロネコを探すゲームとなっております。ユーザーを飽きさせず、楽しませようとする配慮が垣間見れます。またしっかりページの探し方も掲載して次のアクションも促しております。

出典：ヤマト運輸 404ページ

LEGO

LEGOは、驚いているLEGOで404ページを分かりやすく伝えております。シンプルですが、次のアクションもスムーズに行えます。

出典：LEGO 404ページ

404ページの作り方のまとめ

404ページの作り方はいかがでしたでしょうか？

ページがないということは、どんなWebサイトでも発生してしまいます。そんなときにそっけない404ページではなく、ユーザーの助けとなるような、またユーザーが「クスっ」と笑ってしまうような404ページがあることで、ユーザーの離脱を防ぐことができます。

まだ404ページを作っていない方は、ぜひ早めに作っておきましょう。