本文へスキップ

エラー・システム状態

404・エラー・空・メンテナンス。行き止まりを案内に変える。

行き止まりを案内に変える、エラーとシステム状態のカテゴリ。404 ページ、再試行できるエラー状態、再開予定時刻を出すメンテナンス画面、下部の Cookie バナー、最初の一歩を促すエンプティステートの5種がある。原則はエラーの防止と回復。起きてしまった失敗は隠せないので、「何が起きたか」「次に何ができるか」を1画面で示し、戻る導線か再試行のボタンを必ず置く。空の一覧も同じで、空白のまま放置せず「新規作成」へ導く。正常系を作り終えたあと、異常系と初期状態を埋めるときに引く。

関わる原則: エラーの防止と回復5件

使い分けデータが無いなら empty-state、取得に失敗したなら error-state（再試行を置く）、URL が無いなら not-found-404、サービス停止は maintenance-page。cookie-banner は法的に必要なときだけ、いずれの操作でも消えるように。

まず見る3件

  • 静的

    エンプティステート解説あり

    Empty State

    まだ項目がない一覧のためのプレースホルダー。空の箱のイラストと案内文、最初の一歩を促す「新規作成」ボタンを中央に置く。押すと1件できて一覧に切り替わる。

    • 空の理由と次の一手を1画面で言う。「まだ項目がありません」だけでは読み込み待ちと区別できない
    • CTA は「新規作成」の1つに絞り、押した結果（1件目）をその場で見せる。空状態は次の画面への入口である
    • 検索0件とは文言を分ける。ここは「最初の1件」を促す場で、検索側は条件の見直しを促す
    • JS
    コードを見る →
  • クリック

    エラー状態解説あり

    Error State

    読み込み失敗をその場で伝えるエラーパネル。「再試行」を押すと一瞬スピナーが回り、成功状態へ切り替わる。

    • 失敗した領域だけをこのパネルに差し替える。画面全体を置き換えると、どこが失敗したか分からない
    • 再試行中はボタンを disabled にして文言を「再試行中…」に変える。スピナーだけだと押せるのか分からない
    • 成功は背景を緑に、アイコンをチェックに差し替える。文言だけの変化は見落とされる
    • JS
    コードを見る →
  • 静的

    404ページ解説あり

    404 Page

    ページが見つからないときの案内。大きな「404」とやさしい文言、ホームへ戻る導線を中央に据える。上空を漂うイラストがゆっくり浮遊する。

    • 「404」の数字は 52px で最初に目に入れ、その下に何が起きたかと次の一手を1つずつ置く。要素は3段だけ
    • 導線は button ではなく a 要素にする。遷移する操作はリンクで、右クリックや Ctrl+クリックが効く
    • 紙飛行機は translate 4px/−6px と ±2° の揺れを 3.6s で。動きは「壊れていない」印象のためで、大きく動かすと軽薄に見える
    • CSSのみ
    コードを見る →

使い分け表

パーツ操作技術向く場面状態
404ページ
404 Page
静的CSSのみ存在しない URL への到達・削除・移動済みページの案内default / hover / active
エラー状態
Error State
クリックJS通信失敗・API エラーの領域単位の差し替え・その場でやり直せる失敗default / hover / focus / active / disabled / loading / error / success
メンテナンス画面
Maintenance Page
静的CSSのみ計画停止中の全画面案内・再開予定時刻を明示した告知default
クッキーバナー
Cookie Banner
クリックJS同意取得が必要なサイトの初回訪問・分析・広告タグを読む前の確認default / hover / focus / active / disabled
エンプティステート
Empty State
静的JS1件も無い一覧・ダッシュボード・最初の一歩を促す新規作成導線default / hover / focus / active / empty

すべての見本（5件）

  • 静的

    404ページ解説あり

    404 Page

    ページが見つからないときの案内。大きな「404」とやさしい文言、ホームへ戻る導線を中央に据える。上空を漂うイラストがゆっくり浮遊する。

    • CSSのみ
    コードを見る →
  • クリック

    エラー状態解説あり

    Error State

    読み込み失敗をその場で伝えるエラーパネル。「再試行」を押すと一瞬スピナーが回り、成功状態へ切り替わる。

    • JS
    コードを見る →
  • 静的

    メンテナンス画面

    Maintenance Page

    サービス停止中を知らせるメンテナンス画面。歯車がゆっくり回るイラストと、再開予定時刻を中央にまとめて表示する。

    • CSSのみ
    コードを見る →
  • クリック

    クッキーバナー解説あり

    Cookie Banner

    画面下部に現れる Cookie 同意バー。「同意する」で受け入れ、「設定」で分析 Cookie の可否を選んで保存。いずれも下へスライドして消える。

    • JS
    コードを見る →
  • 静的

    エンプティステート解説あり

    Empty State

    まだ項目がない一覧のためのプレースホルダー。空の箱のイラストと案内文、最初の一歩を促す「新規作成」ボタンを中央に置く。押すと1件できて一覧に切り替わる。

    • JS
    コードを見る →