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

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

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

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

任天堂

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

任天堂

ZOZOTOWN

ZOZOTOWN
「NOT FOUND」を実際に販売されている商品写真で表現。

追記(2025年6月17日):
新バージョンの404ページになっていました。RPGの道具屋風の画面が表示されて、おすすめ「猫」キーワードの商品一覧に飛ばされます。
ZOZOTOWNの404ページデザイン

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だからこそできる技かもしれません。

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

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

ISSUE

GAIA 404

TENJIKU 404

ARTISAN

TCDテーマを見る

404エラー関連の記事一覧

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