お客様の声やレビュー、インタビューの発言を載せる時、ただ文章を並べるだけでは、引用であることが伝わりにくくなります。
この記事では、コピペするだけで使える引用文（blockquote）のデザインを20個まとめました。
シンプルな左ラインから、大きな引用符、吹き出し風、アバター付きのお客様の声まで、幅広く用意しています。
カード・バッジ・区切り線の記事と同じく、HTMLとCSSを分けて掲載しています。
今回も20個、結構なボリュームだね！
うん、使い方だけ先に説明するから、そのあとは気になるところから見てね。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。
続いて、HTMLのコードを、引用文を表示したい場所に貼り付けます。
引用文はblockquoteタグ、出典はfooterやciteタグで囲むと、意味のあるマークアップになります。
サンプルの文章や名前は、ご自身の内容に書き換えてください。
01. シンプルな左ライン引用
左側に線を添えただけの、もっとも基本の引用デザインです。
実際の見た目
使ってみて、想像以上に分かりやすかったです。
HTMLコード
<blockquote class="kts-quote01"> <p>使ってみて、想像以上に分かりやすかったです。</p> </blockquote>CSSコード
.kts-quote01 { margin: 0; padding: 4px 0 4px 18px; border-left: 4px solid #2E6F5E; color: #333; font-size: 15px; font-family: sans-serif; } .kts-quote01 p { margin: 0; }02. 大きな引用符付き
文頭に大きな引用符を添えた、定番のデザインです。
実際の見た目
細かいところまで丁寧に対応してもらえました。
HTMLコード
<blockquote class="kts-quote02"> <p>細かいところまで丁寧に対応してもらえました。</p> </blockquote>CSSコード
.kts-quote02 { position: relative; margin: 0; padding: 44px 20px 16px 20px; background: #F9FAFB; border-radius: 8px; color: #333; font-size: 15px; font-family: sans-serif; } .kts-quote02::before { content: "“"; position: absolute; top: -4px; left: 12px; font-size: 56px; color: #D97757; font-family: Georgia, serif; line-height: 1; } .kts-quote02 p { margin: 0; }03. 背景色付きの引用
薄い背景色を敷いた、やさしい印象の引用です。
実際の見た目
初めてでも迷わずに使えました。
HTMLコード
<blockquote class="kts-quote03"> <p>初めてでも迷わずに使えました。</p> </blockquote>CSSコード
.kts-quote03 { margin: 0; padding: 16px 20px; background: #EFF6F3; border-radius: 8px; color: #1F2933; font-size: 15px; font-family: sans-serif; } .kts-quote03 p { margin: 0; }04. 枠線で囲んだ引用
枠線で囲んで、内容を独立させた引用です。
実際の見た目
サポートの対応がとても早くて助かりました。
HTMLコード
<blockquote class="kts-quote04"> <p>サポートの対応がとても早くて助かりました。</p> </blockquote>CSSコード
.kts-quote04 { margin: 0; padding: 16px 20px; border: 1px solid #D8DCE1; border-radius: 8px; color: #333; font-size: 15px; font-family: sans-serif; } .kts-quote04 p { margin: 0; }05. アバター付きのお客様の声
丸いアバターと名前を添えた、お客様の声の定番デザインです。
実際の見た目
導入してから、作業時間が半分になりました。
HTMLコード
<blockquote class="kts-quote05"> <p>導入してから、作業時間が半分になりました。</p> <footer> <span class="avatar"></span> <span class="name">東京都 M様</span> </footer> </blockquote>CSSコード
.kts-quote05 { margin: 0; padding: 18px 20px; background: #fff; border: 1px solid #E4E4E4; border-radius: 10px; max-width: 320px; font-family: sans-serif; } .kts-quote05 p { margin: 0 0 14px; font-size: 15px; color: #333; } .kts-quote05 footer { display: flex; align-items: center; gap: 10px; } .kts-quote05 .avatar { width: 32px; height: 32px; border-radius: 50%; background: #D8DCE1; } .kts-quote05 .name { font-size: 13px; color: #8A94A0; }06. 上に引用符アイコンを置いた引用
上部に引用符を大きく置いた、印象的なレイアウトです。
実際の見た目
安心してお任せできました。
HTMLコード
<blockquote class="kts-quote06"> <span class="mark" aria-hidden="true">“</span> <p>安心してお任せできました。</p> </blockquote>CSSコード
.kts-quote06 { margin: 0; padding: 10px 20px 16px; text-align: center; color: #1F2933; font-size: 16px; font-family: sans-serif; } .kts-quote06 .mark { display: block; font-size: 48px; line-height: 1; color: #3F8CFF; font-family: Georgia, serif; } .kts-quote06 p { margin: 0; }07. 両端に引用符を置いた引用
文の前後を引用符で挟む、洋書のようなデザインです。
実際の見た目
やってみたら、意外と簡単でした。
HTMLコード
<blockquote class="kts-quote07"> <p>やってみたら、意外と簡単でした。</p> </blockquote>CSSコード
.kts-quote07 { margin: 0; padding: 10px 20px; color: #333; font-size: 16px; text-align: center; font-family: sans-serif; } .kts-quote07 p { margin: 0; display: inline; } .kts-quote07 p::before { content: "“"; font-size: 24px; color: #8A94A0; margin-right: 4px; } .kts-quote07 p::after { content: "”"; font-size: 24px; color: #8A94A0; margin-left: 4px; }08. 影付きカード風の引用
影を付けて、カードのように浮かせた引用です。
実際の見た目
期待以上の仕上がりでした。
HTMLコード
<blockquote class="kts-quote08"> <p>期待以上の仕上がりでした。</p> </blockquote>CSSコード
.kts-quote08 { margin: 0; padding: 18px 22px; background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.1); color: #333; font-size: 15px; font-family: sans-serif; } .kts-quote08 p { margin: 0; }09. ダークテーマの引用
暗い背景に合わせた配色の引用です。
実際の見た目
迷っていたけど、思い切って良かった。
HTMLコード
<blockquote class="kts-quote09"> <p>迷っていたけど、思い切って良かった。</p> </blockquote>CSSコード
.kts-quote09 { margin: 0; padding: 18px 22px; background: #1B1F24; border-left: 4px solid #4CE0D2; border-radius: 6px; color: #E6E9EC; font-size: 15px; font-family: sans-serif; } .kts-quote09 p { margin: 0; }10. グラデーションの左ライン引用
左のラインにグラデーションを使った、華やかな引用です。
実際の見た目
デザインの相談にも乗ってもらえました。
HTMLコード
<blockquote class="kts-quote10"> <p>デザインの相談にも乗ってもらえました。</p> </blockquote>CSSコード
.kts-quote10 { margin: 0; padding: 6px 0 6px 20px; background: linear-gradient(180deg, #6C63FF, #3F8CFF) left center / 5px 100% no-repeat; color: #333; font-size: 15px; font-family: sans-serif; } .kts-quote10 p { margin: 0; }11. 吹き出し風の引用
会話の吹き出しのように見せる引用です。
実際の見た目
質問にすぐ答えてもらえて安心でした。
HTMLコード
<blockquote class="kts-quote11"> <p>質問にすぐ答えてもらえて安心でした。</p> </blockquote>CSSコード
.kts-quote11 { position: relative; margin: 0 0 14px; padding: 16px 20px; background: #F1F3F5; border-radius: 12px; color: #333; font-size: 15px; max-width: 320px; font-family: sans-serif; } .kts-quote11 p { margin: 0; } .kts-quote11::after { content: ""; position: absolute; left: 28px; bottom: -10px; border-width: 10px 8px 0; border-style: solid; border-color: #F1F3F5 transparent transparent; }12. インタビューQ&A風
質問と回答を並べて見せる、インタビュー記事向けのデザインです。
実際の見た目
Q. 導入のきっかけは？
A. 手作業の集計に時間がかかっていたことです。
HTMLコード
<blockquote class="kts-quote12"> <p class="q">Q. 導入のきっかけは？</p> <p class="a">A. 手作業の集計に時間がかかっていたことです。</p> </blockquote>CSSコード
.kts-quote12 { margin: 0; padding: 16px 20px; background: #F9FAFB; border-radius: 8px; font-size: 14px; font-family: sans-serif; max-width: 340px; } .kts-quote12 p { margin: 0; } .kts-quote12 .q { font-weight: 700; color: #2E6F5E; margin-bottom: 6px; } .kts-quote12 .a { color: #333; }13. セリフ体・斜体の引用
セリフ体と斜体で、書籍の一節のような雰囲気を出します。
実際の見た目
The best way to predict the future is to create it.
HTMLコード
<blockquote class="kts-quote13"> <p>The best way to predict the future is to create it.</p> </blockquote>CSSコード
.kts-quote13 { margin: 0; padding: 10px 20px; border-left: 2px solid #8A94A0; color: #444; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 17px; } .kts-quote13 p { margin: 0; }14. 出典に下線を引いた引用
本文の下に、出典をさりげなく添えるデザインです。
実際の見た目
毎日の作業が、ずっと楽になりました。
— 田中様（会社員）
HTMLコード
<blockquote class="kts-quote14"> <p>毎日の作業が、ずっと楽になりました。</p> <cite>— 田中様（会社員）</cite> </blockquote>CSSコード
.kts-quote14 { margin: 0; padding: 4px 0; font-family: sans-serif; } .kts-quote14 p { margin: 0 0 8px; font-size: 15px; color: #333; } .kts-quote14 cite { display: inline-block; font-size: 13px; font-style: normal; color: #8A94A0; border-top: 1px solid #D8DCE1; padding-top: 6px; }15. 星評価付きレビュー引用
星の評価と一緒に、レビューを載せるデザインです。
実際の見た目
★★★★★使いやすくて、毎日活用しています。
HTMLコード
<blockquote class="kts-quote15"> <div class="stars" aria-label="評価5段階中5">★★★★★</div> <p>使いやすくて、毎日活用しています。</p> </blockquote>CSSコード
.kts-quote15 { margin: 0; padding: 16px 20px; background: #F9FAFB; border-radius: 8px; max-width: 300px; font-family: sans-serif; } .kts-quote15 .stars { color: #FFB020; font-size: 16px; letter-spacing: 2px; margin-bottom: 8px; } .kts-quote15 p { margin: 0; font-size: 14px; color: #333; }16. 日付付きの引用
発言した日付を添えて、時期を明確にする引用です。
実際の見た目
次回もぜひお願いしたいです。
HTMLコード
<blockquote class="kts-quote16"> <p>次回もぜひお願いしたいです。</p> <time datetime="2026-09-15">2026年9月15日</time> </blockquote>CSSコード
.kts-quote16 { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid #D97757; font-family: sans-serif; } .kts-quote16 p { margin: 0 0 6px; font-size: 15px; color: #333; } .kts-quote16 time { font-size: 12px; color: #8A94A0; }17. 中央寄せの引用
中央に揃えた、強調したい一言向けの引用です。
実際の見た目
まず、やってみよう。
HTMLコード
<blockquote class="kts-quote17"> <p>まず、やってみよう。</p> </blockquote>CSSコード
.kts-quote17 { margin: 0; padding: 24px 20px; text-align: center; border-top: 2px solid #1F2933; border-bottom: 2px solid #1F2933; color: #1F2933; font-size: 20px; font-weight: 700; font-family: sans-serif; } .kts-quote17 p { margin: 0; }18. 大きな文字のプルクオート
本文中の重要な一文を、大きく取り出して見せる形です。
実際の見た目
大切なのは、続けられる仕組みです。
HTMLコード
<blockquote class="kts-quote18"> <p>大切なのは、続けられる仕組みです。</p> </blockquote>CSSコード
.kts-quote18 { margin: 0; padding: 10px 0; color: #2E6F5E; font-size: 24px; font-weight: 800; line-height: 1.5; font-family: sans-serif; } .kts-quote18 p { margin: 0; }19. 角が折れた付箋風の引用
右上が折れたメモ用紙のような、やさしい印象の引用です。
実際の見た目
メモ：次回までに資料を送る。
HTMLコード
<blockquote class="kts-quote19"> <p>メモ：次回までに資料を送る。</p> </blockquote>CSSコード
.kts-quote19 { position: relative; margin: 0; padding: 18px 22px; background: #FFF8D6; color: #5A4A00; font-size: 15px; max-width: 300px; font-family: sans-serif; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); } .kts-quote19 p { margin: 0; }20. 手紙風の引用
罫線を引いた便せんのような、温かみのある引用です。
実際の見た目
いつもありがとうございます。おかげさまで、無事にオープンできました。
HTMLコード
<blockquote class="kts-quote20"> <p>いつもありがとうございます。おかげさまで、無事にオープンできました。</p> </blockquote>CSSコード
.kts-quote20 { margin: 0; padding: 0 22px; background-color: #FFFDF7; background-image: linear-gradient(transparent 29px, #EDE6D0 29px); background-size: 100% 30px; border: 1px solid #EDE6D0; border-radius: 6px; color: #4A3F28; font-size: 15px; line-height: 30px; max-width: 340px; font-family: sans-serif; } .kts-quote20 p { margin: 0; }カスタマイズの小ワザ
- 引用文はblockquoteタグ、出典はfooterやciteタグで囲むと、検索エンジンにも引用であることが伝わりやすくなります。
- 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。
- 05番のアバターは、グレーの丸を実際の写真に置き換えるか、background-imageで設定してください。
- お客様の声を掲載する際は、氏名や写真の掲載について、本人の許可を得てください。
- 文字の大きさや行間は、font-sizeとline-heightの数値を書き換えることで調整できます。
まとめ｜早見表
| 用途 | 該当する引用デザイン |
|---|---|
| シンプル・定番 | 01, 03, 04 |
| 引用符で見せる | 02, 06, 07 |
| お客様の声・レビュー | 05, 08, 15, 16 |
| 会話・インタビュー | 11, 12, 14 |
| 個性的・雰囲気重視 | 09, 10, 13, 19, 20 |
| 強調したい一言 | 17, 18 |
引用の見せ方だけで、信頼感が変わりそうだね！
うん、お客様の声を載せる時は、掲載の許可を取ることも忘れずにね。カードの記事と組み合わせるのもおすすめだよ。
20個の引用デザインは、お客様の声・レビュー・インタビューなど、用途に応じて使い分けられる。掲載する際は、出典の明記と本人の許可を忘れないことが大切である。
