行き止まりで離脱しないために！UX上効果の高い404ページを作るために確実に押さえておきたいポイント

2018年01月31日

CMS・Webサイト制作

ホームページを回遊しているときにリンク切れがあったり、存在していないページにアクセスしたりすると、「お探しのページは見つかりませんでした」という丁寧な文が表示されたり、「404 Not Found」と書かれたページに出会ったりします。

こうしたページは「404ページ」と呼ばれ、ページが見つからない場合に表示されます。
主に、削除されたページにアクセスしてしまったときや、間違ったURLを入力してしまったときに表示されるものです。

しかし、多くの場合、404ページは「お探しのページは見つかりませんでした」という文言だけを表示し、行き止まりになってしまうケースもあります。
もちろんその場合、行き止まりにならないようにする必要がありますが、単にトップページへのリンクを貼ればいいのかといえば、必ずしもそうではありません。
何度もトップページに戻されてしまうのは、UX上効果が悪いとされているからです。

今回は、UX上効果の高い404ページを作るために確実に押さえておきたいポイントをご紹介します。
ユーザーが404ページに出くわしても、離脱するどころか売上アップにつなげる第一歩になれば、404ページの本来の存在意義以上の価値を付与できます。
果たして、どのような404ページを作ればUX上効果が高くなるのでしょうか。

そもそも404ページとは何か？

404ページとは削除されたページにアクセスしてしまったときや間違ったURLを入力してしまったときに表示されるページですが、この「404」のような数字をHTTPステータスコードと呼びます。

通常、ユーザー側で「Webサイトを見たい」とサーバー側にリクエストをすると、サーバーからは結果を3桁の数字で表したHTTPステータスコードを返します。
404とは、このうちページが見つからなかった場合に表示されるエラーのことです。

そのほか、上記のようにさまざまなエラーが存在します。

404ページは通常、「ページが見つからない」というエラーメッセージしか伝えていないシンプルな画面であることが多いため、ユーザーは本来見たかったページに辿りつけないまま、諦めて離脱してしまう可能性が極めて高くなります。

しかし、404ページは自分で作成することもできます。
404ページが表示された場合に、「ページが見つからない」というメッセージを伝えるのはもちろん、次の行動を取るためのトリガーとなる要素を入れておくことで、ホームページからの離脱を防ぐことができます。

まずは一例から

それでは、具体的にはどのような404ページであればUXの妨げにならないのでしょうか。

その一例として2017年4月に話題となったのが、全日空(ANA)の404ページです。

通常であれば「お探しのページは見つかりません」という文字が表示されるだけですが、次のような文章とともに404ページの逆手を取ったメッセージを発信しています。

どこまでも広がる青い空。
この広い空の中から探し物を見つけるのは難しいですね。

そんな時には
何もかも忘れて空の旅に出かけませんか？
きっと新しい発見があなたを待っているはずです。

このリンクの下には、「国内線の旅に出る」「国際線の旅に出る」と航空券の検索ページに誘導するリンクや、改めてサイト内検索を行うことができる検索窓が設置されています。

404ページの設置方法

通常のWebサイトの場合

通常は、404ページを表示するのは、サーバーの設定によって行います。
こうしたサーバーの設定を簡単に行う方法が、「.htaccess」を使った方法です。
これは「.htaccess」というテキストファイルを作成し、「404が返された時にこのページを表示させる」というコードを記述していく方法です。

例えば、ルートディレクトリに「404.html」を設置した場合、「.htaccess」には次のように記述します。

ErrorDocument 404 /404.html

重要なのは、表示するページへのパスはルートパス・相対パスで記述することです。
絶対パスで表示を行ってしまうと、ドメインへのリダイレクトを挟んでしまうので、HTTPステータスが404であることが認識されず、Googleなどの検索エンジンのクローラーが404ページをインデックスしてしまう場合があるからです。