行き止まりで離脱しないために！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 のほかにも、 CS Mをご利用の場合は独自のルールで404ページが表示される場合があるので、必ずドキュメントやヘルプ ページ を確認するようにしましょう。

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

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

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

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

2. 誘導先を提案する

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

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

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

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

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

まとめ

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

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