お客様の声 · お客様の声
雑誌風のお客様の声セクション
メインの引用をアンカーに、3列の小さな声と3つの数値指標を重ねた雑誌調のお客様の声セクション。セリフのイタリック・うっすらした罫線・赤いクォートマークで信頼感と読みごたえを両立します。
プレビュー
概要
雑誌の特集記事は、長年かけて「読ませる声の構成」を完成させてきました。大きな引用を主役に据え、小さな声を脇に添え、数値で締める——お客様の声セクションにこの構造を持ち込むのが、エディトリアル・テスティモニアルです。
カード並列が視線を迷わせる
カード型の導入事例は、情報としては整理されています。しかし、すべての声が同じ大きさのカードに収まっていると、訪問者は「どこに視線を置けばいいか」を判断できない。結果、全カードをさっと流し読みして離脱します。雑誌構造では、大見出し・主役の引用・補助の声・数値という情報の重み順がレイアウトそのものに表現されている。視線が自然な順路をたどるため、最後まで読み切る確率が上がります。
一つの声を主役にする勇気
10件の声を等価に並べるより、1件を大きく主役に据えるほうが記憶に残ります。人は「たくさんの証言」より「一つの具体的な物語」に動かされるからです。主役の引用には、最も具体的で、最も感情のこもった声を選ぶ。残りはその裏付けとして小さく添えれば十分です。
仕上げの判断軸
eyebrowを「Vol. 04」のような号数表記にすると、シリーズの継続感が出ます。見出しの一番伝えたい後半部分は、イタリックかアクセント色で視線を止める。写真素材がなければ、放射状グラデーションの抽象ポートレートで「人がいる」温度を最安で確保できます。セクション上下の1px罫線は紙面のブロック区切りを模し、カードに塗りや影を使わないためレイアウトが軽いまま。数値は「94%」の「%」だけを朱色にすると、死んだ数字ではなく声のトーンとして読めます。
使いどころ
- 信頼感と情報量の両方が必要な B2B SaaS やプロフェッショナルサービスの導入事例
- 料金ページの直前に挟んで、意思決定の後押しをしたいとき
- デザイン会社やエージェンシーの自社サイトで、センスを滲ませつつ実績を並べたいとき
このデザインの分類
- カテゴリ
- お客様の声
- スタイル
- エディトリアル / ラグジュアリー / ウォーム / ボールド
背景と狙いどころ
AIへの指示文
雑誌の特集ページのトーンで、B2B SaaSのお客様の声セクションを作ってください。 キャンバス: - 紙のようなオフホワイト (#faf8f3)、ブラックインク (#15130f)、ミュートインク (#6b645a)。 - アクセントカラーは渋い朱色 (#c84a2e)。 - 見出しは可変セリフ (Fraunces / Playfair Display / Tiempos / Georgia)、weight 400、斜体で強調。 - 本文・キャプション・ラベルは Inter。 レイアウト (max-width 1160px、中央寄せ): 1. ヘッダー: - eyebrow 行 "Customer Stories · Vol. 04"。小型 uppercase sans、左に 32px の朱色バー。 - 大見出し H1 (clamp 2.4rem → 4.5rem、weight 400、line-height 1.05)。2 行構成で、後半を `<em>` でイタリック+朱色。 - サブテキスト: サンセリフのミュート、最大 56ch。 2. メインの大きな引用 (2カラム): - 左: 4:5 のポートレート枠。人物写真がなければ、暖色系の放射状グラデーションで「それっぽい」抽象肖像を作る。うっすら走査線を `mix-blend-mode: multiply` で重ねて紙面ぽさを出す。 - 右: 巨大な引用符 `"` を朱色で見出しの上に置く(font-size 6rem、line-height 0.9)。本文は大きめ (clamp 1.3rem → 1.95rem) で serif+通常斜体、最大 2〜3 行。 - 引用の下に: 話者名 (ボールド)、役職と会社 (ミュート)、右に細いルール線を流して紙面の情報バーを模倣。 - セクション上下に 1px の薄い罫線。 3. 3カラムの小さな引用カード: - 各カードの上辺に 1px の濃い罫線。 - "01 · Agency" のような番号+カテゴリのラベル (uppercase、letter-spacing 0.26em)。 - セリフの短いタイトル (1.35rem、weight 500)、サンセリフの本文 (0.95rem)、下部にアバター丸+人物情報。 - アバターはグラデーションサークルでOK。 4. 下部に 3 つの指標行: - 上辺に濃い 1px の罫線。 - 各指標は小さな uppercase ラベル + 巨大なセリフ数値 (clamp 1.8rem → 2.8rem)。 - 数字の単位部分 (`%`, `h`, `+`) を `<em>` でイタリック+朱色にして、数値に表情を与える。 レスポンシブ: 760px 以下ですべて 1 カラム積み。hero-quote のポートレートとブロックは縦並びに。 JS不要、純粋 HTML/CSS。
バリエーション
動画ハイブリッド版
hero-quote のポートレート枠を `<video autoplay muted loop playsinline>` に置き換え、 同じ4:5比率で人物のインタビュー動画をサイレント再生。 右下に小さな `▶ with audio` のボタンを重ね、クリックで音声ON。
5案件ロングフォーム版
3カラムグリッドを5カードに拡張し、5つのケーススタディを時系列で並べる。 各カードに2枚目のメタ情報 (契約開始年月・業種・人数) を追加し、 下部の指標行は削除して「読み物の連なり」に振り切る。
よくある質問
ポートレート写真を用意できない場合は？
引用は架空のものでも大丈夫？
指標の数字はどう作る？
関連するデザイン
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
巨大斜体タイポのファッション・ルックブック
写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。