こんにちは、Webデザイナーのmanaです！

今回はECサイトやLPのデザインに使える、ワンポイントあしらいのデザインを作成しました。

吹き出しやリボンなどおしゃれですぐ使えるデザインが、HTMLとCSSのコピペだけで初心者でも簡単に真似できるので、ぜひ試してみてください！

吹き出しのあしらいデザイン

汎用性の高い吹き出しのデザインです。ご自身のサイトに合わせて線の色や背景色をカスタマイズしてすぐ使えます。

線2本の吹き出し

オススメ

HTMLとCSSはこちら 

  <p class="callout1">オススメ</p>
          

.callout1 {
  width: fit-content;
  font-weight: bold;
  position: relative;
  padding: 0 1.5em;
}
.callout1::before, .callout1::after {
  content: '';
  background-color: #141414;
  width: 2px;
  height: 1em;
  position: absolute;
  transform: rotate(35deg);
  bottom: calc(50% - .5em);
}
.callout1::before {
  left: 0;
}
.callout1::after {
  right: 0;
}

線4本の吹き出し

イチオシ

HTMLとCSSはこちら 

  <p class="callout2">イチオシ</p>
          

.callout2 {
  width: fit-content;
  font-weight: bold;
  position: relative;
  padding: 0 1.5em;
  }
.callout2::before, .callout2::after {
  content: '';
  background-color: #141414;
  width: 2px;
  height: 1em;
  position: absolute;
  bottom: calc(50% - .5em);
  }
.callout2::before {
  transform: rotate(-35deg);
  left: 0;
  box-shadow: -10px -5px 0;
  }
.callout2::after {
  transform: rotate(35deg);
  right: 0;
  box-shadow: 10px -5px 0;
}

線の吹き出し

RECOMMENDED

HTMLとCSSはこちら 

  <p class="callout3">RECOMMENDED</p>
        

