コピペで使えるバッジ・ラベル20個まとめ（NEW・SALE・残りわずかなど）

ネットショップや告知ページで「NEW」「SALE」「残りわずか」のような一言を添えたいのに、デザインを一から作るのは手間がかかります。

この記事では、コピペするだけで使えるバッジ・ラベルを20個まとめました。
商品を目立たせたい時、期間限定を伝えたい時、在庫状況を示したい時など、場面ごとに使い分けられる種類を用意しています。

カード・フォームパーツ・アラートの記事と同じく、HTMLとCSSを分けて掲載しています。

今回も20個、結構なボリュームだね！

うん、使い方だけ先に説明するから、そのあとは気になるところから見てね。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、バッジを表示したい場所に貼り付けます。

商品画像や見出しの角に重ねて使うタイプ（08番・09番など）は、親要素に position: relative を指定する必要があります。

その場合、サンプルの親要素（グレーの四角）を、ご自身の商品画像などに置き換えてください。

01. シンプルなNEWバッジ

もっとも定番の、新着を知らせる小さなバッジです。

実際の見た目

NEW

HTMLコード

<span class="kts-badge01">NEW</span>

CSSコード

.kts-badge01 { display: inline-block; padding: 3px 10px; background: #E14B4B; color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; font-family: sans-serif; }

02. SALEバッジ

セール中であることを、目立つ色で伝えるバッジです。

実際の見た目

SALE

HTMLコード

<span class="kts-badge02">SALE</span>

CSSコード

.kts-badge02 { display: inline-block; padding: 4px 12px; background: #D97757; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; border-radius: 999px; font-family: sans-serif; }

03. 残りわずかバッジ

在庫が少ないことを、注意を引く色で伝えるバッジです。

実際の見た目

残りわずか

HTMLコード

<span class="kts-badge03">残りわずか</span>

CSSコード

.kts-badge03 { display: inline-block; padding: 4px 12px; background: #FFF6DD; color: #8A6D00; border: 1px solid #F2D77A; font-size: 12px; font-weight: 700; border-radius: 4px; font-family: sans-serif; }

04. 人気No.1バッジ

王冠のようなアイコンを添えた、人気商品向けのバッジです。

実際の見た目

人気No.1

HTMLコード

<span class="kts-badge04"><span aria-hidden="true">👑</span>人気No.1</span>

CSSコード

.kts-badge04 { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: #1F2933; color: #FFD23F; font-size: 12px; font-weight: 700; border-radius: 999px; font-family: sans-serif; }

05. おすすめバッジ

枠線だけのシンプルな、控えめなおすすめ表示です。

実際の見た目

おすすめ

HTMLコード

<span class="kts-badge05">おすすめ</span>

CSSコード

.kts-badge05 { display: inline-block; padding: 3px 10px; color: #2E6F5E; border: 1.5px solid #2E6F5E; font-size: 12px; font-weight: 700; border-radius: 4px; font-family: sans-serif; }

06. 送料無料ラベル

配送に関する案内を、青系の落ち着いた色で伝えるラベルです。

実際の見た目

送料無料

HTMLコード

<span class="kts-badge06">送料無料</span>

CSSコード

.kts-badge06 { display: inline-block; padding: 4px 12px; background: #EAF2FE; color: #1D5FAD; font-size: 12px; font-weight: 700; border-radius: 4px; font-family: sans-serif; }

07. 期間限定ラベル（グラデーション）

グラデーションで華やかさを出した、期間限定向けのラベルです。

実際の見た目

期間限定

HTMLコード

<span class="kts-badge07">期間限定</span>

CSSコード

.kts-badge07 { display: inline-block; padding: 4px 14px; background: linear-gradient(135deg, #FF7A7A, #FFB020); color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; font-family: sans-serif; }

08. 商品画像の左上に付ける角バッジ

商品画像の角に重ねて使う、ショップでおなじみの配置です。

実際の見た目

NEW

HTMLコード

<div class="kts-badge08-wrap"> <span class="kts-badge08">NEW</span> </div>

CSSコード

.kts-badge08-wrap { position: relative; width: 200px; height: 130px; background: #D8DCE1; border-radius: 8px; } .kts-badge08 { position: absolute; top: 0; left: 0; padding: 4px 12px; background: #E14B4B; color: #fff; font-size: 12px; font-weight: 700; border-radius: 8px 0 8px 0; font-family: sans-serif; }

09. 右上の円形スタンプ

商品画像の右上に重ねる、丸いスタンプ型のバッジです。

実際の見た目

50%
OFF

HTMLコード

<div class="kts-badge09-wrap"> <span class="kts-badge09">50%<br>OFF</span> </div>

CSSコード

.kts-badge09-wrap { position: relative; width: 200px; height: 130px; background: #D8DCE1; border-radius: 8px; } .kts-badge09 { position: absolute; top: -12px; right: -12px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; text-align: center; background: #E14B4B; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.2; border-radius: 50%; font-family: sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

10. 矢印型タグ

右端が矢印のように尖った、ラベルやタグでよく使われる形です。

実際の見た目

カテゴリー

HTMLコード

<span class="kts-badge10">カテゴリー</span>

CSSコード

.kts-badge10 { display: inline-block; padding: 5px 22px 5px 12px; background: #2E6F5E; color: #fff; font-size: 12px; font-weight: 700; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); font-family: sans-serif; }

11. アウトライン角丸ラベル

背景を透明にして、枠線だけで見せるラベルです。

実際の見た目

在庫あり

HTMLコード

<span class="kts-badge11">在庫あり</span>

CSSコード

.kts-badge11 { display: inline-block; padding: 3px 12px; color: #1E7A44; border: 1.5px solid #1E7A44; font-size: 12px; font-weight: 700; border-radius: 999px; font-family: sans-serif; }

12. 状態ドット付きバッジ

小さな丸で、在庫や状態を色で示すバッジです。

実際の見た目

在庫あり

HTMLコード

<span class="kts-badge12"><span class="dot"></span>在庫あり</span>

CSSコード

.kts-badge12 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: #F1F3F5; color: #444; font-size: 12px; border-radius: 999px; font-family: sans-serif; } .kts-badge12 .dot { width: 8px; height: 8px; background: #2E9E5B; border-radius: 50%; }

13. 売り切れバッジ

購入できない状態を、グレーで控えめに伝えるバッジです。

実際の見た目

SOLD OUT

HTMLコード

<span class="kts-badge13">SOLD OUT</span>

CSSコード

.kts-badge13 { display: inline-block; padding: 4px 12px; background: #D8DCE1; color: #6B7580; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; border-radius: 4px; font-family: sans-serif; }

14. 点滅するNEWバッジ

ゆっくり点滅して、新着の存在感を高めるバッジです。

実際の見た目

NEW

HTMLコード

<span class="kts-badge14">NEW</span>

CSSコード

.kts-badge14 { display: inline-block; padding: 3px 10px; background: #E14B4B; color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; font-family: sans-serif; animation: kts-badge14-blink 1.4s ease-in-out infinite; } @keyframes kts-badge14-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

15. 通知件数バッジ

件数を丸で示す、メニューやアイコンの隅に添えるバッジです。

実際の見た目

お知らせ 3

HTMLコード

<div class="kts-badge15-wrap"> <span class="label">お知らせ</span> <span class="kts-badge15">3</span> </div>

CSSコード

.kts-badge15-wrap { position: relative; display: inline-block; padding: 8px 16px; background: #F1F3F5; border-radius: 6px; font-size: 14px; color: #1F2933; font-family: sans-serif; } .kts-badge15 { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; line-height: 20px; padding: 0 5px; text-align: center; background: #E14B4B; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; }

16. 斜めリボンバッジ

画像の左上に斜めに掛ける、リボン型のバッジです。

実際の見た目

SALE

HTMLコード

<div class="kts-badge16-wrap"> <span class="kts-badge16">SALE</span> </div>

CSSコード

.kts-badge16-wrap { position: relative; width: 200px; height: 130px; background: #D8DCE1; border-radius: 8px; overflow: hidden; } .kts-badge16 { position: absolute; top: 18px; left: -34px; width: 120px; padding: 4px 0; text-align: center; background: #E14B4B; color: #fff; font-size: 12px; font-weight: 800; transform: rotate(-45deg); font-family: sans-serif; }

17. ダークテーマのプレミアムバッジ

黒地に金色の文字で、高級感を出すバッジです。

実際の見た目

PREMIUM

HTMLコード

<span class="kts-badge17">PREMIUM</span>

CSSコード

.kts-badge17 { display: inline-block; padding: 4px 14px; background: #1B1F24; color: #E6C46A; border: 1px solid #E6C46A; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; border-radius: 4px; font-family: sans-serif; }

18. 半額・割引率ラベル

割引率を大きく見せる、値札風のラベルです。

実際の見た目

30%OFF

HTMLコード

<span class="kts-badge18"><span class="num">30</span>%OFF</span>

CSSコード

.kts-badge18 { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 12px; background: #FFF0EB; color: #D9481F; font-size: 12px; font-weight: 700; border-radius: 4px; font-family: sans-serif; } .kts-badge18 .num { font-size: 20px; font-weight: 800; }

19. アイコン付き情報タグ

アイコンとテキストを組み合わせた、さりげない案内タグです。

実際の見た目

翌日お届け

HTMLコード

<span class="kts-badge19"><span aria-hidden="true">🚚</span>翌日お届け</span>

CSSコード

.kts-badge19 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: #EAF2FE; color: #1D5FAD; font-size: 12px; font-weight: 700; border-radius: 999px; font-family: sans-serif; }

20. 2色に分かれたカテゴリーラベル

左右で色を分けて、カテゴリーと内容を並べて見せるラベルです。

実際の見た目

お知らせ10/15

HTMLコード

<span class="kts-badge20"><span class="cat">お知らせ</span><span class="body">10/15</span></span>

CSSコード

.kts-badge20 { display: inline-flex; font-size: 12px; font-weight: 700; border-radius: 4px; overflow: hidden; font-family: sans-serif; } .kts-badge20 .cat { padding: 4px 10px; background: #1F2933; color: #fff; } .kts-badge20 .body { padding: 4px 10px; background: #E4E7EB; color: #1F2933; }

カスタマイズの小ワザ

  • 商品画像に重ねるタイプ（08・09・16番）は、親要素にposition: relativeを指定してから使ってください。
  • 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。色の意味（赤=注意、緑=良い状態など）は揃えると直感的に伝わります。
  • 14番の点滅は、CSSのアニメーションのみで動作します。目に負担をかけないよう、多用は避けてください。
  • バッジを増やしすぎると、かえって目立たなくなります。1つの商品に付けるのは1〜2個までがおすすめです。
  • 文字を変えたい時は、HTMLコード内のテキスト部分を書き換えてください。

まとめ｜早見表

伝えたいこと該当するバッジ
新着・人気01, 04, 05, 14
セール・割引02, 07, 09, 16, 18
在庫・販売状況03, 11, 12, 13
配送・案内06, 19
画像に重ねる08, 09, 16
高級感・カテゴリー10, 17, 20
通知・件数15

一言添えるだけで、商品がぐっと目立つね！

うん、ただ付けすぎると逆効果だから、1〜2個に絞るのがコツだよ。チラシ記事のQRコードと合わせて、告知ページを作ってみてね。

20個のバッジは、新着・セール・在庫状況など、伝えたい内容に応じて使い分けられる。付けすぎず、1つの商品に1〜2個までにとどめると、目立たせたい一言が伝わりやすい。

関連記事

  1. コピペで使えるカードデザイン20個まとめ（商品・プロフィール・料金プラン）

  2. コピペで使えるHTML・CSS見出しデザイン20個まとめ（HTML・CSSを分けて掲載）

  3. コピペで使える区切り線（セパレーター）20個まとめ（波線・グラデーションなど）

  4. コピペで使える比較表・料金表デザイン20個まとめ（複数プランを並べて見せたい時に）

  5. コピペで使えるお知らせ・アラートボックス20個まとめ（成功・エラー・注意メッセージ）

  6. コピペで使えるテキストマーカー・文字装飾20個まとめ（蛍光ペン・下線・強調）

  7. コピペで使えるアコーディオン20個まとめ（よくある質問・FAQの折りたたみに）

  8. コピペで使える星評価・レビューデザイン20個まとめ（★5段階・口コミ表示）

  9. コピペで使える新着情報・お知らせ一覧20個まとめ（ニュース・更新履歴のリスト）