バッジ

ステータスドット（成功／警告／エラー／情報）、アイコンに重ねる件数バッジ、NEWピル、数値の通知バブルを一覧にした見本。状態や件数を小さく添えるための定番部品です。

ENGLISH

Badge

CSSのみ

約146行領域別 / データ可視化・ダッシュボードの一覧 →

プレビュー

静的

操作動きのない質感・レイアウトの見本です。

使いどころ

ステータスの一目判別（成功／警告／エラー／情報）、通知件数、新着マークなど、リストの各行やアイコンに添えて意味を圧縮して伝える用途に向く。一覧テーブルの状態列、ヘッダーのベルアイコン上の未読件数、EC商品カードの「NEW」ラベルなど、単体では説明文を書く余白が無い場所に使う。逆に、複数のバッジを同一要素に3つ以上重ねて付けると情報過多になり、どれが重要な状態なのか判断できなくなるため、1要素につき1〜2個までに絞るのが実務上の目安。デモの4種のステータスピルはいずれも文言（成功/警告/エラー等）とアイコンのドットを両方持たせているため、色の意味を覚えていない初見のユーザーでも文字で判断できる作りになっている。

仕組み

全体がCSSのみで構成されておりJSは無い、純粋な表示部品。ステータスピルはbg-dot（currentColorで塗る小さい丸）とテキストラベルの組で構成し、色はbg-success/bg-warning/bg-error/bg-infoの各クラスがcolorとbackgroundの2値をセットで切り替える。アイコン上の件数バッジ(bg-icon-badge)はposition: relativeの親に対しbg-countをposition: absoluteでtop: -6px／right: -7pxに配置するオーバーレイ方式で、border: 1.5px solid #fbf6ecの縁取りを入れることで背景アイコンとの境界を保っている。未読ドット(bg-count--dot)はテキストを持たない10px四方の円で、bg-countのwidth/heightとpaddingだけを上書きしたバリエーション。数値バブル(bg-bubble)と「NEW」ピル(bg-new)は独立したクラスで、いずれも角丸（100pxまたは5px）と固定色の組み合わせだけで構成される。

実装の注意

件数バッジ(bg-count)や未読ドット(bg-count--dot)はposition: absoluteでアイコンの右上に重ねているため、アイコン自体の色が薄いと2px弱の縁取りだけでは重なりが視覚的にわかりにくくなる場合がある。もう一つの落とし穴は、bg-bubbleの"99+"のように既定の桁数を超えたときの丸め処理がCSS側に無く、3桁以上の数値をそのまま渡すとmin-widthを超えてバッジが不格好に伸びてしまう。呼び出し側で99を超えたら"99+"に丸めるロジックを別途用意する必要がある。またbg-newの「NEW」表示には有効期限の概念が無いため、実運用では「登録から7日間だけ表示する」といった判定を呼び出し側に持たせないと、いつまでも「NEW」のまま残ってしまう。

アクセシビリティ

ステータスピルは色だけでなく成功/警告/エラー/情報のテキストラベルを併記しているため、色覚特性に関わらず状態を読み取れる、この部品の中で最も手本になる作り。一方、件数バッジ・未読ドット・数値バブルは素のspanにaria-labelを付けているが、これは確実には効かない。ロールを持たないspan(暗黙のgenericロール)はARIA上「命名禁止」で、支援技術によってはaria-labelが無視され、未読ドットはアクセシビリティツリーから消え、数値バッジは「8」「99+」としか読まれない。意味を確実に伝えるには、視覚的に隠したテキスト(いわゆるvisually hidden)を中に入れるか、role="img"やrole="status"のような命名可能なロールを与えたうえでラベルを付ける。装飾用のSVGアイコンをaria-hidden="true"で除外している点は適切だ。唯一手当てが要るのは「NEW」ピルで、bg-newには読み上げ用の補足が無くテキストの"NEW"がそのまま読まれるだけなので、英語表記に馴染みが薄いユーザー向けにaria-label="新着"を足す余地はあるが、視覚表示と矛盾しない範囲であれば必須ではない。装飾のみで情報を持たないbg-dotには既にaria-hidden="true"が付いており、二重読み上げを避ける配慮ができている。

調整して使う

調整点は色・形・サイズの3系統。色はbg-success等の4色セットを増やし、たとえば「保留中」用にグレー系(#8a8278)を足すといった拡張がしやすい設計になっている。形はborder-radiusを100px（完全な丸）から6〜8px程度の角丸に変えると、ピルよりもタグに近い落ち着いた印象になる。サイズはbg-countやbg-bubbleのwidth/height/font-sizeを一律に縮小・拡大すれば、デンスなテーブル用の小型版とダッシュボード用の大型版を作り分けられる。加えて、bg-dotだけを単独で使いテキストラベルを省いた最小構成にすることも技術的には可能だが、その場合は色だけに頼る表示になるため、aria-labelで状態を補うか隣接するテキスト列で意味を確定させる設計が前提になる。

コード（コピーして使えます）

<div class="bg-wrap">
  <div class="bg-group">
    <span class="bg-group-title">ステータス</span>
    <div class="bg-row">
      <span class="bg-pill bg-success"><span class="bg-dot" aria-hidden="true"></span>成功</span>
      <span class="bg-pill bg-warning"><span class="bg-dot" aria-hidden="true"></span>警告</span>
      <span class="bg-pill bg-error"><span class="bg-dot" aria-hidden="true"></span>エラー</span>
      <span class="bg-pill bg-info"><span class="bg-dot" aria-hidden="true"></span>情報</span>
    </div>
  </div>

  <div class="bg-group">
    <span class="bg-group-title">件数・通知</span>
    <div class="bg-row bg-row--wide">
      <span class="bg-icon-badge">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M10 20a2 2 0 004 0" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
        </svg>
        <span class="bg-count" aria-label="通知8件">8</span>
      </span>
      <span class="bg-icon-badge">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M4 6h16v12H4z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M4 7l8 6 8-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="bg-count bg-count--dot" aria-label="未読あり"></span>
      </span>
      <span class="bg-bubble" aria-label="99件以上">99+</span>
      <span class="bg-new">NEW</span>
    </div>
  </div>
</div>

バッジ