StatusLabel

種類

特殊なステータスを表す場合は、背景色に警告色やエラー色を使います。
その他のステータスを表す場合は、プロダクトに応じて適宜色を選択します。

すべての人が同じように色を認識できるわけではありません。
色のみでステータスを伝えることは避け、ライティングを参考に適切な名前を付けましょう。 （参考：カラーユニバーサルデザイン）

状態

強調の有無

他のステータスと区別して、視覚的に目立たせたい場合は、背景色と文字色を反転させた「強調あり」のラベルを使います。
例えばユーザーがアクションをしないと次に進めない場合などに使います。

ライティング

ラベル名は、ユーザーに「タスクの進捗状況」や「要求されているアクション」を伝えることを意識して命名しましょう。

タスクの開始前

最初のステータスです。
まだ最初のアクションが完了していないことを明確にしましょう。

例

• ○○前：タスクを進めるためにアクションが必要だが、ユーザーがまだ何もアクションをしていない状態（例：開始前）
• 未○○：ユーザーが最初のアクションの一部に着手している状態（例：未送信 = 送信先の従業員を追加したが、送信はしていない）

タスクの開始後〜未完了

2つ目以降のステータスです。
どんなアクションが進行中なのか、または次のステータスに移行するまでに何が必要なのかを明確にしましょう。

例

• ○○中：アクションが進行している途中の状態（例：依頼準備中、入力中、回答中）
• ○○待ち：ユーザーがアクションをした後、システムや他の従業員による後続のアクションを待っている状態（例：提出待ち、承認待ち）

タスクの完了後

最後のステータス、または一部のサブタスクが終わった場合のステータスです。
どんなタスクが終わったのかを明確にしましょう。

例

• ○○済み：すべてのタスクが終わるまでに複数のサブタスクが存在し、一部のサブタスクが終わった状態（例：設定済み、提出済み）
• 完了、○○完了：すべてのタスクが終わっている状態。なお、○○済みと併用する場合は「完了」を使うこと
• 終了、○○終了：対応期限が過ぎて、アクションが打ち切られている状態（例：回答終了）

問題発生時

問題が発生した場合のステータスです。
処理が失敗したことや、問題解決のためにアクションが必要なことを明確にしましょう。

例

• 差し戻し、要○○：ユーザーがアクションを取ったが、管理者などの第三者が確認した結果、不備があったため、やり直しを依頼している状態
• 失敗、○○失敗：ユーザーがアクションを取ったが、不備によりシステムエラーが発生し、処理が完了しなかった状態

Props