カスタム404ページとは？必要な理由と役割について
普段インターネットを利用されるみなさんは、「Not Found」というエラーが表示されて、そのサイト閲覧を諦め離脱した経験があるのではないでしょうか？これは、URLが間違っている際に表示されるエラーページで、404エラーと呼ばれます。
今回は、404エラーになってしまった際に有効的な、カスタム404ページについてご紹介します。そもそも404エラーとはなにかという話から、カスタム404ページ作成のポイント・作成事例まで網羅的に紹介していきますので、ぜひ最後まで読んでいってください。
目次
404エラーとは
404エラーとは、ユーザーがリクエストしたURLが誤っていて存在しなかった場合に表示されるエラーページです。「404」はHTTPステータスコードと呼ばれるもので、この3桁の数字によって、エラーの種類を判別することができます。301リダイレクトの「301」もHTTPステータスコードの一種です。
他にもよく見かけるHTTPステータスコードを2つご紹介します。
1つ目は「403 Forbidden」。これは閲覧禁止を意味します。特定のユーザーにアクセス権限を付与しているサイトにアクセスした際に表示されるもので、URLが間違っているというわけではありません。
2つ目は「500 Internal Server Error」です。これはサーバー内部のエラーを表すコードで、アクセスが一時的に集中している場合など、サーバーに負荷がかかっている時にアクセスできなくなる状態を意味します。
404エラーが表示される原因
404エラーが表示される主な原因は2つあります。サイト運営者側の問題とユーザー側の問題がありますのでそれぞれ解説していきます。
リンク切れ
ページ内リンクをクリックしたものの、リンク切れによって404エラーが表示されることがあります。特に古いブログやアフィリエイトサイトでよく起こる現象です。リンク切れは、該当ページが削除された、またはURLが変更された等の理由でアクセスができない状態を言います。
これらの削除されたリンクはデッドリンクとも呼ばれています。
URLの入力間違え
ユーザーが手動で間違ったURLを入力した場合、404エラーページが表示されます。ユーザーは404エラーページが表示されたら、URLが間違っていないか確認してみると良いでしょう。
しかし、ネットリテラシーが低いユーザーは404ページを怪しい英語のサイトと勘違いしてしまうこともあります。そんな時に有効的なのがカスタム404ページというものです。
カスタム404ページとは
カスタム404ページとは、通常「404 Not Found」と表示される404エラーページに、自サイトのトップページリンクや、カテゴリページへのリンク等を設置してカスタムしたページです。ユーザーの利便性が上がるため、大手メディアサイトでは基本的に実装されています。
気になるサイトがあればトップページURLの後に「/aaa」など適当な文字を入力して、わざとエラーページを表示させて確認してみると良いでしょう。
カスタム404ページが必要な理由
カスタム404ページが推奨されている理由は以下の3つです。
ユーザーの離脱率を抑えるため
カスタム404ページを導入することで、ユーザーの離脱率を抑えることができます。
通常の404エラーページはテキストのみ表示され、自サイトのリンク等は表示されません。カスタム404ページは、トップページへのリンクや人気記事のリンク、お問い合わせフォーム等を自由に表示させることができます。
リンクがあることで、エラーページに到達したユーザーは求めていたページにたどり着きやすくなります。
通常の404エラーページを見てブラウザバックされてしまうのに比べると、長期的に見るとアクセス数に大きな差がでるはずです。
ユーザーに不安感を与えないため
カスタム404ページはデザインも自由に設定できますので、質素な通常のエラーページと比べると、ユーザーに不安感を与えません。サイトと同じデザイン性で安心感を与えることで、他のページを閲覧してもらえる確率が高くなります。
エラーページをエラーページに見せないようにカスタムすることで、ユーザーに不安感を与えないというメリットがあります。
回遊率を高めSEOを強化するため
カスタム404ページを設定するべき理由として、ユーザーの回遊率を高めるという点があります。
カスタム404ページにサイト内リンクを設置することで、ユーザーがサイト内を回りやすくなるだけでなく、検索エンジンのクローラーも巡回しやすくなります。
こユーザーとクローラーがサイト内を回りやすくするために、カスタム404ページを作成しましょう。
カスタム404ページ作成のポイント
実際にカスタム404ページを作る時抑えておきたいポイントを3つご紹介します。
ネガティブな印象を与えがちなエラーページを、ポジティブな印象に変える役割を持つカスタム404ページですので、ポイントをしっかりおさえておきましょう。
デザイン性を統一する
デザイン性を統一するのはカスタム404ページ作成の上で重要です。
カスタム404ページの視覚的なデザインをサイトデザインと統一させることで、ユーザーは馴染みやすくなります。具体的にはヘッダー・フッダー・サイドバー等の構造をサイトデザインと同じに設定すると良いでしょう。
誘導先をいくつか用意する
404エラーページに到達したユーザーは、少なくともサイトに興味があります。そんなユーザーをエラーページで行き詰まれせ離脱させてしまうのは非常にもったいないですよね。
そのため、カスタム404ページには誘導先（サイト内リンク）を用意しましょう。一般的なリンク先としてはトップページボタンがあります。
サイトの目的に合った要素を含める
カスタム404ページは、サイトの目的に合った設計をしましょう。
例えば、何百何千もの記事を持つ情報サイトの場合、トップページボタンだけを表示するのは最適とは言えません。カテゴリや人気ページへのリンクを含めることで、ユーザーが求めている情報まで行きやすいようにするのが良いでしょう。
また、BtoBビジネスを行っている企業サイトやサービスサイトであれば、手動でURLを入力してHPからお問い合わせをしたいユーザーがエラーページにたどり着いてしまった可能性もあります。この場合、カスタム404ページにはお問い合わせフォームへのリンクを設置するのが良いでしょう。
このように、カスタム404ページはサイトの目的に合わせて設計をしましょう。
カスタム404ページの作成事例
ある程度の規模以上のWebサイトやコーポレートサイトでは、基本的にカスタム404ページが用意されています。マーケティング系のメディアサイトや、一般向けの情報サイトなどの作成事例をいくつかご紹介します。
バズ部
SEOやコンテンツマーケティングに従事する方で知らない方はいないほど有名なメディア「バズ部」。
バズ部のカスタム404ページは、上から順に検索ボックス・カテゴリ一覧リンク・無効なリンク報告のお願いとなっています。一定以上のネットリテラシーを持つ方がターゲットとなっているサイトのため、シンプルで最小限の要素で構成されている印象です。
バズ部のカスタム404ページ：ページが見つかりませんでした
LISKUL
LISKULは、東証一部上場のIT企業ソウルドアウト株式会社が運営するオウンドメディアです。
リスティング広告やコンテンツマーケティング、LPデザインなどWebマーケティングに関する幅広い情報を提供しているサイトです。LISKULのカスタム404ページは、バズ部とよく似ているのですが、1つ異なる点があります。それは、人気記事20選のリンクを掲載していることです。
オーガニック検索からの流入が多いサイトならではの、大量の記事を保有するオウンドメディアらしいカスタム404ページですね。
LISKULのカスタム404ページ：ページが見つかりませんでした
食べログ
食べログは、最も多くの人に利用されているグルメサイトです(※)。この記事を読んでいる方で飲食店選びのために普段から活用されている方も多いのではないでしょうか？
食べログのカスタム404ページは至ってシンプルな構造で、「お探しのページが見つかりません」というメッセージが強調されていて、あまり目立たない形でトップページへのリンクや、レストラン検索用に各都道府県のリンクと食品ジャンルのリンクが設置されています。
大衆向けサイトということで、ユーザーに手間をかけさせない工夫がされているように感じました。
※飲食店検索サービスの利用率1位は食べログ。ホットペッパーグルメ、ぐるなびが続く【テスティー調べ】 | Web担当者Forum
食べログのカスタム404ページ：お探しのページが見つかりません [食べログ]
YouTube
近年は動画の時代が来たとも言われていますが、その筆頭であるYouTubeのカスタム404ページは想像以上に簡素なものです。
「このページは利用できません。別の条件で検索してください。」というテキストと検索窓が設置されています。無駄な情報が全くない構造ですが、YouTubeはほとんどのユーザーが動画の閲覧を目的に訪問するサイトですので検索窓さえあれば十分とも捉えられます。
Youtubeのカスタム404ページ：404 Not Found
LIG
東京に本社を置くWeb制作会社「株式会社LIG」のオウンドメディアLIG。このサイトはユーモア溢れるオリジナルコンテンツが特徴的で、WEB制作関連のお仕事をしている人なら1度は目にしたことがあるメディアです。
そんなLIGのカスタム404ページは、サイトのイメージ通りユーモアだらけになっています！ページ上部にはこんなキャッチコピーが……。
「さまよえる黒き仔山羊よ、この地を見つけてしまったのですね……。探していたページは漆黒の闇へと飲み込まれてゆきました。あなたの求める＜力＞はここにはありません。さあ混沌と破壊の衝動に身を任せ進むのです。」
本来探していた情報のことなんか忘れて関心が寄ってしまいますね。もちろんトップページへのリンクやキーワード検索窓も設置されており、カスタム404に必要な機能も備わっています。そして下部にあるアニメーションをクリックすると、カオスな隠れサイトにアクセスできます。サイトのブランドイメージを損なわない形でユーザーを楽しませる素敵なアイディアだと思います！
LIGのカスタム404ページ：404 Not Found _ 東京上野のWeb制作会社LIG
Yahoo!ニュース
国内大手ニュースメディアのYahoo!ニュース。1日1回チェックするのが習慣になっているサラリーマンの方もいるでしょう。
ニュースサイトの特徴でもありますが、古いニュース記事が削除されているケースが頻繁にあります。Yahoo!ニュースのカスタム404ページは
「指定されたURLは存在しませんでした。URLが正しく入力されていないか、このページが削除された可能性があります。」
というテキストとキャラクターが頭を下げているイラストで構成されています。404エラーについて丁寧に説明されていて、Webに詳しくない方でも理解しやすいです。そのすぐ下にはYahoo!ニューストップへのリンクボタンがあるので離脱してしまうユーザーも少ないと考えられます。
Yahoo!ニュースのカスタム404ページ：Yahoo!ニュース
おわりに
リンク切れやURLの入力ミスによって発生する404エラーですが、カスタム404ページがユーザーにとって有用であることはご理解いただけたでしょうか？
せっかくサイトに関心を寄せてくれているユーザーを離脱させてしまうのは非常にもったいないです。カスタム404ページを作成することで、ユーザー離脱率を抑えられる、検索エンジンのクローラーがサイトを巡回しやすくなる等のメリットがあります。
設定しておいて損はないことなので、サイト運営者の方はぜひカスタム404ページを導入してみてください！