503は休憩中、403は警備中。404以外のエラーとデザインをご紹介します！

みなさんこんにちは！

「ページが見つかりません」という404ページは有名ですが、実はWebの世界にはそれ以外にもたくさんの裏方エラーが存在します。
503は休憩中、403は警備中、500はちょっと体調不良中…？

一見ただのトラブルに見えるエラー画面も、デザイン次第でユーザーに安心感を与えたり、ブランドらしさを伝えたりできる大切な接点なんです。
今回は、そんな「404以外のエラーページ」にスポットを当ててお話ししたいと思います！

まずは知っておきたい！主なエラーコードまとめ

Webサイトを見ていると、たまに出てくる「エラー画面」。
じつはこの数字にはそれぞれちゃんと意味があって、サイトとサーバーが「今どういう状態か」や、誰が困っているのか（ユーザー？サーバー？）をお知らせしてくれているんです。

まずは、よく出会う代表的なエラーをまとめてみました。

ステータスコード	エラー原因	エラー内容
401	Unauthorized（認証エラー）	ログインが必要なページに、未ログインのままアクセスしたときに出るエラー。「あなた、誰？」と聞かれている状態です。
403	Forbidden（アクセス禁止）	ページ自体は存在するけれど、あなたには入る権限がない状態。社内専用・会員限定などでよく見かけます。
404	Not Found（ページが見つからない）	リンク先のページが削除された、またはURLを間違えたときに出ます。もっとも有名な“迷子エラー”。
500	Internal Server Error（サーバー内部エラー）	サーバーの中でプログラムがうまく動かず、エラーを起こしている状態。ユーザーのせいではありません。
502	Bad Gateway（通信不良）	サーバー同士の通信がうまくいかないときに発生します。一時的なトラブルのことが多いです。
503	Service Unavailable（サービス停止中）	サイトがメンテナンス中、またはアクセス集中で一時停止している状態。“ちゃんと直してる最中です”のサイン。

エラー・メンテナンス画面の実例をご紹介！

早速実際の画面を色々と見ていただきたいところ……なのですが！

サーバー側のエラーやメンテナンス中の画面は表示されるタイミングが限られているので、ユーザー側がいつでも好きな時に見られるわけではありません。

なので今回は、収集した情報を新旧交えてご紹介します！

感情にひたすら寄り添うエラーページのデザイン（OBREMO/株式会社エイチームコマーステック）

https://cocoda.design/nemuneru/p/p34660e08a98e

株式会社エイチームコマーステックのペットフードブランド、「OBREMO」で使用されていたエラー画面のデザインについて紹介しているページです。

ペットフードを取り扱っているので、問題が発生していてアクセスできない状態を、おデブなわんちゃんで表現しているのがユニークで可愛い！デザインへの考え方も参考になります。

GitHub

https://github.co.jp/

こちらはGitHubのサーバーエラー発生時の画面。

「少しトラブルが起きたみたいです。こちらで状況は把握していますが、もし直らない場合はご連絡くださいね。とりあえず再読み込みしてみてください。」というようなことが書いてあるようです！

Twitter

https://x.com/?lang=ja

現Ｘのtwitterより、通称「失敗クジラ」。こちらは表示される頻度が高いと一時期話題にもなったので、見かけたことがある方も多いのでは？

エラー画面はだいぶ前に変わってしまっているので現在は見られないようです。

Apple Storeオンライン

https://www.apple.com/jp/store

こちらはApple Storeのメンテナンス画面！

新作発表やアップデートの際に表示される画面ですが、毎回デザインが違っていて凝ってますよね。

最後に

見たいページが表示されないのはストレスに感じることもあると思います。
ですが、限られたタイミングでしか出会えない“裏側のデザイン”を見つけたら、ぜひ少し立ち止まって楽しんでみてください！