status-colors-and-errors

ステータスカラーとエラー設計

カラーパレットは小さく保つ

システムにステータスカラーを追加するたびに、ユーザーの認知的負担が増えます。ユーザーはそれぞれの色の意味を学び、覚え、ストレス下でも正しく解釈しなければなりません。エラーが発生するのは、まさにそうした状況です。

ほとんどすべてをカバーできる最小限のセット：

色	意味	常に表すもの
赤	エラー／失敗／破壊的な操作	問題が発生した、またはこの操作は取り消せない
オレンジ／アンバー	警告	続行する前に注意が必要
緑	成功／肯定的な状態	操作が完了した、状態が正常である
青	情報／中立的なステータス	情報を示しており、対応は不要

ルール：各色は、製品全体を通して必ず一つの意味だけを表します。 あるコンポーネントではオレンジが「警告」を意味し、別のコンポーネントでは「保留中」を意味するなら、システムは機能しなくなります。

ステータスの各トーンは、ほかのトーンと視覚的に明確に区別できなければなりません。 2つのトークンが同じように表示されるなら、片方を残してください。同じ見た目の色に別の名前を付けても、別のステータスにはなりません。作成者はどちらかを選び、ユーザーには一つの状態として伝わり、その名前は実態と食い違います。下書きや保留中の状態には、警告色ではなく中立色を使います。

迷ったら、色を減らしてください。中立的なグレーなら意味的な重みを持たせずにステータスを伝えられます。誤用された意味色より、中立色のほうが適切です。

オレンジは常に警告を表す

オレンジ（アンバー）が伝えるシグナルは明確です。注意してください。問題が起きる可能性があります。次の用途には使わないでください。

• 中立的な状態（グレーを使います）
• 進行中や保留中（青またはスピナーを使います）
• 情報コンテンツ（青を使います）
• ステータスインジケーター内のブランディングや装飾

UI にオレンジが表示されたら、ユーザーはすぐに注意が必要だとわかるべきです。

エラーから復旧できるようにする

最悪のエラーとは、ユーザーが復旧できないエラーです。 すべてのエラー状態に、次へ進むための手段を用意してください。

エラーメッセージの構成

すべてのエラーで、次の3つの問いに答えてください。

1. 何が起きたのか？ — エラーコードではなく、平易な言葉で説明します
2. なぜ起きたのか？ — 役立つ情報があり、原因がわかっている場合に説明します
3. ユーザーは次に何をすべきか？ — 具体的で、実行可能な内容にします

❌ "Error 500"
❌ "Something went wrong"
✓  "We couldn't save your changes. Check your connection and try again."
✓  "This email is already in use. Sign in instead, or use a different email."

復旧方法

• 一時的な障害（ネットワークエラー、タイムアウト）には、必ず再試行ボタンを用意します
• 入力検証エラーの場合は、問題のあるフィールドを直接示します
• 破壊的な操作に失敗した場合は、何も失われていないことをユーザーに伝えます
• セッションの有効期限が切れた場合は、ログイン画面にリダイレクトし、元いた場所にユーザーを戻します

大きなエラーを事前に防ぐ

データの損失、取り消せない操作、状態の破損といった、最も深刻なエラーは、発生後に対処するのではなく、設計段階で防ぐ必要があります。

• 取り消せない操作の前に確認する： 「このプロジェクトと47件すべてのタスクを削除しますか？この操作は取り消せません。」
• ユーザーが操作を実行してエラーに遭遇するのを待つのではなく、実行できない操作は無効にする
• 可能な場合は自動保存し、ブラウザーのクラッシュや誤操作による終了で作業が失われないようにする
• ロールバック可能な楽観的 UI： すぐに成功状態を表示し、失敗した場合は目立たない形で再試行します。再試行も失敗した場合にのみエラーを表示します

ユーザーが操作する前に、その結果を伝えてください。操作の後ではありません。 コントロールの動作がわからないと、ユーザーは不安を感じます。操作の前に結果を明確に示し、ユーザーが安心して実行できるようにしてください。

