テキストラベル・ステータス・カウントを小さな丸みを帯びたチップ（小さなタグ）で表示するUIコンポーネント。カード・リスト項目・ナビゲーションアイコンに付随して、追加情報を視覚的にすばやく伝える「飾りに見えて情報密度を上げる」パーツ。
この記事を読むと、BadgeとTagとChipとPillの使い分け・カラーによるステータス表現のルール・通知バッジのARIA実装・乱用を避けるための判断基準が自分でできるようになります。
1. UI例（Preview / Live）
バッジは、デザインシステム GUNJO の Badge 実装です。意味に応じた variant、色だけに頼らないステータス表現（アイコン＋テキスト）、削除可能チップを実際のトークンで確認できます（右上 Code で編集可）。
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
テキストラベル・ステータス・カウント数値を小さな丸みを帯びたコンテナ（Pill / Chip）に収めて表示するUIコンポーネント。それ単体では機能せず、他のUI要素（Card・List item・ナビゲーションアイコン）に付随して補足情報を素早く伝えるのが役割。
Tagとの違い：Tagは削除・追加ができるインタラクティブな要素（Chip）。Badgeは読み取り専用の表示コンポーネント。操作できるならTag / Chip、表示のみならBadge。
Pillとの違い：PillはBadgeと同義で使われることが多い。形状の呼び方（角丸が大きい＝Pill）であり機能の差はない。
Alertとの違い：Alertはページレベルやセクションレベルでユーザーの注意を引くメッセージ。Badgeは他の要素に付随する小さな補足表示。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- コンテンツのステータスを示す（公開中・下書き・レビュー中）
- ナビゲーションアイコンに未読数・通知数を表示する
- 記事・タスクのカテゴリ・タグを視覚的に示す
- 新機能や重要度を示す「New」「Beta」「Hot」ラベル
3.2 When NOT to use
- ユーザーに即座の行動を促す重要なメッセージ →
Alert/Toastを使う - 削除・追加できる選択タグ →
Tag/Chipを使う - 複数の詳細情報を同時に表示 →
Tooltip/Popoverを使う
3.3 代替UI（Alternatives）
- インタラクティブなタグ →
Tag / Chip（削除ボタン付き） - ページレベルの通知 →
Toast/Alert - 詳細情報のホバー表示 →
Tooltip
4. 設計判断の核（Decision Principles）
Badgeの色は「意味」を持つ——緑＝OK / 黄＝注意 / 赤＝エラーのセマンティックカラーを一貫して使い、プロジェクト内でルールを統一する。
判断の優先順位：① 色＋テキストで意味を表現 → ② 数値バッジは0件時に非表示 → ③ バッジの数を絞る → ④ カラーのセマンティック一貫性
- 色だけでステータスを表現しない：色覚特性のあるユーザーには色の違いが分からない場合がある。必ずテキストラベルを添える
- 数値バッジは0件で非表示：カウントが0の場合はバッジを表示しない。「0」を表示し続けると意味のないノイズになる
- 99件以上は「99+」に省略：3桁以上の数値はバッジのレイアウトを崩す。
Math.min(count, 99)++で表示する - 同一画面内のバッジ数を絞る：あらゆる場所にバッジを付けると「すべてが重要」に見え、ユーザーの注意が分散する
5. 状態設計（States）
5.1 必須状態（Required）
- Default：ラベルまたはカウントを表示
5.2 条件付き状態（Conditional）
- Empty（カウント0）：数値バッジはカウントが0の時は非表示にする
- Over limit（99+）：99件以上は「99+」で省略表示
- Dot（点のみ）：数値なしの「未読あり」を点だけで示す省スペースバリアント
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| Default | ✅ | ステータス・カテゴリ・カウント |
| Empty | — | カウントが0のため表示しない |
| Over limit | — | 99件以上であることを示す |
| Dot | — | 未読があることだけを最小限に示す |
6. バリエーション設計（Variants）
Badgeのバリアントは「何を伝えるか」で分かれる。
| バリアント | 目的 |
|---|---|
| ステータスバッジ | 公開中・下書き・エラーなど状態を示す |
| 数値バッジ（Notification badge） | 未読数・通知数をアイコン右上に表示 |
| カテゴリタグ | 記事・コンテンツの分類を示す |
| ラベルバッジ | New / Beta / Hot などのマーケティング的ラベル |
| Dot badge | 点のみで「何か未読がある」ことを最小限に示す |
禁止パターン：ステータスバッジに5色以上のカラーを使う → ユーザーが色の意味を学習できず意味が薄れる。最大4色（green・yellow・red・gray）に絞る。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 色のみでステータスを表現：丸い色点だけでステータスを示し、テキストラベルがないため色覚特性のあるユーザーに意味が伝わらない
- 0件でもバッジを表示：カウントが0の時もバッジを表示し続け、ノイズになる
- バッジの乱用：UIのあらゆる要素にバッジを付け、ユーザーが何が重要か判断できない
7.1 Bad（典型3つ）
<span class="bg-green-500 rounded-full w-3 h-3" />で色点のみを表示し、色覚特性のあるユーザーに意味が伝わらない- カートが空（0件）でも
0と書かれた赤いバッジが表示され続け、誤った緊急感を与える - 画面内の10か所以上にバッジが表示されており、どれも同じ重要度に見える
7.2 Good（対になる3つ）
<span>公開中</span>のようにテキストラベルを必ず付ける。ステータスインジケーター（色点）がある場合はaria-hidden="true"にして読み上げはテキスト側で行う{count > 0 && <Badge>{count}</Badge>}で0件時はバッジをレンダリングしない- バッジを使うのは「ユーザーが対処すべき件数（通知・未読）」と「コンテンツのステータス」の2箇所に限定する
7.3 How to fix（手順）
- 色点のみのバッジにテキストラベルを追加する
- カウントバッジのレンダリング条件に
count > 0を追加する - カウントが99以上の場合は
count > 99 ? '99+' : countで省略表示にする - スクリーンリーダー向けに
aria-label="N件の未読通知"を付与する
7.4 GUNJO 実装で見る（Bad / Good）
同じ GUNJO の Badge を、状態が区別できない使い方と、意味に沿った variant で対比。
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Keyboard
- Badgeは基本的に非インタラクティブなため、Tabフォーカスは不要
- クリッカブルなカテゴリタグの場合は
<button>または<a>を使いフォーカスできること
Focus
- クリッカブルなBadgeのみフォーカスリングを確保する
Screen Reader
- ステータスバッジはテキストラベルがあるためそのまま読み上げられる
- 色のインジケーター（丸い点）は
aria-hidden="true"にして重複読み上げを防ぐ - 数値バッジには
aria-label="N件の未読通知"を付与して文脈を伝える
<!-- ステータスバッジ -->
<span class="badge badge-success">
<span aria-hidden="true" class="dot"></span>
公開中
</span>
<!-- 数値バッジ（通知アイコンに付随） -->
<div class="relative">
<button aria-label="通知">🔔</button>
<span
aria-label="12件の未読通知"
class="badge-count"
>
12
</span>
</div>
Touch / Pointer
- クリッカブルなBadge（カテゴリタグなど）は44px以上のタップ領域を確保する
- 非インタラクティブなBadgeに
cursor: pointerを付けない
Contrast / Readability
- バッジのテキストは背景色と4.5:1以上のコントラスト比を確保する
- 背景色が薄い場合（
bg-green-100）はテキスト色を十分濃くする（text-green-800）
10. 実装メモ（Implementation Notes）
- shadcn/ui の
Badgeコンポーネントはvariantprop（default/secondary/destructive/outline）を持ち、カラーテーマに沿ったバッジが実装済み - プロジェクト固有のステータス色が必要な場合は
classNameで上書きするか、カスタムバリアントを追加する - 数値バッジのオーバーフロー処理：
{count > 99 ? '99+' : count}で実装し、min-widthを設定してレイアウト崩れを防ぐ
11. 関連リンク
- 関連するUIデザイン原則: 視覚的階層 (Visual Hierarchy), スキャンしやすさ (Scannability), フィードバック (Feedback)
- 用語集（定義）: 視覚的階層 (Visual Hierarchy)
- 関連するUIコンポーネント（横）: List（リスト）, Card（カード）, App rail（アプリレール）, Toast（トースト通知）
12. まとめ
Badgeの設計は「色＋テキストで意味を表現する」と「0件では表示しない」の2点が最低ラインです。迷ったら 4. 設計判断の核 に戻り、セマンティックカラーのルール・0件非表示・バッジ数の絞り込みを確認してください。Badgeは「小さいから軽視しがち」なコンポーネントですが、乱用すると画面中が「緊急サイン」だらけになりユーザーが麻痺します——付ける前に「これは本当にユーザーが今知るべき情報か」を問うことが、良いBadge設計の第一歩です。
