StatusLabel

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

種類

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

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

状態

強調の有無

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

ライティング

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

タスクの開始前

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

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

タスクの開始後〜未完了

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

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

タスクの完了後

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

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

問題発生時

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

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

Props

type
"error""grey""blue""green""red""warning"
bold
falsetrue