「NEW」「人気」「SALE」バッジ群
「NEW / 人気 / SALE / 期間限定 / 無料」など、視線を集める アテンション用のコーナーバッジ群 です。状態系バッジと違い、こちらは color:#fff の白文字に鮮やかな塗りつぶし背景を合わせ、強い太字（ font-weight:800 ）で目立たせています。
解説
「NEW / 人気 / SALE / 期間限定 / 無料」など、視線を集めるアテンション用のコーナーバッジ群です。状態系バッジと違い、こちらは color:#fff の白文字に鮮やかな塗りつぶし背景を合わせ、強い太字（font-weight:800）で目立たせています。角丸は 3px と小さめで、シールやタグのような硬い印象です。共通の bn クラスで形を揃え、修飾クラスで背景色だけを変える構造になっています。
使う場面
- EC の商品カードに付ける「SALE」「期間限定」
- 記事一覧の「NEW」「人気」ラベル
- キャンペーンや無料枠を強調したいバナー周り
強い色を使うため、1画面に多用すると注目が分散し効果が薄れます。本当に目立たせたい数件に絞るのがコツです。色は各修飾クラスの background を変えるだけで調整でき、ブランドのアクセントカラーに合わせられます。多くの場合バッジは画像や見出しに重ねて使うので、背景に重ねても文字が読めるよう、十分なコントラストを保つことが大切です。意味は文言で伝わるため、色は補助と考えましょう。
よくある質問
バッジの色は変えられますか
変えられます。bn--new などの修飾クラスの background を書き換えれば、各バッジの背景色を自由に設定できます。
たくさん並べても効果はありますか
強い色のバッジは多用すると注目が分散します。本当に目立たせたい数件に絞ると、視線を集める効果が活きます。