• 平易な言葉で結果を説明するテキストを、コントロールの横または内側に表示します。「登録者240人全員にメールを送信します」「公開すると、誰でも閲覧できるようになります」などです。
• 複数の手順がある操作や、影響の大きい操作には段階的な案内を用意します。操作をステップに分け、進む前に各ステップで何が行われるかを伝えます。そうすることで、一連の操作が予測可能になり、いきなり実行するような不安をなくせます。
• 強い注意喚起（確認ダイアログ、文字入力による確認）は、上記のような本当に危険なケースに限定します。日常的な操作なら、控えめな補足テキストで十分です。目指すところは同じです。予想外のことが起きないようにし、不安を感じさせないことです。

重大度の段階 — 必要な場合にのみ使用

問題の重大度はそれぞれ異なります。フィードバックの視覚的な強さを、重大度に合わせてください。

重大度	パターン	使用する場面
ブロッキングエラー	ページ全体のエラー状態またはモーダル	アプリを続行できず、ユーザーの操作が必要な場合
インラインエラー	フィールドの下に表示する赤いテキスト	フォームフィールドの検証に失敗した場合
トースト／スナックバー	画面下部に表示する一時的な通知	ユーザーに知らせるべきだが、閉じることもできる一時的な問題
アラートバナー	セクション上部に表示する固定バー	現在のコンテキストに影響する継続中の問題
空の状態	イラストや説明を含む空の画面	まだデータがない場合 — 単に空白にするのではなく、案内の機会として活用

複数の種類のエラーを同時に表示するのは避けてください。重複するアラートを3つ表示するより、明確なメッセージを1つ表示する方が役立ちます。

類似度は1つの色相で表し、赤から緑へ変化させない

これは状態ではなく量を表すものです。ステータスには引き続き上記のセマンティックパレットを使い、既知の慣例があるチャートはその慣例に従ってください（[[data-display-and-selection]] を参照）。セルで2つのものがどれほど似ているか、または何かがどれほどあるかを示す場合は、ほとんど黒（共通点なし）からアクセントカラー（同一）まで、1つの色相で濃淡をつけてください。低い値に赤や黄色を使うと警告として受け取られ、違いを示すページ全体がエラーのように見えます。緑は成績のように見えます。1つの色相なら量として伝わります。それが数値の意味です。

レビューチェックリスト

• プロダクトで使うセマンティックなステータスカラーは4色以下ですか？
• 各色の意味は1つに定められ、あらゆる場所で一貫して使われていますか？
• どのステータストーンも他のすべての色と見分けられ、似たトークンは統合されていますか？
• オレンジ／アンバーは警告専用にしていますか？
• すべてのエラーメッセージに、何が起きたか、次に何をすべきかが記されていますか？
• 一時的なエラー（ネットワーク、タイムアウト）にはすべて再試行の操作がありますか？
• 取り消せない破壊的な操作には確認手順がありますか？
• 長文や複雑な入力に対して、自動保存または下書きの復元が利用できますか？
• 複数のエラー状態が同時に発生しないようにしていますか？
• 類似度や大きさの尺度は1つの色相で表し、警告色と成功色は状態の表示専用にしていますか？

よくあるアンチパターン

アンチパターン	問題	修正方法
操作方法を示さずに「問題が発生しました」と表示する	ユーザーが行き詰まり、先に進めません	具体的な原因と、再試行または問い合わせ先へのリンクを追加する
「保留中」と「警告」の両方にオレンジを使う	色の意味が失われます	オレンジは警告専用にし、保留中には青またはスピナーを使う
5色以上のステータスカラー（赤、オレンジ、黄色、ティール、紫など）を使う	ユーザーが複雑な凡例を学習し、覚える必要があります	最小限に絞る：赤、オレンジ、緑、青
送信時にのみインライン検証を行う	ユーザーがすべてのエラーを一度に知ることになります	フィールドからフォーカスが外れたときに検証し、すぐにフィードバックする
削除時に確認を求めない	ユーザーが誤ってデータを削除するおそれがあります	取り消せない操作にはすべて明示的な確認を求める