画面に出ている数字のすぐ横に置いて、その数字がいまの値かどうかを示す小さな札です。待ち時間、在庫、価格、センサーの計測値のように、値そのものは読めても「それがいつの値か」が画面から読み取れないときに使います。
この記事では、状態を表す語を枠で囲って独立させる理由、明滅する点と色を補助に留める理由、値の更新が止まったときに何を出すか、読み上げに割り込ませてよい画面の見分け方を順に説明します。判断の要点は全部で 6 つありますが、とくに効くのはこの 4 つです。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
Live Badge は、隣に置かれた値が「いまの値かどうか」を示す小さな札です。札には状態を表す語（既定では LIVE）が乗り、枠で囲われ、ゆっくり明滅する点が添えられます。
この記事で使う言葉：値の更新がいま届いている状態を「実時間」、更新が届かなくなった状態を「実時間から外れた」と呼びます。
この札が答えているのは「鮮度」の問いだけです。同じ見た目の小さな札でも、答えている問いが違うものは別のコンポーネントになります。
Badge との違い：Badge は「下書き」「承認済み」のように、値そのものが持つ区分を示します。Live Badge が示すのは区分ではなく、その値がいつのものかという時間の関係です。表示している値が同じでも、接続が切れれば札は変わります。
Status Bar との違い：Status Bar は画面全体の状態を固定位置にまとめて出します。Live Badge は 1 つの値のすぐ隣に置かれ、その値だけを担当します。1 画面に数個の Live Badge が並ぶことは普通にあります。
Toast との違い：Toast は出来事を一度知らせて消えます。Live Badge は状態が続くあいだ出続けます。
この札が判断しないこと：何を「いま」とみなすかは、札が決められません。株価なら 1 秒、待ち時間なら 1 分、天気なら 10 分が「いま」です。締切、再接続、バッファの事情も画面ごとに違います。だから札は時計を持たず、いまの値かどうかは呼び出し側（この札を画面に置くページの実装）が渡します。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 値が画面の裏側で更新される：読み手が操作していないのに数字が変わる画面
- 値が古いと判断が変わる：待ち時間、残席、在庫、価格、センサーの計測値
- 更新が止まりうる：接続が切れる、画面を裏に回す、端末が眠る
- 同じ画面に、いまの値と過去の値が混ざる：どれが実時間なのかを値ごとに示したいとき
3.2 When NOT to use
- 値が変わらない：確定した実績値や請求書の金額。札は「まだ動くかもしれない」という誤解を作ります
- どの値も、いつのものか分からない：札が常に消えるだけなので、置く意味がありません。値そのものを出すかどうかから考え直します
- 画面の値の半分以上が実時間：数個までなら並んでも読めますが、半分を超えると札そのものが目に入らなくなります。Status Bar で画面全体について 1 回言うほうが読めます
- 鮮度ではなく区分を示したい：Badge を使います
- 残り時間を示したい：締切までの残りは鮮度とは別の軸です
3.3 代替UI（Alternatives）
- 値の区分を示したい : Badge（バッジ）
- 画面全体の接続状態を示したい : Status Bar（ステータスバー）, Alert（アラート）
- 更新が起きたことを一度知らせたい : Toast（トースト）, Notification Center（通知センター）
- 取得中であることを示したい : Spinner（スピナー）, Loading（ローディング）
4. 設計判断の核（Decision Principles）
この札の核は「状態を表す語を、まわりの文章から独立させること」。囲われていない語は、隣の見出しの続きとして読まれる。
判断の要点は 6 つで、以下の項目はこの順に並びます。1. 語を独立させる、2. 状態を文字に載せる、3. 実時間から外れたときに時刻を出す。4. 時刻が分からないなら札を出さない、5. 読み上げに割り込ませるかどうかを決める、6.「いま」の線引きをどこに置くか。
- 状態の語を、まわりの文章（地の文）に混ぜない：これがこの札でいちばん効く判断です。GUNJO（群青）は UIXHERO が公開しているデザインシステムです。その
LiveBadgeは、ある設備の待ち時間を映す画面をもとに作られました。その画面では、状態を表す語が設備の名前と一続きの文字列として並んでいました。UIXHERO が人に触ってもらったところ、「この LIVE はどういう意味ですか」と聞かれました。枠で囲って語を独立させると、意味が通じました。設備の名前の一部に見えていたものが、枠が付いた瞬間に「いまの状態」として読まれるようになったということです。上のデモで「文字だけを並べる」に切り替えると、同じことが起きます。 - 状態は文字に載せる。明滅と色は補助：札には語を乗せます。明滅する点は、更新が続いていることの雰囲気を添えるだけで、状態そのものは伝えません。だから点だけを手がかりにはできません。文字を外すと、残る手がかりは色と動きの 2 つになります。この 2 つが読めなくなる条件が 3 つあり、そのうち 2 つでは片方だけが消えます。色覚特性のある読み手には緑と灰色の区別が付かず、色が消えます。動きを減らす設定（
prefers-reduced-motion: reduce）を入れている読み手には明滅が届かず、動きが消えます。3 つめは色を持たない出力（モノクロ印刷、白黒のスクリーンショット）で、色と動きが同時に消えます。上のデモで「点と色だけ」に切り替えてから「色を落として見る」を押すと、手がかりが点 1 つだけになります。 - 外れたときに言うのは「古い」ではなく「いつの値か」：実時間から外れたら、札は LIVE を名乗るのをやめ、同じ場所で「09:40 時点」と答えます。「古い」は評価であって、読み手が要るのは評価ではなく時刻です。5 分前なら使える、3 時間前なら待つ、という判断は画面の外の事情で決まるので、判断の材料だけを渡します。
- 時刻が分からないなら札は出さない：外れていて、しかも「いつの値か」も渡せないときは、札を消します。いつの値か分からないまま札を残すと、古い値が現在の値に見えます。黙るほうが、推測で間違った状態を見せるより正しい振る舞いです。
- 読み上げ領域を既定にしない：札に
role="status"を既定で付けると、再接続のたびに読み上げへ割り込みます。多くの画面でこの札は環境音で、読み手が知りたいのは値のほうです。割り込むべき画面（監視盤、管制、競売の残り時間）でだけ、呼び出し側が付けます。 - 「いま」の線引きは呼び出し側に置く：札は時計を持たず、2 つの時刻を比べることもしません。
liveは真偽値として受け取ります。札の中に「30 秒以上経ったら外れている」と書き込むと、株価の画面でも天気の画面でも同じ線引きになってしまいます。
5. 状態設計（States）
5.1 必須状態（Required）
- いまの値：語と枠、明滅する点が出ている
- 外れている（時刻が分かる）：語が「いつの値か」に替わり、色も替わる。状態を伝えているのは色ではなく文字
- 外れている（時刻が分からない）：一時的に時刻が取れなくなったとき。札を出さない。何も出さないという振る舞いも作り込む
5.2 条件付き状態（Conditional）
- 初回の取得中：まだ 1 度も値が届いていない。札ではなく、スケルトン（値が届く前に枠だけを灰色で見せる表示）かスピナーの担当です
- 更新が遅れている：接続は生きているが更新が来ない。実時間とみなすかどうかは呼び出し側の線引き次第です
- 動きを減らす設定：点は残し、明滅だけを止めます（理由は 9.2）
- 画面が裏にある：読み手が別のタブを見ているあいだ更新を止める作りなら、読み手が戻ってきた時点で、札が「いまの値」と「外れている」のどちらを出すべきかを作り込みます
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| いまの値 | 必須 | 隣の値は、いま受け取っている値である |
| 外れている（時刻あり） | 必須 | 隣の値は、この時刻のものである |
| 外れている（時刻なし） | 必須 | 札を出さない（黙ることが正しい振る舞い） |
| 初回の取得中 | 条件付き | まだ値が無い |
| 更新が遅れている | 条件付き | 接続はあるが、値が止まっている |
| 動きを減らす設定 | 条件付き | 状態は同じ（見た目から明滅だけが消える） |
| 画面が裏にある | 条件付き | 戻ってきた時点で、どちらの状態を出すか |
6. バリエーション設計（Variants）
大きさ、札に乗せる語、外れたときの表示、置き方の 4 つで決まります。
| バリアント | GUNJO の指定 | 典型的な用途 |
|---|---|---|
| 標準 | size="default" | 指標カードの見出しの隣 |
| 小 | size="sm" | 表の行の中、値が密に並ぶ盤 |
| 大 | size="lg" | ページの見出しの横 |
| 語の差し替え | children | 「実況中」「受信中」「自動更新」など、その画面の言葉にする |
| 外れたときの表示 | detached | 「09:40 時点」のように、いつの値かを答える |
| 文の中に置く | as="span"（既定） | 段落の途中に混ぜる。as="div" は行として置く |
語は LIVE でなくてよい：スポーツ中継なら「実況中」、機器の監視なら「受信中」、価格表なら「自動更新」が読みやすいことがあります。画面の他の言葉とそろえます。
禁止パターン：語を外して点と色だけにすること。上のデモで語を外し、そのうえで色を落とすと、意味が消えます。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 語が枠に入っていない：隣の見出しの続きとして読まれ、設備や商品の名前の一部に見えます
- 色と明滅だけで状態を出している：色覚特性、動きを減らす設定、色を持たない出力のいずれかで消えます
- 外れたときに「古い」と書いている：評価だけが届き、判断の材料になりません
7.1 Bad（典型3つ）
- 見出しが「渋谷第2センター 待ち時間 LIVE」と 1 行に流れている。LIVE がセンターの名前の一部に見える
- 緑の点が明滅しているだけで、札に文字が無い。動きを減らす設定では、明滅しない点が 1 つ残るだけになる
- 接続が切れると札が「古い情報」に替わる。どれくらい古いのかは書かれていない
7.2 Good（対になる3つ）
- 「渋谷第2センター 待ち時間」の後ろに、枠で囲んだ「LIVE」を置く
- 札に「LIVE」の文字を乗せ、点はその左に添える。点は
aria-hiddenにする - 接続が切れると札が「09:40 時点」に替わる。時刻が取れなければ札を消す
7.3 How to fix（手順）
- 状態の語を枠で囲み、まわりの文章から切り離す
- 札に文字を乗せる。点と色は残したまま、補助に下げる
- 外れたときに出す文字を決める。時刻が渡せるなら「09:40 時点」、渡せないなら札を消す
- 点に
aria-hidden="true"を付け、読み上げには札の文字だけを届ける - その画面が、読み上げに割り込んでよい画面かを決める。割り込むなら呼び出し側で
role="status"を付ける
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
この札は面積が小さく、色と動きに意味を載せたくなるコンポーネントです。崩れ方は「色だけ」「動きだけ」「読み上げへの割り込み」の 3 つで、9.1 から 9.3 がその 3 つに当たります。9.4 と 9.5 は、文字と点の寸法、タップの補足です。
9.1 色だけに頼らない
- 語を欠かさず乗せる：緑と灰色の対比だけで状態を示さないようにします
- 点は飾りとして扱う：点に状態を持たせず、
aria-hidden="true"を付けます。明滅を止めても点そのものは残します（理由は 9.2） - 外れたときも文字で言う：色を注意の側（黄）に替えるだけで済ませず、「09:40 時点」の文字を出します
- コントラスト：札には文字が乗るので、札の文字色と札の背景色のコントラスト比を 4.5:1 以上にします。デザインシステムが意味に割り当てている 3 色（緑・黄・赤）を薄い背景の上に文字色として置くと、この基準に届かないことがあります。この札が使うのはそのうち 2 色（いまの値の緑、外れたことを表す黄）です
9.2 動きを減らす設定
.live-badge__dot {
animation: live-badge-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.live-badge__dot {
/* 点は残し、明滅だけを止める */
animation: none;
}
}
明滅を止めるとき、点そのものは消しません。消すと、理由の無いまま手がかりが 1 つ減ります。状態は文字が伝えているので、点が止まっていても読めます。
9.3 Screen Reader
札そのものに role="status" を既定で付けません。この札は多くの画面で環境音で、再接続のたびに読み上げへ割り込むと、読み手が聞きたい値のほうが聞けなくなります。
<!-- 既定：札は文字として読まれるだけ。割り込まない -->
<p class="metric__label">
渋谷第2センター 待ち時間
<span class="live-badge">
<span class="live-badge__dot" aria-hidden="true"></span>
LIVE
</span>
</p>
<p class="metric__value"><strong>12</strong> 分</p>
<!-- 割り込んでよい画面だけ：呼び出し側が role を付ける -->
<span class="live-badge" role="status">
<span class="live-badge__dot" aria-hidden="true"></span>
LIVE
</span>
割り込ませてよいかどうかは、読み手がその画面で何をしているかで決まります。監視盤の前に座っていて接続の途切れが仕事に直結する画面では、割り込むほうが正しいです。商品ページの在庫表示では、割り込まないほうが正しいです。
外れたときに読み上げへ届くのも文字です。detached に渡す「09:40 時点」がそのまま読まれます。時刻を渡さずに札を消した場合、読み上げにも何も届きません。これは意図した振る舞いで、「不明」と読ませるより静かです。
9.4 文字と点の寸法（Readability）
- 札の文字は小さくなりがちです。11 ピクセル未満にしないようにします
- 明滅の振れ幅を大きくしないようにします。透明度を 1.0 と 0.4 の間で往復させる程度に留めると、視界の端で気になりません
- 点の直径は 6 ピクセル前後で足ります。大きくすると、点そのものが状態を言っているように見えます
9.5 Touch / Pointer
札はタップ対象にしません。押しても何も起きない小さな的を作らないためです。更新の詳細（前回の取得時刻、更新の間隔）を見せたいなら、カードや行の全体を押せるようにして、そちらで開きます。
10. 実装メモ（Implementation Notes）
- GUNJO の
LiveBadgeはlive（真偽値）で表示を切り替えます。札の中に時計はなく、2 つの時刻を比べる処理も持ちません。何を実時間とみなすかは呼び出し側が決めます detachedに渡したものが、外れているときに札の代わりに出ます。detachedを渡さなければ、外れているときは何も描かれませんsizeは Badge と同じ 3 段階（sm/default/lg）です。asの既定はspanなので、文の中にそのまま置けます- いまの時刻を使って
liveを計算する場合、Date.now()を描画中に読まないようにします。サーバーでの描画と最初のクライアント描画が食い違うためで、effect の中で読みます - 札の実装は Badge を組んで作られています。枠、色、大きさの段階は Badge 側にあり、足されているのは明滅する点と、実時間かどうかで表示を切り替える仕組みだけです
- 実装は GUNJO の LiveBadge（gunjo.jp を新しいタブで開く） にあります。いまの値、いつの値か、何も出さない、語の差し替えの見本が置かれています
- 時間を動かす操作盤の中に置く場合は Time Transport を参照してください。操作盤に出る実時間の札は、Live Badge が描いています
11. 関連リンク
- 関連するUIデザイン原則: 状態の可視化 (Visibility of System Status), 色に依存しない設計 (Color Independence), モーション品質 (Motion Quality)
- 用語集（定義）: システム状態の可視性 (Visibility of System Status), カラーユニバーサルデザイン (Color Universal Design), シグナル・ノイズ比 (Signal-to-Noise Ratio)
- 関連するUIコンポーネント（横）: Badge（バッジ）, Status Bar（ステータスバー）, Time Transport（時間の操作盤）
12. まとめ
この札の設計でいちばん効くのは、状態を表す語を枠で囲って独立させることです。迷ったら 4. 設計判断の核 に戻ってください。6 つの要点のうち最初に確かめるのは 3 つです。「語がまわりの文章から独立しているか」「色と明滅を外しても読めるか」「外れたときに時刻を出しているか」を見ます。
札が小さいぶん、色と動きに意味を載せたくなります。ただし色は色覚特性とモノクロ印刷で、動きは設定で消えます。残るのは文字だけです。そして外れたときに書くのは「古い」という評価ではなく、いつの値かという事実です。それも渡せないなら、札を出さないほうが正しい判断になります。
