行き止まりで離脱しないために！UX上効果の高い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を維持することができるからです。

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