404エラーページ（Not Found）は、ページやコンテンツが存在しない場合に表示するページ。
そんな一見重要じゃなさそうなページにも気を配っているホームページはたくさんあります。どうでもいいぺーじだから遊べる、遊ぶ価値があるとも言えます。そんな遊び心あるオシャレな404ページデザインをご紹介します。
目次
国内の404エラーページデザインまとめ
オシャレ、おもしろい、秀逸といった404エラーページを紹介しています。サイト掲載のご要望がありましたら、Xやコメントでお知らせください！
任天堂
マリオが緑の甲羅に追われるアクションを採用。ぶつかりそうでぶつかりません。
ZOZOTOWN
「NOT FOUND」を実際に販売されている商品写真で表現。この隠し味、おもしろい。
zendesk
円グラフで404ページの偶然性をアピール。遊び心ある404ページです。
LIG
ホームページ制作会社のLIGさん。写真がワッと動いて「404」の形になるアクションが使われています。
Kintone
ノーコード業務アプリの「Kintone」。迷い込むユーザーのために懐中電灯で「404」を照らす演出。
株式会社サクラクレパス
かわいいデザイン。サクラクレパスの歴史も同時に感じさせてくれます。
mizkan
ミツカンの404ページ。コンテンツをよく整理して表示したい時に参考になるデザイン。
海外の404エラーページデザインまとめ
海外のクリエイティブな404ページをご紹介します。海外のはギミックが凝っていて、レベルが高いです。
kualo
サーバー・ホスティングの会社ホームページ。インベーダーゲームでゲームオーバーになるまで遊べます。これすごいですね。
Dribbble
世界中のデザイナーが作品を展示するサイト「Dribbble」。カラーコードで「404」の色が変わります。
MAD
トグルスイッチで「404」を表現。オンオフできるインタラクティブな仕様で、トグルスイッチで自分で文字を作ったりもできます。ベルリンのデザイン会社のサイト。
Netflix
映画、ドラマの配信会社だけあって、印象の強い写真を持ってきています。
Inzone Design
404ページを割れたガラスで表現。バルセロナを拠点に活動するWebデザイン会社のサイト。
404エラーページのアイデア
一般的な404ページとして使う。
404ページの役割は、道に迷ったユーザーへの道案内です。だから、404ページには次のコンテンツを表示させるのが一般的。
- メッセージ
- 検索フォーム
- トップページへの導線
他には宣伝広告を入れたり、「5秒後にページが移動します。」といった文言とともに自動リダイレクトをかける方法もあります。
404だから無駄に遊べる。
誰も404ページに誘導しようとするサイト運営者はいません。ユーザーもお目当てのコンテンツを探しています。ですから、ユーザー、運営者の双方にとって404ページは「どうでもいいページ」でしょう。
そうした意味のないぺーじだからこそ、無駄に遊びを入れられる。表現の自由度が幅広い。
商品やコンテンツは真面目に作っているけど、一つだけおもいっきり崩して遊んでいる。そういう無駄なことができるのは、404ページだけかもしれません。404ページでインベーダーゲームが遊べるなんていうのは、無駄の最たるものですが、無駄にこそ作り手のスタイルが現れるものだとも思います。
無駄なものこそ、本質が現れるものですから。
インタラクティブな動きを加える。
ユーザーが見るだけでなく、操作もできるという双方向的な仕様は、ユーザーの滞在時間を伸ばすだけでなく、記憶に残ります。
先ほどのインベーダーゲームやトグルスイッチのようなインタラクティブなインターフェースは404だからこそできる技かもしれません。
TCDの404エラーページデザイン
TCDテーマの404ページは背景、コピー（文言）をご自身でカスタマイズして作成することができます。インタラクティブな表現まではできませんが、あなたの商品や会社の世界観の表現はできます。ぜひ素敵な404ページを作ってください。
第1回：404エラーとは
第2回：404エラーの原因と対策
第3回：404ページを作る方法
第4回：リダイレクト設定
第5回：おしゃれな404エラーデザインまとめ（当記事）
コメント