アラートUIの色と使い方

2023年5月19日 18:34

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

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

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

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

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

こんなときに
・登録が完了しました。
・商品をカートに追加しました。
・カード情報が更新されました。

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

こんなときに
・入力内容に間違いがあります。
・ダウンロードが失敗しました。
・パスワードが間違っています。

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

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

こんなときに
・メール認証を完了してください。
・あと１ヶ月で期限が切れます。
・容量が上限に達しそうです。

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

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

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

こんなときに
・10月14日24:00よりメンテナンスを行います。
・新着のお知らせが３件あります。

***

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

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

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