WEBサイトや管理画面でよく使うアラートメッセージUIですが、ステータスの色と文言の使い分けがいまいちよくわかっていませんでした。
なんとなくテキストとアラートの色が合っていないな…と思うことがあったけど、うまく言語化できてなかったので調べてみました📕

セマンティックカラーについて

セマンティックカラーとは、意味をもって定義された色のことです。
いろいろなデザインシステムやフレームワークをみていると、アラート関連は、次のようにセマンティックカラーとして定義されていることが多いです。

それぞれどんなふうに使ったらいいかみていきましょう👀

success（成功）

色：緑
意味：成功、完了、安全、ポジティブ
作業が正常に完了した時や、ポジティブなステータスを表示する時。

error（エラー）

色：赤
意味：エラー、危険、間違っている、ネガティブ
問題があって作業が続行できないときや、否定的なステータスを表示する時。
問題を解決するまでは、作業を続行することはできない。

warning（警告）

色：黄色
意味：注意、警告、警戒
作業の続行はできるが、いずれ作業が阻害される可能性がある時。

エラーとの使い分けが難しいですが、エラーは作業が中断され次に進むことができません。それに対して、警告は作業の中断を伴いませんが、いずれ阻害される恐れがあるという点がポイントです。
放っておくとよくないよ！ってかんじです。

info（お知らせ）

色：青
意味：情報、お知らせ
お知らせを表示したい時に使う。

ユーザーの行動に対するフィードバックというよりは、あらかじめ情報を表示するために使われます。

色は青を使うのが一般的ですが、無彩色を当てているサイトも多い印象です。

***

今回調べたものはあくまで一般的な使い方なので、サイト内で一貫したルールで運用されていて、ユーザーが迷わないようになっていれば、こちらが絶対ということもないと思います。

よければ参考にしてみてください🎉

※別アカウントで公開していたものを加筆修正