サイト開発時、ユーザーへエラーページを表示する必要を迫られます。エラー内容をHTTPレスポンスごとに振り分けると、見慣れたものは下記の3つでしょう。
- 403 Forbidden：認証されていないなどの理由でクライアントにコンテンツのアクセス権がない場合
- 404 Not Found：リクエストされたリソースが見つからない場合
- 500 Internal Server Error：サーバー側で処理実行時に何らかの不具合が生じた場合
この記事では、上記の中でも「リクエストされたリソースが見つからない場合（404 Not Found）」のエラーページに記載すべきコンテンツを考察します。
ApacheとWordPressのエラーページの比較
はじめにWebサーバーのApacheのデフォルトでレスポンスされるエラーページとWordPressの404エラーページを比較します。
Apacheのデフォルト404エラーページ
Apacheを利用しているときのデフォルト404 Not Foundエラーページ（以下、エラーページ）は以下のようなものです。
エラー内容自体はこれでも理解しやすいでしょう。しかしながら、ユーザーは何かを見たくてそのURLにアクセスしているのにも関わらず、このページ上で完結する次に取るべきアクションが明確にされていません。
このままでは、「見つからないならいいや…」とユーザーのサイト離脱を招いてしまいます。
WordPressの404エラーページ
有名なCMS（コンテンツマネジメントシステム）の1つであるWordPressでは、ページが見つからない場合に下の画像のようなエラーページをレスポンスします。
（WordPress・テーマTwenty Twenty-Oneのデフォルト404 Not Foundページ）
Apacheのエラーページと大きく異なるのは、サイト内検索フォームが用意されている点です。
検索フォームをエラーページに設けることで、ユーザーをサイト内検索というアクションへ導けます。結果的に、ユーザーを本来見たかったページあるいは類似するページへ誘導できるかもしれません。
WordPressのエラーページから分かるとおり、エラーページに載せるべきは次に行うべきアクションへつながるコンテンツです。
404エラーページに載せるべきコンテンツを考える
ここで、「次に取るべきアクションへつながるコンテンツ」とは何かを検討します。
ユーザーの求めるものは、アクセスしたURLからある程度予測できることが多いです。
例えば、https://example.com/shop/bookaというアクセスに来た場合は、bookをbookaとタイプミスをしたと予測できます。おそらくユーザーはbook（本）を見に来たのでしょう。
また、ユーザーがhttps://example.com/shop/book?id=XXXXXXへアクセスし、idがXXXXXXの本（アイテム）がない場合には404エラーページを返すこととなりますが、この場合にも「ユーザーは何らかの本を見ようとした」ということが推測できます。
リクエストされたURLにタイプミスがあると推測される場合
https://example.com/shop/bookaにアクセスがあった場合は、404エラーページは下記のようにすると親切でしょう。
Google検索で見たことある人が多いと思います。「もしかして…これ？」と似たURLを代替案として提示することで、ユーザーを1クリックで見たかったページへ導けるかもしれません。
技術的に少し難しかったりはしますが…。
リクエストされたURLに該当するアイテムが見つからない場合
次にhttps://example.com/shop/book?id=XXXXXXの場合です。idがXXXXXXの本が存在しない時はエラーページを返す必要があります。対象の本が見つからない場合でも、ユーザーはおそらく本を探しにこのURLにアクセスしています。
よって、上記のような場合は下の画像のようなエラーページをレスポンスすると良いでしょう。
ポイントはアイテム（本）に関する代替案を提案している点です。「見つかりませんでした」というメッセージに加えて代替案を提案することで、ユーザーが別のアクションを行いやすくします。これによりユーザーは別の良い本に巡り合えるかもしれませんし、サイト提供側は他の本を売れるかもしれません。
単にエラーページ1つをとっても、UIを工夫することでユーザー・サイト提供側双方に利益を生み出せるものです。
適切な404エラーページをレスポンスするために
この記事では、404エラーページに焦点を当てました。URLからユーザーの求めるものを推測し、代替案の提案をポイントとしましたが、これを実現するためにはあらかじめサイトのURLを設計しておく必要があります。
ユーザー投稿型ブログサイトの構築を例に、URL設計したものを簡単にご紹介します（ドメインは省略）。
- ユーザー一覧ページ：
/users - ユーザープロフィール詳細ページ：
/users/:userid - ユーザーのブログ一覧ページ：
/users/:userid/blogs - ユーザーのブログ詳細ページ：
/users/:userid/blogs/:blogid
上記のようにサイト構築時にURLを設計することで、404エラーページに記載すべきコンテンツをレスポンスしやすくしましょう。構造的なURLは、エラーページのレスポンスのためだけでなく、ユーザーがURLからページ内容を推測しやすくなります。
もっと深堀りすれば、HTTPリクエストメソッドをURL設計に含めておくことも重要です。ユーザーが情報を閲覧するときはGET、新しく情報を登録するときはPOST、既存の情報を更新するときはPUTまたはPATCH、既存の情報を削除するときはDELETEなど、同じURLでもメソッドによって何をしたかったのかを判別できるようにするのが良いでしょう。
最後に
意外と楽観的に見られがちなエラーページですが、このレベルまで入念に設計すればユーザーへ最高の体験を提供できると思います。
この記事で紹介した例では、サイトのコンテンツの種類が増えるほど実現までの時間も労力も大きくなります。しかしこのレベルまで詳細にデザインすれば、ユーザーへ最高の体験を提供できると思います。「UXを向上には時間もコストもいとわない！」、そんな開発者が増えるとユーザーはきっと喜ぶのではないでしょうか。
この記事の 最終更新：2020.12.17