![見出し画像](https://assets.st-note.com/production/uploads/images/120900327/rectangle_large_type_2_8a5bea16c5b0f7d7c1e534cdaaf2a672.png?width=1200)
Daily UI #008 404 Page Design
こんばんは。お疲れ様です。
今回のお題は404エラー時に表示されるページです。
普通に閲覧している分にはそこまで頻繁に出会うページではありませんが、
URLを直接入力したときや、既に終わったフェアのページなどにアクセスしようとすると出ちゃうことはありますね。
参考としていくつかの有名サイトの404ページにアクセスしてみました。
![](https://assets.st-note.com/img/1699190138403-k9YuwZlQRr.png?width=1200)
文字だけで「404」や「ページが見つかりません。」など表示しているサイトのほうが多いと思うのですが、上記画像のように404エラーページにも遊び心を忘れないようなデザインを用意しているサイトもあり、細部にまでこだわってるなぁと感じます。
では、作成したデザインがこちらです。
![](https://assets.st-note.com/img/1699190289362-Vwo5MjP322.png?width=1200)
「MODERN PIZZA」という架空のデリバリーピザのWebサイトの404エラーページを作成しました。
意識したところは、下記の3点です。
現在の状態がわかるようにする
次のアクションを示す
文字だけにしない
最初の2点について、
「404」と言われてもそれがどういう意味なのか分かる人は一部の人だけだと思うので、文章で今の状態を説明する&次の操作を提案することが親切だと思っています。小学生のころ初めて404に出会いましたが、当時はナニコレ???なんかよくわからないけどダメだったぽいな、ってくらいでした(笑)
3つ目の点については、イラストや企業のキャラクターなどがあると、ページがない…😢という気持ちだけで終わらず、ちょっとレアなページが見られてラッキー😎というような気持ちになってくれることもあるかもしれないですよね!隠しアイテムを見つけたような……
自分で作成した方は、もう少しユーモアがあるといいんだけどなぁと思いつつ、今回はこれが限界でした😭
今回のお題とは直接関係ないですが、今回初めてフッターを入れてみましたが、サイトのジャンルによってフッターに入れる内容なんかもいろいろ種類があったりして、まだまだ勉強することがたくさんあるなと感じました。
今日はこの辺で。次もがんばります!
この記事が気に入ったらサポートをしてみませんか?