Daily UI #008 404 page

猫派？犬派？と聞かれて「どっちも」と答える、強欲女子ことしゃーしゃです。
今日もDailyUI挑戦していきます！

#008 404 page
404エラー（ページが見つからない）が発生した際に表示されるページのことです。

404ページもUXデザインの一部…？

いつものようにさまざまなサイトの404ページを探してみました。

404ページへのリダイレクトをせずにエラーメッセージが記載されるページもあったが、面白コンテンツがあったり別の方法で情報にたどり着ける導線を引いてあげたりと工夫をしているサイトもあった。（画像はその一例）
サイトを利用しているユーザーの目的達成のためのUIがあることで404ページをただのエラーページで終わらせるのではなく体験の一部として昇華できるようになるんだということを感じた。これがUXデザイン…！

あとあと、IT系に強いユーザー以外は404エラーと言われても「なんのこっちゃ」だと思うので「404 NOT FOUND（どん！！！）」は別に強調しなくても良いのかなとも思った。

404ページに多かったUI

メッセージ：エラーが発生したことをユーザーに伝えるためのUI
・ページが見つかりませんでした。のメッセージ
・ページが見つからない原因（掲載が終了した・アドレスが間違っているかも etc.）

導線：サイトを利用する目的達成のためのUI
・サイト内検索
・トップページへ戻る
・カテゴリ検索
・サイトマップ

コンテンツ：目的を達成できない不満な気持ちをやわらげるためのUI
・イラスト
・ゲーム

作ってみた

今回は年賀状のECサイトを想定して作成しました。
年賀状作成はPC作業も多くなると思うのでPC・スマホ両方の画面を作成。

気に入った年賀状のデザインを探すことがサイトに訪れるユーザーの目的であると考えられるため、サイト内検索やカテゴリごとの検索導線をおきました。
猫は年賀状モチーフによく用いられる十二支ではない動物であることから「ページがない」を連想させるのと、「ページがなくてごめんね」の意をあらわすために、猫のごめん寝イラストを用いました。（イラストはサンプルです）

イラストは行動を邪魔しないような配置を意識しています。

参考にしたサイト

個人的に好きな404エラーページ9選
https://www.plusdesign.co.jp/blog/?p=6436

個性的な404デザインまとめ！日本国内・海外のエラーページ48選。
http://www.billionplan.com/blog/design/404-error-pagedesign48.html

あとZOZOTOWNの404ページが商品のサムネイルで「NOT FOUND」を表現していて可愛かった…！
http://zozo.jp/404.html

我が家の年賀状は毎年ペットの犬の写真を使ったものなのですが、とうとう干支を一周してしまいました。そろそろ準備しなきゃなあ。。