お客様の声 · お客様の声
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
プレビュー
概要
推薦の声(テスティモニアル)は、本来「実績を並べる」セクションです。しかしヘルスケア、育児、美容といった領域では、見込み客が抱えているのは購買意欲ではなく不安です。そこで求められるのは実績の誇示ではなく、安心して大丈夫という空気そのものです。ソフトなテスティモニアルは、その空気を視覚で設計します。
「読みながら呼吸が整う」設計
通常のテスティモニアルは、数字とロゴと顔写真で「これだけ多くの人が選んだ」と圧をかけます。ソフト系は逆のアプローチを取ります。大きな角丸、影のない柔らかな浮遊感、丸みのある書体、抑えた彩度——これらが組み合わさると、セクションを見るだけで緊張がほどける。証言の内容を読む前に、視覚体験そのものが「ここは安全な場所だ」と伝えるのです。不安を抱えた見込み客にとって、この「読みながら呼吸が整う」感覚こそが成約への第一歩になります。
崩れる形数字とロゴと顔写真で圧をかける
これだけ多くの人が選んだ、という主張は不安を抱えた人にはただの圧です。急かされていると感じた瞬間、検討そのものが止まります。
効く形余白とトーンで呼吸を整える
大きな角丸、影のない浮遊感、抑えた彩度。証言を読む前に視覚体験そのものが安全だと伝えます。繊細な領域では、静けさ自体が信頼の証になります。
信頼は「静けさ」からも生まれる
説得力は、強い主張だけが作るものではありません。長い証言を一字一句載せるより、1〜2文に削ぎ落とした言葉のほうが、かえって誠実に響くことがあります。情報を盛らず、余白とトーンで「落ち着いて検討してください」という姿勢を示す——この静けさ自体が、繊細な領域では信頼の証になります。
仕上げの判断軸
角丸は16〜24pxと大きめに取り、シャープな矩形が生む硬さを避けること。
奥行きはドロップシャドウではなく、パステルのぼかし円(ambient blur)で柔らかく表現します。書体はManropeやPlus Jakarta Sans、丸ゴシックなど丸みのあるものを選択。引用本文は短く保ち、長い体験談は別ページへ逃がします。
逆に、B2Bやエンタープライズのように実績の厚みが決め手になる領域には、この柔らかさは不向きです。
お客様の声の構成要素
使いどころ
- ヘルスケア・ウェルネス・育児・美容のLP
- 心理的安心感を強調したいB2C
- ターゲットが女性中心のサービス
- 真面目すぎる印象を和らげたい医療・教育
このデザインの分類
- カテゴリ
- お客様の声
- スタイル
- ソフト / エレガント / ウォーム / プレイフル
背景と狙いどころ
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 行で追加。
よくある質問
パステル配色は SEO や AdSense に影響する?
何件のレビューを並べると効果的?
顔写真がないと信頼性は下がる?
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。