バッジ

定義

バッジは、ある要素の上に重ねて置くとても小さな印です。代表的なのは、未読の通知 件数を数字で見せたり、新着があることを小さな点ひとつで知らせたり、リストの項目の 横に NEW のような短いラベルを添えて状態を伝えたりする使い方です。大事なのは、 バッジがそれ自体で独立した要素ではなく、いつも別の何かに付き添ってその上に重なる という点です。そのためバッジは、たいていアイコンの右上の角のような目立つ位置に 置かれ、本文の流れを邪魔しない程度に小さく保たれます。付く相手があって初めて 意味が生まれるという点で、バッジは単独で使うラベルとは性格がはっきり異なります。

なぜ重要か

バッジが大切なのは、画面全体を描き直さなくても状態の変化をすぐに伝えられるから です。ユーザーはメニューを一つずつ開いて確かめなくても、どこに新着があるのかを バッジをさっと見るだけで把握できます。とくに未読件数を見せる数字バッジは、次に 何を確認すべきかをユーザーに自然に案内する強い合図になります。ただしバッジは 視線を強く引き寄せる要素なので、そこにあるだけでユーザーにちょっとした プレッシャーや確認したい気持ちを生み出します。だからどこにバッジを付けるかという 判断は、単なる飾りではなく、ユーザーの注意をどこへ向けるかを決める設計の判断に 近いのです。うまく使えば道しるべになりますが、むやみに使えばユーザーをせかし 続けるノイズになってしまいます。

よくある間違い

• バッジをあちこちに乱発してしまう場合です。すべてのメニューに赤い点と数字が 付いていると、ユーザーは何が本当に急ぎなのかを見分けられず、結局バッジ全体を 背景のように無視するようになります。合図が多すぎると、どの合図も合図で なくなってしまうのです。
• 大きな数字をそのまま出して、バッジの幅が勝手に伸びてしまう場合です。1024 の ような値が入るとバッジが隣の要素を押しのけてレイアウトが揺れ、画面ごとに アイコンの位置が微妙にずれて、整った印象が崩れてしまいます。
• 数字だけをぽつんと置いて、何の件数なのか分からなくしてしまう場合です。文脈なく 浮いている数字は、未読メッセージなのかエラーの件数なのかをユーザーが毎回 推測することになり、結局バッジが情報を与えるどころか疑問だけを残してしまいます。

実務のヒント

• 数字が大きくなったら 9+ や 99+ のように上限を決めて縮めて表記しましょう。幅が 一定に保たれてレイアウトが揺れませんし、正確な数より「だいたい多い」という事実の ほうが大切な場面も少なくありません。
• バッジは本当に注目が必要な場所にだけ、絞って使いましょう。ただ存在を示すだけなら 点ひとつで、件数が重要なときだけ数字で分ければ、合図に強弱が生まれ、ユーザーは 急ぎのものから見てくれます。
• バッジの色は背景と十分に対比する強調色を選び、その中の文字も読めるように対比を 確認しましょう。小さいほど明快でなければ役目を果たせません。色だけで意味を 伝えないよう、数字やラベルを一緒に添えておくと安全です。

関連概念