.callout3 {
  width: fit-content;
  font-weight: bold;
  position: relative;
  padding: .5em;
  border-bottom: 2px solid #141414;
}
.callout3::before, .callout3::after {
  position: absolute;
  content: '';
  border-style: solid;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.callout3::before {
  top: 100%;
  border-width: 10px;
  border-color: #fff transparent transparent transparent;
  z-index: 2;
}
.callout3::after {
  top: calc(100% + 1px);
  border-width: 12px;
  border-color: #141414 transparent transparent transparent;
  z-index: 1;
}

線とドットの吹き出し

おすすめアイテム

HTMLとCSSはこちら 

  <p class="callout4">おすすめアイテム</p>
        

.callout4 {
  width: fit-content;
  font-weight: bold;
  position: relative;
  padding: .5em;
  border-bottom: 2px solid #141414;
}
.callout4::before, .callout4::after {
  position: absolute;
  content: '';
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.callout4::before {
  border-left: 3px dotted #141414;
  height: 15px;
  z-index: 2;
}
.callout4::after {
  background-color: #fff;
  width: 20px;
  height: 15px;
  z-index: 1;
}

しっぽが切れた吹き出し

SPECIAL PLICE

HTMLとCSSはこちら 

  <p class="callout5">SPECIAL PLICE</p>
        

.callout5 {
  width: fit-content;
  font-weight: bold;
  position: relative;
  padding: .5em;
  border-bottom: 2px solid #141414;
}
.callout5::before, .callout5::after {
  position: absolute;
  content: '';
}
.callout5::before {
  border-left: 2px solid #141414;
  height: 15px;
  top: calc(100% - 1px);
  left: calc(20% + 3px);
  z-index: 2;
  transform: rotate(-40deg);
}
.callout5::after {
  background-color: #fff;
  width: 20px;
  height: 2px;
  top: 100%;
  left: 20%;
  z-index: 1;
}

四角形の吹き出し

SEASONAL ITEMS

HTMLとCSSはこちら 

  <p class="callout6">SEASONAL ITEMS</p>
        

.callout6 {
  width: fit-content;
  font-weight: bold;
  position: relative;
  padding: .5em 1em;
  border: 2px solid #141414;
}
.callout6::before, .callout6::after {
  position: absolute;
  content: '';
  border-style: solid;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.callout6::before {
  top: 100%;
  border-width: 10px;
  border-color: #fff transparent transparent transparent;
  z-index: 2;
}
.callout6::after {
  top: calc(100% + 1px);
  border-width: 12px;
  border-color: #141414 transparent transparent transparent;
  z-index: 1;
}

角丸四角形の吹き出し

LIMITED ITEMS

HTMLとCSSはこちら 

  <p class="callout7">LIMITED ITEMS</p>
        

.callout7 {
  width: fit-content;
  font-weight: bold;
  position: relative;
  padding: .5em 1em;
  background-color: #141414;
  color: #fff;
  border-radius: 100vw;
}
.callout7::before {
  position: absolute;
  content: '';
  border-style: solid;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  top: 100%;
  border-width: 12px;
  border-color: #141414 transparent transparent transparent;
  z-index: 1;
}

丸い枠の吹き出し

今だけ!

HTMLとCSSはこちら 

  <p class="callout8">今だけ!</p>
        

.callout8 {
  font-size: 24px;
  text-align: center;
  width: 5em;
  line-height: 5;
  font-weight: bold;
  border: 2px solid #141414;
  border-radius: 100vw;
  box-sizing: content-box;
  position: relative;
}
.callout8::before, .callout8::after {
  position: absolute;
  content: '';
  border-style: solid;
  transform: rotate(45deg);
  transform-origin: left bottom;
}
.callout8::before {
  bottom: 11px;
  right: 11px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #fff;
  z-index: 2;
}
.callout8::after {
  bottom: 9px;
  right: 9px;
  border-width: 12px 0 12px 17px;
  border-color: transparent transparent transparent #141414;
  z-index: 1;
}

丸い背景の吹き出し

注目!

HTMLとCSSはこちら 

  <p class="callout9">注目!</p>
        

.callout9 {
  font-size: 24px;
  text-align: center;
  width: 5em;
  line-height: 5;
  font-weight: bold;
  background-color: #141414;
  color: #fff;
  border-radius: 100vw;
  box-sizing: content-box;
  position: relative;
}
.callout9::after {
  position: absolute;
  content: '';
  bottom: 11px;
  right: 11px;
  border-width: 10px 0px 10px 15px;
  border-color: transparent transparent transparent #141414;
  border-style: solid;
  transform: rotate(45deg);
  transform-origin: left bottom;
}

しっぽが切れた丸い吹き出し

新着

HTMLとCSSはこちら 

  <p class="callout10">新着</p>
        

.callout10 {
  font-size: 24px;
  text-align: center;
  width: 5em;
  line-height: 5 !important;
  font-weight: bold;
  border: 2px solid #141414;
  border-radius: 100vw;
  box-sizing: content-box;
  position: relative;
}
.callout10::before, .callout10::after {
  position: absolute;
  content: '';
  bottom: 5px;
  right: 15px;
  background-color: #141414;
  transform: rotate(45deg);
  transform-origin: left bottom;
}
.callout10::before {
  width: 15px;
  height: 15px;
  background-color: #fff;
  z-index: 1;
}
.callout10::after {
  width: 15px;
  height: 2px;
  background-color: #141414;
  z-index: 2;
}

リボンやラベルのあしらいデザイン

リボンやラベルのデザインのあしらいです。商品画像と合わせて使用するのもオススメです。

両端に切り込みのあるリボン

SALE

HTMLとCSSはこちら 

    <p class="ribbon1">SALE</p>
          

.ribbon1 {
  width: fit-content;
  font-weight: bold;
  background-color: #141414;
  color: #fff;
  padding: 0 1em 0 1.5em;
  letter-spacing: .5em;
  line-height: 2;
  position: relative;
}
.ribbon1::before, .ribbon1::after {
  position: absolute;
  content: '';
  top: 0;
  z-index: 1;
}
.ribbon1::before {
  left: 0;
  border-width: 1em 0px 1em 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}
.ribbon1::after {
  right: 0;
  border-width: 1em 15px 1em 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

タグ風のデザイン

PICK UP

HTMLとCSSはこちら 

    <p class="ribbon2">PICK UP</p>
          

.ribbon2 {
  width: fit-content;
  font-weight: bold;
  background-color: #141414;
  color: #fff;
  padding: 0 1.5em;
  line-height: 2;
  position: relative;
}
.ribbon2::before {
  content: '';
  width: .5em;
  aspect-ratio: 1;
  background-color: #fff;
  border-radius: 100vw;
  position: absolute;
  left: .5em;
  top: calc(50% - .25em);
}
.ribbon2::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  z-index: 1;
  border-width: 1em 15px 1em 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

立体的なリボン

COMMING SOON

HTMLとCSSはこちら 

    <p class="ribbon3">COMMING SOON</p>
          

.ribbon3 {
  width: fit-content;
  font-weight: bold;
  border: 2px solid #141414;
  padding: 0 1.5em;
  line-height: 2 !important;
  position: relative;
}
.ribbon3::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  right: -2px;
  width: 15px;
  background-color: #141414;
  aspect-ratio: 1;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  transform: scaleX(2);
  transform-origin: right;
}
.ribbon3::after {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: -2px;
  width: 15px;
  background-color: #141414;
  aspect-ratio: 1;
  clip-path: polygon(0 0,100% 0,100% 100%);
  transform: scaleX(2);
  transform-origin: left;
}

両端の尖ったリボン

FAVORITE

HTMLとCSSはこちら 

  <p class="ribbon4">FAVORITE</p>
          

.ribbon4 {
  width: fit-content;
  font-weight: bold;
  background-color: #141414;
  color: #fff;
  padding: 0 .5em;
  line-height: 2;
  position: relative;
}
.ribbon4::before, .ribbon4::after {
  position: absolute;
  content: '';
  top: 0;
  z-index: 1;
}
.ribbon4::before {
  right: 100%;
  border-width: 1em 20px 1em 0px;
  border-color: transparent #141414 transparent transparent;
  border-style: solid;
}
.ribbon4::after {
  left: 100%;
  border-width: 1em 0px 1em 20px;
  border-color: transparent transparent transparent #141414;
  border-style: solid;
}

先の尖ったリボン

CHECK!

HTMLとCSSはこちら 

  <p class="ribbon5">CHECK!</p>
          

.ribbon5 {
  width: fit-content;
  font-weight: bold;
  background-color: #141414;
  color: #fff;
  padding: 0 .5em 0 1em;
  line-height: 2;
  position: relative;
}
.ribbon5::after {
  position: absolute;
  content: '';
  top: 0;
  left: 100%;
  z-index: 1;
  border-width: 1em 0px 1em 20px;
  border-color: transparent transparent transparent #141414;
  border-style: solid;
}

斜めのデザイン

新商品!

HTMLとCSSはこちら 

  <p class="ribbon6">新商品!</p>
          

.ribbon6 {
  width: fit-content;
  font-weight: bold;
  border: 2px solid #141414;
  padding: .3em 1.5em;
  transform: skewX(-15deg);
  box-shadow: 3px 3px 0 #141414;
}

その他のあしらいデザイン

囲み文字やメダルなど目立たせたいポイントに使えるあしらいのデザインです。

立体の囲み文字デザイン

数 量 限 定

HTMLとCSSはこちら 

  <p class="treatment1">
    <span>数</span>
    <span>量</span>
    <span>限</span>
    <span>定</span>
  </p>
          

.treatment1 {
  width: fit-content;
  font-weight: bold;
  display: flex;
  gap: 7px;
}
.treatment1 span {
  border: 2px solid #141414;
  box-shadow: 2px 2px 0 #141414;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
}

丸の囲み文字デザイン

期 間 限 定

HTMLとCSSはこちら 

  <p class="treatment2">
    <span>期</span>
    <span>間</span>
    <span>限</span>
    <span>定</span>
  </p>
          

.treatment2 {
  width: fit-content;
  font-weight: bold;
  letter-spacing: 0;
}
.treatment2 span {
  background-color: #141414;
  color: #fff;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  border-radius: 100vw;
  margin: -.25em;
}
.treatment2 span:nth-child(odd) {
  transform: translateY(.15em);
}

立体的なメダル

セール

HTMLとCSSはこちら 

  <p class="treatment3">セール</p>
          

.treatment3 {
  font-size: 24px;
  text-align: center;
  width: 5em;
  line-height: 5;
  font-weight: bold;
  border: 2px solid #141414;
  box-shadow: 3px 3px;
  border-radius: 100vw;
  transform: rotate(-10deg);
  box-sizing: content-box;
}

背景がずれたメダル

限定品

HTMLとCSSはこちら 

  <p class="treatment4">限定品</p>
          

.treatment4 {
  text-align: center;
  width: 5em;
  line-height: 5 !important;
  font-weight: bold;
  border-radius: 100vw;
  transform: rotate(-10deg);
  box-sizing: content-box;
  position: relative;
}
.treatment4::before, .treatment4::after {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 100vw;
  position: absolute;
}
.treatment4::before {
  border: 2px dotted #141414;
  z-index: -1;
  top: 0;
  left: 0;
}
.treatment4::after {
  background-color: #fff74c;
  z-index: -2;
  top: 0;
  left: 5px;
}

一部背景のアクセントのあるメダル

大特価

HTMLとCSSはこちら 

  <p class="treatment5">大特価</p>
          

.treatment5 {
  text-align: center;
  width: 5em;
  line-height: 5 !important;
  font-weight: bold;
  border: 2px solid #141414;
  border-radius: 100vw;
  overflow: hidden;
  box-sizing: content-box;
  position: relative;
}
.treatment5::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fff74c;
  z-index: -1;
  transform: translate(-50%, -50%) rotate(45deg);
  top: 0;
  left: 0;
}

2重線のメダル

HOT!

HTMLとCSSはこちら 

  <p class="treatment6">HOT!</p>
          

.treatment6 {
  text-align: center;
  width: 5em;
  line-height: 5 !important;
  font-weight: bold;
  box-sizing: content-box;
  position: relative;
}
.treatment6::before, .treatment6::after {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 20%;
  position: absolute;
  border: 2px solid #141414;
  z-index: -1;
  top: -2px;
  left: -2px;
}
.treatment6::before {
  transform: scaleY(.9);
}
.treatment6::after {
  transform: scaleX(.9);
}

背景がストライプのメダル

NEW

HTMLとCSSはこちら 

  <p class="treatment7">NEW</p>
          

.treatment7 {
  text-align: center;
  width: 5em;
  line-height: 5 !important;
  font-weight: bold;
  box-sizing: content-box;
  position: relative;
}
.treatment7::after {
  content: '';
  width: 85%;
  height: 85%;
  border-radius: 20%;
  position: absolute;
  border: 2px solid #141414;
  background-image: repeating-linear-gradient(#fff74c, #fff74c 5px, transparent 5px, transparent 10px);
  z-index: -1;
  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
  left: 50%;
}

商品を目立たせたり、魅力的に見せたりすることができるあしらいのデザインはECショップやLPにおいて結構重要です。

この記事では、そんなポイントで使えるあしらいのデザインのHTMLとCSSを紹介しました。コピペで使用できるので初心者の方もぜひ参考にしてみてください。

今後もまたいろいろなデザインを更新していく予定なので、次も記事を読んでくれると嬉しいです！

気に入ったらシェアしてね