お客様の声 · お客様の声

パステル配色の柔らかいお客様の声セクション

ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/soft-testimonial/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年4月26日 UPDATED — 2026年10月18日 CATEGORY — お客様の声 LICENSE — CC0 1.0

プレビュー

AIへの指示文

ヘルスケア / ウェルネス系サービスのランディングページ向けに、柔らかい雰囲気のお客様の声セクションを作ってください。

要件:
- 配色: ベース #fdf7f2 + パステル peach #ffd7c4 / mint #c5ecd5 / lavender #ddd4f3 を使い分け。
- レイアウト: 大型カードを 1 + 中型カード 2 個の非対称グリッド（左に大きいの 1、右に小さいの 2 縦積み）。
- 各カードは角丸 24px、薄いパステル背景、影なし。
- 大型カードには大きなセリフ書体の引用符 "❝"（accent カラー）と、引用本文（21pxくらい）、下に丸い顔写真 + 名前 + 所属。
- 中型カードは引用本文小さめ + アバター + 名前のみ。
- 全体上部に手書き風アイコン or 単色イラストを少しだけ。
- 背景に大きな blur のパステル円（ambient glow）を 2-3 個重ねる。
- 統計バー（98% 満足度 / 12,000 名 / 4.9 ★）を下部に並べる。
- フォント: 見出しは少し丸めの sans（Manrope または Plus Jakarta）、本文は Inter / Noto Sans JP。
- フルレスポンシブ。

バリエーション

動画証言版

大型カードを動画プレースホルダー（aspect-ratio 4/3 + 中央プレイボタン）に差し替え。
アバターは動画下に名前・職業と並べて表示。

ロゴウォール併設版

セクション末尾に "Trusted by" + 6-8 個の導入ブランドロゴ（モノクロ + 透過）を 1 行で追加。

このプレビューのコード

HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の人物・組織・感想を配置した見本です。実際の取材・利用者の証言・評価・効果や掲載許諾の記録ではありません。

CC0 · 改変・商用利用自由 · revision 1f0713cd6b52

コードを表示

