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

ホームページを回遊しているときにリンク切れがあったり、存在していないページにアクセスしたりすると、「お探しのページは見つかりませんでした」という丁寧な文が表示されたり、「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ページをインデックスしてしまう場合があるからです。

WordPressサイトの場合

WordPressでは、設定がそのままになっている場合、HTTPステータスコードに404が返されるとトップページが表示されるような仕組みになっています。
ただし、テーマフォルダ直下に「404.php」を設置することで、404が返されるとそのページを優先的に表示していきます。

WordPressのほかにも、CSMをご利用の場合は独自のルールで404ページが表示される場合があるので、必ずドキュメントやヘルプページを確認するようにしましょう。

UX上効果の高い404ページを作るためのポイント

1. 統一感のあるページにする

404ページはめったに表示されないかもしれませんが、ユーザーから見ればWebサイト内にあるページの一部です。
サイト内にあるほかのデザインと合わせることで、突然エラーメッセージが出ても混乱するのを避けることができます。

デザインのテイストが変わってしまうと、ただでさえ期待していたページが表示されないストレスを感じさせてしまうのに、さらに居心地が悪くなってしまうからです。

2. 誘導先を提案する

404ページで「ページが見つからない」とだけ伝えるだけでは、ユーザーはブラウザの「戻る」ボタンを押すしかやることがなくなってしまいます。
しかしこれでは、ユーザーはほかのリンクを探してしまったりあわてふためいてしまったときにユーザーの時間を奪うことになり、UXを低下させる原因になってしまいます。

代替案として、ホームページでよく使う主要なリンクを誘導先として表示しておきましょう。
もちろんトップページに帰るリンクも必要ですが、そのほかによく利用するであろうページも表示しておいた方が、利便性が高くなります。

3. ちょっとしたユーモアを入れる

先ほどご紹介した全日空(ANA)のページのように、思わず「くすっ」と笑ってしまうようなユーモアを入れてもいいでしょう。
というのも、そもそも「ページが見つからない」こと自体にネガティブなイメージがあるので、その悪いイメージを緩和する要素があれば、よいUXを維持することができるからです。

遊び心のあふれるアニメーションを表示したり、ストーリー性のある物語を取り入れてもよいでしょう。

まとめ

ユーザーにはできる限り404ページが表示されないような設計をすることが最も望ましいことです。
しかし、そうはいってもページの移動や削除などは起こりうるので、404ページに辿りついたときにユーザーをどのように出迎えるのかは、考えておく必要があるでしょう。

404ページに出くわした時に、離脱するどころか、ファンになってしまうようなワクワクするページを作れば、404ページとの出会いをきっかけにますますホームページを訪問してくれる可能性も高まります。
UX上効果の高い404ページをぜひ作ってみてください。