404エラーページ(Not Found)は、ページやコンテンツが存在しない場合に表示するページ。

そんな一見重要じゃなさそうなページにも気を配っているホームページはたくさんあります。どうでもいいぺーじだから遊べる、遊ぶ価値があるとも言えます。そんな遊び心あるオシャレな404ページデザインをご紹介します。

国内の404エラーページデザインまとめ

オシャレ、おもしろい、秀逸といった404エラーページを紹介しています。サイト掲載のご要望がありましたら、Xやコメントでお知らせください!

任天堂

Nintendo
マリオが緑の甲羅に追われるアクションを採用。ぶつかりそうでぶつかりません。

任天堂

ZOZOTOWN

ZOZOTOWN
「NOT FOUND」を実際に販売されている商品写真で表現。この隠し味、おもしろい。

ZOZOTOWN

zendesk

zendesk
円グラフで404ページの偶然性をアピール。遊び心ある404ページです。

おめでとうございます! この404ページを見つけることのできた、選ばれた人々に仲間入りしました。

zendesk

LIG

LIG.inc
ホームページ制作会社のLIGさん。写真がワッと動いて「404」の形になるアクションが使われています。

LIG

Kintone

Kintone
ノーコード業務アプリの「Kintone」。迷い込むユーザーのために懐中電灯で「404」を照らす演出。

Kintone

株式会社サクラクレパス

株式会社サクラクレパス
かわいいデザイン。サクラクレパスの歴史も同時に感じさせてくれます。

株式会社サクラクレパス

mizkan

mizkan
ミツカンの404ページ。コンテンツをよく整理して表示したい時に参考になるデザイン。

mizkan

海外の404エラーページデザインまとめ

海外のクリエイティブな404ページをご紹介します。海外のはギミックが凝っていて、レベルが高いです。

kualo

kualo
サーバー・ホスティングの会社ホームページ。インベーダーゲームでゲームオーバーになるまで遊べます。これすごいですね。

kualo

Dribbble

Dribbble
世界中のデザイナーが作品を展示するサイト「Dribbble」。カラーコードで「404」の色が変わります。

Dribbble

MAD

MAD
トグルスイッチで「404」を表現。オンオフできるインタラクティブな仕様で、トグルスイッチで自分で文字を作ったりもできます。ベルリンのデザイン会社のサイト。

MAD

Netflix

Netflix
映画、ドラマの配信会社だけあって、印象の強い写真を持ってきています。

Netflix

Inzone Design

Inzone Design
404ページを割れたガラスで表現。バルセロナを拠点に活動するWebデザイン会社のサイト。

Inzone Design

404エラーページのアイデア

一般的な404ページとして使う。

404ページの役割は、道に迷ったユーザーへの道案内です。だから、404ページには次のコンテンツを表示させるのが一般的。

  • メッセージ
  • 検索フォーム
  • トップページへの導線

他には宣伝広告を入れたり、「5秒後にページが移動します。」といった文言とともに自動リダイレクトをかける方法もあります。

404だから無駄に遊べる。

誰も404ページに誘導しようとするサイト運営者はいません。ユーザーもお目当てのコンテンツを探しています。ですから、ユーザー、運営者の双方にとって404ページは「どうでもいいページ」でしょう。

そうした意味のないぺーじだからこそ、無駄に遊びを入れられる。表現の自由度が幅広い。

商品やコンテンツは真面目に作っているけど、一つだけおもいっきり崩して遊んでいる。そういう無駄なことができるのは、404ページだけかもしれません。404ページでインベーダーゲームが遊べるなんていうのは、無駄の最たるものですが、無駄にこそ作り手のスタイルが現れるものだとも思います。

無駄なものこそ、本質が現れるものですから。

インタラクティブな動きを加える。

ユーザーが見るだけでなく、操作もできるという双方向的な仕様は、ユーザーの滞在時間を伸ばすだけでなく、記憶に残ります。

先ほどのインベーダーゲームトグルスイッチのようなインタラクティブなインターフェースは404だからこそできる技かもしれません。

TCDの404エラーページデザイン

TCDテーマの404ページは背景、コピー(文言)をご自身でカスタマイズして作成することができます。インタラクティブな表現まではできませんが、あなたの商品や会社の世界観の表現はできます。ぜひ素敵な404ページを作ってください。

ISSUE

GAIA 404

TENJIKU 404

TCDテーマを見る

404エラー関連の記事一覧

第1回:404エラーとは
第2回:404エラーの原因と対策
第3回:404ページを作る方法
第4回:リダイレクト設定
第5回:おしゃれな404エラーデザインまとめ(当記事)