<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>パステル配色の柔らかいお客様の声セクション — Vibehaus プレビュー</title>
    <style>
      :root {
        --bg: #fdf7f2;
        --ink: #2a1f1a;
        --muted: #6e5e54;
        --quiet: #a89a8e;
        --peach: #ffd7c4;
        --peach-deep: #ff9d75;
        --mint: #c5ecd5;
        --mint-deep: #5fc183;
        --lavender: #ddd4f3;
        --lavender-deep: #9783d6;
        --gold: #ffe39a;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Manrope", "Inter", "Noto Sans JP",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.85;
        -webkit-font-smoothing: antialiased;
        position: relative;
        overflow-x: hidden;
      }
      /* Ambient pastel blobs — pure CSS, no images. They float behind the
         content giving the page a "warm room" feel. */
      .blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        z-index: 0;
        pointer-events: none;
        opacity: 0.85;
      }
      .blob.peach { width: 480px; height: 480px; top: -100px; right: -120px; background: var(--peach); }
      .blob.mint  { width: 380px; height: 380px; top: 30%; left: -120px; background: var(--mint); }
      .blob.lav   { width: 420px; height: 420px; bottom: -150px; right: 20%; background: var(--lavender); }

      .wrap {
        position: relative;
        z-index: 1;
        max-width: 1180px;
        margin: 0 auto;
        padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
      }

      .head { max-width: 56ch; margin-bottom: 2.5rem; }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--peach-deep);
        font-weight: 700;
        margin-bottom: 1rem;
      }
      .eyebrow::before {
        content: "♡";
        font-size: 1rem;
        color: var(--peach-deep);
      }
      .head h2 {
        margin: 0 0 1rem;
        font-size: clamp(2rem, 4.5vw, 3.4rem);
        line-height: 1.35;
        letter-spacing: 0;
        font-weight: 800;
      }
      .head h2 :lang(ja) { letter-spacing: 0; line-height: 1.4; }
      .head p {
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.85;
        color: var(--muted);
      }

      .grid {
        display: grid;
        gap: 1.25rem;
        grid-template-columns: 1fr;
      }
      @media (min-width: 920px) {
        .grid {
          grid-template-columns: 1.3fr 1fr;
        }
      }

      .card {
        position: relative;
        background: #fff;
        border-radius: 28px;
        padding: 2rem 2rem 1.75rem;
      }
      .card.lg {
        background: var(--peach);
        padding: clamp(2rem, 4vw, 2.75rem);
      }
      .card.sm.mint  { background: var(--mint); }
      .card.sm.lav   { background: var(--lavender); }
      .card.sm {
        padding: 1.5rem 1.5rem 1.25rem;
      }

      .col-side {
        display: grid;
        gap: 1.25rem;
        grid-template-rows: 1fr 1fr;
      }

      .quote-mark {
        font-family: "Playfair Display", Georgia, serif;
        font-size: 4rem;
        line-height: 0.5;
        margin: 0 0 0.75rem;
        color: var(--ink);
        opacity: 0.18;
      }
      .card.lg .quote-mark {
        font-size: 5rem;
        opacity: 0.22;
      }
      .quote {
        margin: 0 0 1.5rem;
        font-size: 1.05rem;
        line-height: 1.85;
        color: var(--ink);
        font-weight: 500;
      }
      .card.lg .quote {
        font-size: clamp(1.15rem, 1.7vw, 1.4rem);
        font-weight: 600;
        line-height: 1.7;
      }

      .author {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(42, 31, 26, 0.08);
      }
      .avatar {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        flex: none;
        background: var(--ink);
        display: grid;
        place-items: center;
        color: var(--bg);
        font-weight: 800;
        font-size: 1rem;
        font-family: inherit;
      }
      .card.lg .avatar { width: 54px; height: 54px; font-size: 1.1rem; }
      .author-name {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.3;
      }
      .author-role {
        margin: 0.15rem 0 0;
        font-size: 0.82rem;
        color: var(--muted);
        line-height: 1.5;
      }

      .stats {
        margin-top: clamp(2.5rem, 5vw, 3.5rem);
        padding: 1.5rem;
        background: #fff;
        border-radius: 28px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }
      @media (max-width: 640px) {
        .stats { grid-template-columns: 1fr; }
      }
      .stat {
        text-align: center;
        padding: 0.5rem;
      }
      .stat + .stat { border-left: 1px solid rgba(42, 31, 26, 0.08); }
      @media (max-width: 640px) {
        .stat + .stat { border-left: 0; border-top: 1px solid rgba(42, 31, 26, 0.08); padding-top: 1rem; }
      }
      .stat .num {
        display: block;
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.1;
      }
      .stat .lab {
        display: block;
        margin-top: 0.35rem;
        font-size: 0.78rem;
        color: var(--muted);
        letter-spacing: 0.04em;
      }
      .stat .num .star { color: var(--peach-deep); }
    [hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#f6f1e8;color:#211c17;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
html{overflow-x:clip}
body{overflow-x:clip}
.author-role{color:#594b43}
.demo-decoration{position:absolute;inset:0;overflow:clip;pointer-events:none}
</style>
  </head>
  <body>
<div class="demo-decoration" aria-hidden="true"><div class="blob peach" aria-hidden="true"></div><div class="blob mint" aria-hidden="true"></div><div class="blob lav" aria-hidden="true"></div></div>




    <div class="wrap">
      <div class="head">
        <p class="eyebrow">Voice — お客様の声（架空の見本）</p>
        <h2>毎日の悩みに、<br/>少しずつ寄り添うサービス。</h2>
        <p>導入前の不安、続けられるかどうか。実際に使ってくださっている方の率直な声をご紹介します。</p>
      </div>

      <div class="grid">
        <article class="card lg">
          <p class="quote-mark" aria-hidden="true">❝</p>
          <p class="quote">
            毎週通っていた整体が必要なくなりました。在宅勤務で凝り固まっていた肩と腰が、3 週間続けたストレッチで嘘みたいに軽くなって。何より、続けられる仕組みが本当によくできています。
          </p>
          <div class="author">
            <span class="avatar" aria-hidden="true">M</span>
            <div>
              <p class="author-name">三宅 麻里子 さん</p>
              <p class="author-role">38歳 · 在宅エンジニア · 利用4ヶ月</p>
            </div>
          </div>
        </article>

        <div class="col-side">
          <article class="card sm mint">
            <p class="quote-mark" aria-hidden="true">❝</p>
            <p class="quote">
              夜の寝つきが浅かったのに、寝る前のセッションを始めてから朝まで起きなくなりました。
            </p>
            <div class="author">
              <span class="avatar" aria-hidden="true">K</span>
              <div>
                <p class="author-name">川口 隆 さん</p>
                <p class="author-role">52歳 · 経営者</p>
              </div>
            </div>
          </article>

          <article class="card sm lav">
            <p class="quote-mark" aria-hidden="true">❝</p>
            <p class="quote">
              続けられない自分が嫌でしたが、5 分から始められるのが救いでした。
            </p>
            <div class="author">
              <span class="avatar" aria-hidden="true">S</span>
              <div>
                <p class="author-name">佐々木 ゆい さん</p>
                <p class="author-role">29歳 · デザイナー</p>
              </div>
            </div>
          </article>
        </div>
      </div>

      <div class="stats">
        <div class="stat">
          <span class="num">98<span style="font-size:.6em">%</span></span>
          <span class="lab">継続意向</span>
        </div>
        <div class="stat">
          <span class="num">12,400+</span>
          <span class="lab">アクティブ会員</span>
        </div>
        <div class="stat">
          <span class="num">4.9<span class="star">★</span></span>
          <span class="lab">App Store 評価</span>
        </div>
      </div>
    </div>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の人物・組織・感想を配置した見本です。実際の取材・利用者の証言・評価・効果や掲載許諾の記録ではありません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

推薦の声（テスティモニアル）は、本来「実績を並べる」セクションです。しかしヘルスケア、育児、美容といった領域では、見込み客が抱えているのは購買意欲ではなく不安です。そこで求められるのは実績の誇示ではなく、安心して大丈夫という空気そのものです。ソフトなテスティモニアルは、その空気を視覚で設計します。

「読みながら呼吸が整う」設計

通常のテスティモニアルは、数字とロゴと顔写真で「これだけ多くの人が選んだ」と圧をかけます。ソフト系は逆のアプローチを取ります。大きな角丸、影のない柔らかな浮遊感、丸みのある書体、抑えた彩度——これらが組み合わさると、セクションを見るだけで緊張がほどける。証言の内容を読む前に、視覚体験そのものが「ここは安全な場所だ」と伝えるのです。不安を抱えた見込み客にとって、この「読みながら呼吸が整う」感覚こそが成約への第一歩になります。

崩れる形数字とロゴと顔写真で圧をかける

これだけ多くの人が選んだ、という主張は不安を抱えた人にはただの圧です。急かされていると感じた瞬間、検討そのものが止まります。

効く形余白とトーンで呼吸を整える

大きな角丸、影のない浮遊感、抑えた彩度。証言を読む前に視覚体験そのものが安全だと伝えます。繊細な領域では、静けさ自体が信頼の証になります。

信頼は「静けさ」からも生まれる

説得力は、強い主張だけが作るものではありません。長い証言を一字一句載せるより、1〜2文に削ぎ落とした言葉のほうが、かえって誠実に響くことがあります。情報を盛らず、余白とトーンで「落ち着いて検討してください」という姿勢を示す——この静けさ自体が、繊細な領域では信頼の証になります。

仕上げの判断軸

角丸は16〜24pxと大きめに取り、シャープな矩形が生む硬さを避けること。

16〜24px角丸。シャープな矩形が生む硬さを避ける

1〜2文引用本文の長さ。長い体験談は別ページへ逃がす

奥行きはドロップシャドウではなく、パステルのぼかし円（ambient blur）で柔らかく表現します。書体はManropeやPlus Jakarta Sans、丸ゴシックなど丸みのあるものを選択。引用本文は短く保ち、長い体験談は別ページへ逃がします。

逆に、B2Bやエンタープライズのように実績の厚みが決め手になる領域には、この柔らかさは不向きです。

見本で試せる範囲

架空の人物・組織・感想を配置した見本です。実際の取材・利用者の証言・評価・効果や掲載許諾の記録ではありません。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。