コピペで使える吹き出しデザイン20個まとめ（会話・チャット風・アイコン付き）

会話形式の記事や、お客様の声、スタッフの一言など、吹き出しを使うと文章がぐっと親しみやすくなります。

この記事では、コピペするだけで使える吹き出しを20個まとめました。
シンプルな左右の吹き出しから、アイコン付き、メッセージアプリ風、考え中のもくもく型、付箋メモ風まで、場面ごとに使い分けられる種類を用意しています。

画像は使わず、HTMLとCSSだけで作っています。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

この記事のぼくたちの会話も、吹き出しだよね！

そうなんだ。このサイトはプラグインを使っているけど、プラグインなしでもCSSだけで吹き出しは作れるんだよ。いろいろな形を見てみてね。

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

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

セリフは、HTMLコードの中の文章を書き換えてください。
03・04番のアイコンは絵文字で仮置きしています。画像に変えたい時は、絵文字の部分を<img src=”画像のURL” alt=””>に置き換え、CSSでwidth:100%を指定してください。

01. シンプルな左向き

左側にしっぽが付いた、もっとも定番の吹き出しです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble01">今日の会議は15時からです。</div>

CSSコード

.kts-bubble01 { position: relative; display: inline-block; max-width: 80%; margin-left: 10px; padding: 12px 16px; background: #F3F4F6; border-radius: 10px; color: #1F2937; font-size: 15px; font-family: sans-serif; }
.kts-bubble01::before { content: ""; position: absolute; left: -10px; top: 14px; border: 6px solid transparent; border-right: 10px solid #F3F4F6; border-left: 0; }

02. シンプルな右向き

右側にしっぽが付いた、自分の発言を表すのに使いやすい吹き出しです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble02-wrap"><div class="kts-bubble02">今日の会議は15時からです。</div></div>

CSSコード

.kts-bubble02-wrap { text-align: right; }
.kts-bubble02 { position: relative; display: inline-block; max-width: 80%; margin-right: 10px; padding: 12px 16px; background: #DBEAFE; border-radius: 10px; color: #1E3A8A; font-size: 15px; text-align: left; font-family: sans-serif; }
.kts-bubble02::before { content: ""; position: absolute; right: -10px; top: 14px; border: 6px solid transparent; border-left: 10px solid #DBEAFE; border-right: 0; }

03. アイコン付き（左）

丸いアイコンと並べた、会話形式の記事でよく見るタイプです。

実際の見た目

🐶
今日の会議は15時からです。

HTMLコード

<div class="kts-bubble03"><div class="kts-bubble03-icon">🐶</div><div class="kts-bubble03-text">今日の会議は15時からです。</div></div>

CSSコード

.kts-bubble03 { display: flex; align-items: flex-start; gap: 14px; font-family: sans-serif; }
.kts-bubble03-icon { flex-shrink: 0; width: 52px; height: 52px; line-height: 52px; border-radius: 50%; background: #FEF3C7; text-align: center; font-size: 28px; }
.kts-bubble03-text { position: relative; padding: 12px 16px; background: #fff; border: 2px solid #F59E0B; border-radius: 10px; color: #1F2937; font-size: 15px; }
.kts-bubble03-text::before { content: ""; position: absolute; left: -12px; top: 16px; border: 7px solid transparent; border-right: 12px solid #F59E0B; border-left: 0; }
.kts-bubble03-text::after { content: ""; position: absolute; left: -8px; top: 18px; border: 5px solid transparent; border-right: 9px solid #fff; border-left: 0; }

04. アイコン付き（右）

アイコンを右側に置いた、03番と対になるタイプです。

実際の見た目

今日の会議は15時からです。
👨‍🔬

HTMLコード

<div class="kts-bubble04"><div class="kts-bubble04-text">今日の会議は15時からです。</div><div class="kts-bubble04-icon">👨‍🔬</div></div>

CSSコード

.kts-bubble04 { display: flex; align-items: flex-start; justify-content: flex-end; gap: 14px; font-family: sans-serif; }
.kts-bubble04-icon { flex-shrink: 0; width: 52px; height: 52px; line-height: 52px; border-radius: 50%; background: #E0E7FF; text-align: center; font-size: 28px; }
.kts-bubble04-text { position: relative; padding: 12px 16px; background: #fff; border: 2px solid #6366F1; border-radius: 10px; color: #1F2937; font-size: 15px; }
.kts-bubble04-text::before { content: ""; position: absolute; right: -12px; top: 16px; border: 7px solid transparent; border-left: 12px solid #6366F1; border-right: 0; }
.kts-bubble04-text::after { content: ""; position: absolute; right: -8px; top: 18px; border: 5px solid transparent; border-left: 9px solid #fff; border-right: 0; }

05. チャットアプリ風の会話

相手は左、自分は右に並ぶ、メッセージアプリのような会話セットです。

実際の見た目

明日の打ち合わせ、何時からでしたっけ？
15時からです！
ありがとうございます！

HTMLコード

<div class="kts-bubble05">
  <div class="kts-bubble05-you">明日の打ち合わせ、何時からでしたっけ？</div>
  <div class="kts-bubble05-me">15時からです！</div>
  <div class="kts-bubble05-you">ありがとうございます！</div>
</div>

CSSコード

.kts-bubble05 { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #E8EEF5; border-radius: 12px; font-family: sans-serif; }
.kts-bubble05 div { max-width: 75%; margin: 0; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.kts-bubble05-you { align-self: flex-start; background: #fff; color: #1F2937; border-top-left-radius: 4px; }
.kts-bubble05-me { align-self: flex-end; background: #22C55E; color: #fff; border-top-right-radius: 4px; }

06. 枠線だけの吹き出し

白地に線で囲んだ、すっきりとした印象の吹き出しです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble06">今日の会議は15時からです。</div>

CSSコード

.kts-bubble06 { position: relative; display: inline-block; max-width: 80%; margin-left: 12px; padding: 12px 16px; background: #fff; border: 2px solid #374151; border-radius: 10px; color: #1F2937; font-size: 15px; font-family: sans-serif; }
.kts-bubble06::before { content: ""; position: absolute; left: -12px; top: 14px; border: 7px solid transparent; border-right: 12px solid #374151; border-left: 0; }
.kts-bubble06::after { content: ""; position: absolute; left: -8px; top: 16px; border: 5px solid transparent; border-right: 9px solid #fff; border-left: 0; }

07. まんまるの吹き出し

大きな丸みでやわらかく見せる、かわいらしい吹き出しです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble07">今日の会議は15時からです。</div>

CSSコード

.kts-bubble07 { position: relative; display: inline-block; max-width: 80%; margin-left: 10px; padding: 14px 22px; background: #FCE7F3; border-radius: 999px; color: #9D174D; font-size: 15px; font-family: sans-serif; }
.kts-bubble07::before { content: ""; position: absolute; left: 6px; bottom: -6px; width: 16px; height: 16px; background: #FCE7F3; border-radius: 0 0 0 16px; transform: rotate(-20deg); }

08. 考え中のもくもく吹き出し

小さな丸を連ねて、心の中のつぶやきを表すタイプです。

実際の見た目

うーん、どうしよう…

HTMLコード

<div class="kts-bubble08">うーん、どうしよう…</div>

CSSコード

.kts-bubble08 { position: relative; display: inline-block; margin: 0 0 24px 30px; padding: 14px 22px; background: #fff; border: 2px solid #9CA3AF; border-radius: 30px; color: #4B5563; font-size: 15px; font-family: sans-serif; }
.kts-bubble08::before, .kts-bubble08::after { content: ""; position: absolute; background: #fff; border: 2px solid #9CA3AF; border-radius: 50%; }
.kts-bubble08::before { left: -6px; bottom: -14px; width: 14px; height: 14px; }
.kts-bubble08::after { left: -22px; bottom: -26px; width: 8px; height: 8px; }

09. 強調したい時の太枠タイプ

太い枠と大きな文字で、大事な一言を目立たせるタイプです。

実際の見た目

ここが一番大事！

HTMLコード

<div class="kts-bubble09">ここが一番大事！</div>

CSSコード

.kts-bubble09 { position: relative; display: inline-block; margin-left: 14px; padding: 12px 20px; background: #FEF08A; border: 4px solid #111827; border-radius: 6px; color: #111827; font-size: 20px; font-weight: 800; font-family: sans-serif; }
.kts-bubble09::before { content: ""; position: absolute; left: -18px; top: 12px; border: 10px solid transparent; border-right: 16px solid #111827; border-left: 0; }
.kts-bubble09::after { content: ""; position: absolute; left: -10px; top: 17px; border: 5px solid transparent; border-right: 9px solid #FEF08A; border-left: 0; }

10. 上向きしっぽの吹き出し

上にしっぽが付いた、画像や見出しの下に置くと自然なタイプです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble10">今日の会議は15時からです。</div>

CSSコード

.kts-bubble10 { position: relative; display: inline-block; margin-top: 10px; padding: 12px 16px; background: #ECFDF5; border-radius: 10px; color: #065F46; font-size: 15px; font-family: sans-serif; }
.kts-bubble10::before { content: ""; position: absolute; left: 24px; top: -10px; border: 6px solid transparent; border-bottom: 10px solid #ECFDF5; border-top: 0; }

11. 下向きしっぽの吹き出し

下にしっぽが付いた、ボタンや人物の上に置く時に使えるタイプです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble11">今日の会議は15時からです。</div>

CSSコード

.kts-bubble11 { position: relative; display: inline-block; margin-bottom: 10px; padding: 12px 16px; background: #FFEDD5; border-radius: 10px; color: #9A3412; font-size: 15px; font-family: sans-serif; }
.kts-bubble11::before { content: ""; position: absolute; left: 24px; bottom: -10px; border: 6px solid transparent; border-top: 10px solid #FFEDD5; border-bottom: 0; }

12. ダークカラーの吹き出し

黒系の背景で、引き締まった印象にしたい時のタイプです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble12">今日の会議は15時からです。</div>

CSSコード

.kts-bubble12 { position: relative; display: inline-block; max-width: 80%; margin-left: 10px; padding: 12px 16px; background: #1F2937; border-radius: 10px; color: #F9FAFB; font-size: 15px; font-family: sans-serif; }
.kts-bubble12::before { content: ""; position: absolute; left: -10px; top: 14px; border: 6px solid transparent; border-right: 10px solid #1F2937; border-left: 0; }

13. グラデーションの吹き出し

背景にグラデーションをかけた、華やかな吹き出しです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble13">今日の会議は15時からです。</div>

CSSコード

.kts-bubble13 { position: relative; display: inline-block; max-width: 80%; margin-bottom: 10px; padding: 12px 18px; background: linear-gradient(135deg, #8B5CF6, #EC4899); border-radius: 14px; color: #fff; font-size: 15px; font-weight: 700; font-family: sans-serif; }
.kts-bubble13::before { content: ""; position: absolute; left: 24px; bottom: -10px; border: 6px solid transparent; border-top: 10px solid #A35AF0; border-bottom: 0; }

14. 点線の吹き出し

点線で囲んだ、手作り感のあるやさしい印象のタイプです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble14">今日の会議は15時からです。</div>

CSSコード

.kts-bubble14 { position: relative; display: inline-block; max-width: 80%; margin-left: 12px; padding: 12px 16px; background: #FFFBEB; border: 2px dashed #F59E0B; border-radius: 12px; color: #78350F; font-size: 15px; font-family: sans-serif; }
.kts-bubble14::before { content: ""; position: absolute; left: -12px; top: 14px; border: 7px solid transparent; border-right: 12px solid #F59E0B; border-left: 0; }
.kts-bubble14::after { content: ""; position: absolute; left: -8px; top: 16px; border: 5px solid transparent; border-right: 9px solid #FFFBEB; border-left: 0; }

15. 名前付きの吹き出し

吹き出しの上に話している人の名前を添える、インタビュー記事向けのタイプです。

実際の見た目

山田さん
今日の会議は15時からです。

HTMLコード

<div class="kts-bubble15"><span class="kts-bubble15-name">山田さん</span><div class="kts-bubble15-text">今日の会議は15時からです。</div></div>

CSSコード

.kts-bubble15 { font-family: sans-serif; }
.kts-bubble15-name { display: block; margin: 0 0 4px 4px; font-size: 12px; font-weight: 700; color: #0369A1; }
.kts-bubble15-text { position: relative; display: inline-block; max-width: 80%; padding: 12px 16px; background: #E0F2FE; border-radius: 0 10px 10px 10px; color: #0C4A6E; font-size: 15px; }

16. 影付きで浮かぶ吹き出し

ふんわりとした影で、ページから浮いているように見せるタイプです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble16">今日の会議は15時からです。</div>

CSSコード

.kts-bubble16 { position: relative; display: inline-block; max-width: 80%; margin-left: 10px; padding: 14px 18px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); color: #1F2937; font-size: 15px; font-family: sans-serif; }
.kts-bubble16::before { content: ""; position: absolute; left: -10px; top: 14px; border: 6px solid transparent; border-right: 10px solid #fff; border-left: 0; }

17. 付箋メモ風

少し傾けた付箋のような形で、ちょっとしたメモを見せるタイプです。

実際の見た目

忘れずに資料を持参！

HTMLコード

<div class="kts-bubble17">忘れずに資料を持参！</div>

CSSコード

.kts-bubble17 { display: inline-block; padding: 16px 20px 20px; background: #FEF9C3; box-shadow: 2px 4px 8px rgba(0,0,0,.12); transform: rotate(-2deg); color: #713F12; font-size: 15px; font-family: sans-serif; }

18. 小さな一言ラベル

「おすすめ！」のように、短い言葉を添える小さな吹き出しです。

実際の見た目

おすすめ！

HTMLコード

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

CSSコード

.kts-bubble18 { position: relative; display: inline-block; margin-bottom: 8px; padding: 4px 12px; background: #EF4444; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; font-family: sans-serif; }
.kts-bubble18::before { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #EF4444; border-bottom: 0; }

19. 時刻と既読が付くチャット風

吹き出しの横に「既読」と時刻を添えた、メッセージアプリそっくりのタイプです。

実際の見た目

既読
15:02
了解です！

HTMLコード

<div class="kts-bubble19"><span class="kts-bubble19-meta">既読<br>15:02</span><div class="kts-bubble19-text">了解です！</div></div>

CSSコード

.kts-bubble19 { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; font-family: sans-serif; }
.kts-bubble19-meta { font-size: 11px; line-height: 1.3; color: #6B7280; text-align: right; }
.kts-bubble19-text { padding: 10px 14px; background: #86EFAC; border-radius: 16px 16px 4px 16px; color: #14532D; font-size: 15px; }

20. 手書き風のゆがんだ吹き出し

角の丸みをわざと不ぞろいにして、手書きのような味を出したタイプです。

実際の見た目

今日の会議は15時からです。

HTMLコード

<div class="kts-bubble20">今日の会議は15時からです。</div>

CSSコード

.kts-bubble20 { display: inline-block; max-width: 80%; padding: 14px 20px; background: #fff; border: 2px solid #44403C; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; color: #292524; font-size: 15px; font-family: sans-serif; }

カスタマイズの小ワザ

  • しっぽ（三角の部分）は、CSSの::before・::afterで描いています。色を変える時は、吹き出しの背景色と、しっぽのborderの色を両方そろえて変えてください。
  • 枠線付きの吹き出し（03・04・06・09・14番）は、しっぽを「外側の線用」と「内側の塗り用」の2枚重ねで作っています。
  • しっぽの位置は、topやleftの数値で上下左右に動かせます。
  • 1つのページで使う吹き出しは、2〜3種類までにしぼると、まとまりのある見た目になります。
  • 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面該当する吹き出し
シンプルに使いたい01, 02, 06
会話形式の記事03, 04, 15
メッセージアプリ風05, 19
かわいく見せたい07, 08, 14, 20
強調したい09, 13, 18
しっぽの向きを変えたい10, 11
引き締めたい12, 16
メモ・補足17

お客様の声も、吹き出しにすると読みたくなるね！

そうだね。ただ、吹き出しの中の文章は短めにするのがコツなんだ。長くなる時は、2つの吹き出しに分けると読みやすくなるよ。

20個の吹き出しは、画像を使わずHTMLとCSSだけで作れる。しっぽは疑似要素で描いており、色を変える時は背景としっぽの色をそろえて変更する。

関連記事

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

  2. コピペで使えるハンバーガーメニュー20個まとめ（スマホ用の三本線メニュー）

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

  4. コピペで使えるHTML・CSSボタン20個まとめ（そのまま貼るだけで使えます）

  5. コピペで使えるブログカード15選（HTML・CSSで作る関連記事リンクのデザイン）

  6. コピペで使える画像ホバーエフェクト20個まとめ（マウスを乗せると動く画像）

  7. PDFの結合・分割を無料でする方法(オンラインツールの注意点も解説)

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

  9. LPの構成要素と作り方の基本(ファーストビュー・CTAなど)