【コピペOK】おしゃれなラベル・タグ・バッジデザイン15選【HTML・CSS】

おしゃれなラベル・タグ・バッジデザイン15選 ラベル・タグ

Webサイトやブログで、「NEW」「おすすめ」「受付中」などの短い情報を目立たせたいときに便利なのが、ラベル・タグ・バッジです。

記事のカテゴリーや商品の特徴、受付状況などをコンパクトに表示でき、内容をひと目で伝えやすくなります。

今回は、HTMLとCSSをコピーして使える、おしゃれなラベル・タグ・バッジデザインを15種類紹介します。シンプルなものから、アイコン付きや吹き出し風のデザインまでまとめました。

シンプルで使いやすいラベル・タグデザイン

まずは、さまざまな記事やページに取り入れやすい、シンプルなラベル・タグデザインを紹介します。
装飾が控えめなので、サイトの雰囲気を問わず使いやすいデザインです。

DESIGN 01

ベーシックな塗りラベル

NEW 新着記事を公開しました

背景全体に色を付けた、シンプルで見やすいラベルデザインです。
「NEW」や「おすすめ」などの短い文字を入れ、新着情報や注目してほしい内容を示すときに使えます。

見本のうち、下のコードでコピーできるのは「NEW」のラベル部分です。
隣の文章は使用例として表示しています。

<span class="label-design-01">
  NEW
</span>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「NEW」を、表示したい文字へ書き換えてください。
DESIGN 02

枠線だけのラベル

カテゴリー 記事タイトル

背景色を付けず、文字の周りを細い線で囲んだラベルデザインです。装飾が控えめなので、カテゴリー名や短い補足をすっきりと表示できます。

見本のうち、下のコードでコピーできるのは「カテゴリー」のラベル部分です。隣の「記事タイトル」は使用例として表示しています。

<span class="label-design-02">
  カテゴリー
</span>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「カテゴリー」を、表示したい文字へ書き換えてください。
DESIGN 03

角丸ラベル

おすすめ スタンダードプラン

両端を大きく丸めた、やわらかい印象のラベルデザインです。
「おすすめ」や「注目」など、内容を目立たせながら親しみやすく見せたいときに使えます。

見本のうち、下のコードでコピーできるのは「おすすめ」のラベル部分です。
隣の「スタンダードプラン」は使用例として表示しています。

<span class="label-design-03">
  おすすめ
</span>
色の変更： CSS内の「#dfeef7」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「おすすめ」を、表示したい文字へ書き換えてください。
DESIGN 04

タグ型ラベル

デザイン 作品タイトル

片側を尖らせ、小さな穴を付けた値札のようなラベルデザインです。
カテゴリーや作品の種類、商品の特徴などを表示するときに使えます。

見本のうち、下のコードでコピーできるのは「デザイン」のラベル部分です。
隣の「作品タイトル」は使用例として表示しています。

<span class="label-design-04">
  デザイン
</span>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「デザイン」を、表示したい文字へ書き換えてください。
DESIGN 05

左線付きラベル

POINT 確認しておきたい内容

文字の左側に短い線を入れた、すっきりとしたラベルデザインです。
「POINT」や「MEMO」など、文章の中で補足や重要な内容を示したいときに使えます。

見本のうち、下のコードでコピーできるのは「POINT」のラベル部分です。
隣の「確認しておきたい内容」は使用例として表示しています。

<span class="label-design-05">
  POINT
</span>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「POINT」を、表示したい文字へ書き換えてください。

アイコンや形で目を引くラベル・タグデザイン

続いて、ドットやアイコン、吹き出しなどを取り入れたラベル・タグデザインを紹介します。
シンプルなラベルに少し変化を付け、特定の情報へ視線を集めたいときに使いやすいデザインです。

DESIGN 06

ドット付きラベル

お知らせ メンテナンスのお知らせ

文字の前に小さな丸を添えた、シンプルなドット付きラベルです。
お知らせや更新情報など、内容の種類をさりげなく分かりやすく示したいときに使えます。

見本のうち、下のコードでコピーできるのはドットを含む「お知らせ」のラベル部分です。
隣の「メンテナンスのお知らせ」は使用例として表示しています。

<span class="label-design-06">
  お知らせ
</span>
色の変更： CSS内の「#c98792」と「#faf8f8」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「お知らせ」を、表示したい文字へ書き換えてください。
DESIGN 07

アイコン付きラベル

人気 初心者向けWebデザイン入門

星のアイコンを文字の前に添えた、目に留まりやすいラベルデザインです。
人気の記事やおすすめの商品など、特に注目してほしい内容を示すときに使えます。

見本のうち、下のコードでコピーできるのは星を含む「人気」のラベル部分です。
隣の「初心者向けWebデザイン入門」は使用例として表示しています。

<span class="label-design-07">

  <span class="label-design-07__icon" aria-hidden="true">
    ★
  </span>

  人気

</span>
色の変更： CSS内の「#c98792」と「#faf8f8」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「人気」を、表示したい文字へ書き換えてください。
アイコンの変更： HTML内の「★」を、お好みの記号へ書き換えてください。
DESIGN 08

斜めカットラベル

FEATURE 今月の特集

両端を斜めにカットした、シャープで目を引くラベルデザインです。
特集記事やキャンペーンなど、通常の情報と少し差を付けて見せたいときに使えます。

見本のうち、下のコードでコピーできるのは「FEATURE」のラベル部分です。
隣の「今月の特集」は使用例として表示しています。

<span class="label-design-08">
  FEATURE
</span>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「FEATURE」を、表示したい文字へ書き換えてください。
DESIGN 09

吹き出し風ラベル

注目 プレミアムプラン

ラベルの下に小さな三角形を付けた、吹き出し風のデザインです。
商品名やプラン名など、特定の内容を指し示しながら注目させたいときに使えます。

見本のうち、下のコードでコピーできるのは「注目」の吹き出し部分です。
下の「プレミアムプラン」は使用例として表示しています。

<span class="label-design-09">
  注目
</span>
色の変更： CSS内の2か所にある「#dfeef7」を、同じカラーコードへ変更してください。
文字の変更： HTML内の「注目」を、表示したい文字へ書き換えてください。
DESIGN 10

リボン風ラベル

PICK UP デザインノート

両端に切り込みを入れた、リボンのような形のラベルデザインです。
おすすめの記事や注目の商品など、特に目立たせたい内容へ華やかさを加えられます。

見本のうち、下のコードでコピーできるのは「PICK UP」のリボン部分です。
下の「デザインノート」は使用例として表示しています。

<span class="label-design-10">
  PICK UP
</span>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「PICK UP」を、表示したい文字へ書き換えてください。

用途に合わせて使えるラベル・タグデザイン

最後に、カテゴリーや受付状況、手順、ランキングなど、表示する内容に合わせて使えるラベル・タグデザインを紹介します。
情報の種類や状態を分かりやすく整理したいときに便利です。

DESIGN 11

カテゴリータグ

Webデザインの基本
HTML CSS デザイン

複数のカテゴリーを横並びで表示できるタグデザインです。
記事の内容やジャンルを分類し、どのような情報が掲載されているのかを分かりやすく伝えられます。

見本のうち、下のコードでコピーできるのは「HTML」「CSS」「デザイン」の3つのタグ部分です。
上の「Webデザインの基本」は使用例として表示しています。不要なタグは削除し、必要に応じて追加できます。

<div class="label-design-11-tags">

  <span class="label-design-11">
    HTML
  </span>

  <span class="label-design-11">
    CSS
  </span>

  <span class="label-design-11">
    デザイン
  </span>

</div>
色の変更： CSS内の「#f3dfe3」「#dfeef7」「#eef0f3」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「HTML」「CSS」「デザイン」を、表示したい文字へ書き換えてください。
タグの追加・削除： 「label-design-11」が付いたspan要素を追加または削除して、タグの数を調整してください。
DESIGN 12

ステータスラベル

受付中 デザイン相談会

丸いドットと枠線を組み合わせた、現在の状態を伝えるためのラベルデザインです。
「受付中」「公開中」「終了」など、イベントやサービスの状況を分かりやすく表示できます。

見本のうち、下のコードでコピーできるのはドットを含む「受付中」のラベル部分です。
隣の「デザイン相談会」は使用例として表示しています。

<span class="label-design-12">
  受付中
</span>
色の変更： CSS内の「#e7f5f2」「#b8ddd5」「#62b8a8」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「受付中」を、表示したい文字へ書き換えてください。
DESIGN 13

ナンバーラベル

01 デザインを選ぶ

数字を丸い背景の中に入れた、順番を分かりやすく示せるラベルデザインです。
手順や流れ、複数のポイントを順番に紹介するときに使えます。

見本のうち、下のコードでコピーできるのは「01」のナンバーラベル部分です。
隣の「デザインを選ぶ」は使用例として表示しています。

<span class="label-design-13">
  01
</span>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
数字の変更： HTML内の「01」を、表示したい数字へ書き換えてください。
DESIGN 14

ランキングラベル

人気 No.1 フレグランスミスト

王冠の記号と「No.1」の文字を組み合わせた、ランキング表示に使いやすいラベルデザインです。
人気の商品やよく読まれている記事など、順位や評価を目立たせたいときに使えます。

見本のうち、下のコードでコピーできるのは王冠を含む「人気 No.1」のラベル部分です。
隣の「フレグランスミスト」は使用例として表示しています。

<span class="label-design-14">

  <span class="label-design-14__icon" aria-hidden="true">
    ♛
  </span>

  人気 No.1

</span>
色の変更： CSS内の「#b96f7c」「#faecef」「#e4b7bf」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「人気 No.1」を、表示したい文字へ書き換えてください。
アイコンの変更： HTML内の「♛」を、お好みの記号へ書き換えてください。
DESIGN 15

期間限定ラベル

期間限定 春のいちごフェア

左右に小さな切り込みを入れた、チケットのような形のラベルデザインです。
期間限定の商品やキャンペーン、季節のイベントなど、開催期間のある情報を目立たせたいときに使えます。

見本のうち、下のコードでコピーできるのは「期間限定」のラベル部分です。
隣の「春のいちごフェア」は使用例として表示しています。

<span class="label-design-15">
  期間限定
</span>
色の変更： CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更： HTML内の「期間限定」を、表示したい文字へ書き換えてください。

まとめ

今回は、HTMLとCSSをコピーして使える、ラベル・タグ・バッジデザインを15種類紹介しました。

シンプルな塗りラベルから、アイコン付きや吹き出し風、カテゴリーや受付状況を表示できるデザインまで、伝えたい内容に合ったものを選んでみてください。

文字や背景色を変更すれば、サイトの雰囲気に合わせて調整することもできます。

ラベルと組み合わせて情報を整理したい場合は、カードデザインや箇条書き・リストデザインもおすすめです。

お気に入りのデザインを取り入れて、必要な情報がひと目で伝わるページ作りに役立ててみてください。