お客様の声 · お客様の声
雑誌風のお客様の声セクション
メインの引用をアンカーに、3列の小さな声と3つの数値指標を重ねた雑誌調のお客様の声セクション。セリフのイタリック・うっすらした罫線・赤いクォートマークで信頼感と読みごたえを両立します。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/editorial-testimonial/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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枚目のメタ情報 (契約開始年月・業種・人数) を追加し、 下部の指標行は削除して「読み物の連なり」に振り切る。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の人物・組織・感想を配置した見本です。実際の取材・利用者の証言・評価・効果や掲載許諾の記録ではありません。
コードを表示
<!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: #faf8f3;
--ink: #15130f;
--ink-muted: #6b645a;
--accent: #c84a2e;
--rule: rgba(21, 19, 15, 0.12);
--serif: "Fraunces", "Playfair Display", "Tiempos", Georgia,
"Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", "YuMincho",
serif;
--sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
"Yu Gothic", "Meiryo", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--serif);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
min-height: 100dvh;
}
.page {
max-width: 1160px;
margin-inline: auto;
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}
/* Eyebrow */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.25rem;
}
.eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--accent);
}
/* Display headline */
h1.display {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2rem, 5.2vw, 3.8rem);
line-height: 1.4;
letter-spacing: 0;
margin: 0 0 0.6rem;
max-width: 22ch;
font-variation-settings: "SOFT" 30, "opsz" 96;
}
h1.display em {
font-style: normal;
/* 「チ／ームの声」のように語の途中で割れないよう、ひとかたまりで折り返す */
display: inline-block;
color: var(--accent);
}
.intro-lede {
font-family: var(--sans);
color: var(--ink-muted);
max-width: 56ch;
font-size: 1.05rem;
margin: 0 0 3rem;
}
/* Featured quote */
.hero-quote {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
padding-block: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
margin-bottom: clamp(3rem, 5vw, 4rem);
}
.hero-quote .portrait {
aspect-ratio: 4 / 5;
border-radius: 2px;
background:
radial-gradient(circle at 30% 35%, #f3d8b8 0 28%, transparent 30%),
radial-gradient(circle at 55% 90%, #e8c4a0 0 55%, transparent 57%),
linear-gradient(180deg, #cdb9a0 0%, #9a8770 100%);
position: relative;
overflow: hidden;
}
.hero-quote .portrait::after {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
0deg,
transparent 0,
transparent 2px,
rgba(21, 19, 15, 0.04) 2px,
rgba(21, 19, 15, 0.04) 3px
);
mix-blend-mode: multiply;
}
.hero-quote blockquote {
margin: 0;
font-size: clamp(1.2rem, 2.3vw, 1.75rem);
line-height: 1.75;
letter-spacing: 0;
font-weight: 400;
position: relative;
padding-left: 0;
font-variation-settings: "SOFT" 30, "opsz" 72;
}
.hero-quote blockquote::before {
content: "\201C";
font-family: var(--serif);
font-size: 6rem;
line-height: 0.9;
color: var(--accent);
display: block;
margin-bottom: -1rem;
font-weight: 700;
}
.hero-quote .cite {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--rule);
font-family: var(--sans);
font-size: 0.88rem;
}
.hero-quote .cite strong { font-weight: 600; letter-spacing: 0; }
.hero-quote .cite .role { color: var(--ink-muted); }
.hero-quote .cite .rule { flex: 1; height: 1px; background: var(--rule); }
/* Three-column grid of smaller quotes */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.25rem, 3vw, 2rem);
}
.card {
border-top: 1px solid var(--ink);
padding-top: 1.25rem;
}
.card .num {
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 0.5rem;
}
.card h3 {
font-family: var(--serif);
font-weight: 500;
font-size: 1.35rem;
line-height: 1.5;
letter-spacing: 0;
margin: 0 0 0.5rem;
font-variation-settings: "SOFT" 30, "opsz" 36;
}
.card blockquote {
margin: 0;
font-family: var(--sans);
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink);
}
.card .cite {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1rem;
font-family: var(--sans);
font-size: 0.82rem;
}
.card .avatar {
width: 28px;
height: 28px;
border-radius: 999px;
background: linear-gradient(135deg, #d4b298 0%, #8f765e 100%);
flex-shrink: 0;
}
.card .avatar.b { background: linear-gradient(135deg, #b8c7d4 0%, #5e7689 100%); }
.card .avatar.c { background: linear-gradient(135deg, #d4c298 0%, #8f7f5e 100%); }
.card .cite strong { font-weight: 600; }
.card .cite .role { color: var(--ink-muted); }
/* Metrics row */
.metrics {
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 2rem;
border-top: 1px solid var(--ink);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.metrics .stat .label {
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 0.3rem;
}
.metrics .stat .value {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1;
letter-spacing: -0.02em;
font-variation-settings: "SOFT" 30, "opsz" 72;
}
.metrics .stat .value em { font-style: italic; color: var(--accent); }
@media (max-width: 760px) {
.hero-quote { grid-template-columns: 1fr; }
.grid { grid-template-columns: 1fr; }
.metrics { grid-template-columns: 1fr; gap: 1.5rem; }
}
[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}
}
.eyebrow{color:#b83e26}
</style>
</head>
<body>
<div class="page">
<span class="eyebrow">導入事例 · Vol. 04 · 架空の見本</span>
<h1 class="display">本当に使って届けている、<em>チームの声。</em></h1>
<p class="intro-lede">
3年目を迎えた今も、一番深く学べるのは「どこを曲げて自分たちの仕事に合わせたか」をお客様から聞くとき。名前を出せるチームから、直近のストーリーをお届けします。
</p>
<!-- Hero quote -->
<section class="hero-quote">
<div class="portrait" aria-hidden="true"></div>
<div>
<blockquote>
オンボーディングを終えた週末、4つのツールを一気に置き換えました。チームからは「なぜもっと早く導入しなかったのか」と。正直、同じセンスを持つ代替が他になかったから、としか答えようがありません。
</blockquote>
<div class="cite">
<strong>中川 亜衣子</strong>
<span class="role">プロダクト責任者 · Bureau Motif</span>
<span class="rule"></span>
</div>
</div>
</section>
<!-- Three-column quotes -->
<section class="grid">
<article class="card">
<div class="num">01 · エージェンシー</div>
<h3>レビューサイクルが半分に。</h3>
<blockquote>
非同期レビューのおかげで、週6回のミーティングが消えました。クライアントは行内にコメント、こちらは落ち着いた頭で返信。
Slack の DM 迷子が一件も発生しなくなりました。
</blockquote>
<div class="cite">
<span class="avatar" aria-hidden="true"></span>
<div>
<strong>Marcus Leroy</strong><br />
<span class="role">クリエイティブディレクター · Studio Ferro</span>
</div>
</div>
</article>
<article class="card">
<div class="num">02 · スケールアップ</div>
<h3>「ハンドオフ」が、消えた。</h3>
<blockquote>
以前はデザイナーとエンジニアが Notion 上でスペックを巡って争っていました。今は全員が同じアーティファクトを見ていて、「ハンドオフ」という言葉をこの2四半期、誰も口にしていません。
</blockquote>
<div class="cite">
<span class="avatar b" aria-hidden="true"></span>
<div>
<strong>友永 雄</strong><br />
<span class="role">エンジニアリングVP · Parallax</span>
</div>
</div>
</article>
<article class="card">
<div class="num">03 · フリーランス</div>
<h3>クライアントの反応が変わった。</h3>
<blockquote>
Figma のリンクを送る代わりにここでプレゼンしたら、報酬が3割上がりました。仕事の中身は同じ、見せ方だけ変えた。それがずっと効いています。
</blockquote>
<div class="cite">
<span class="avatar c" aria-hidden="true"></span>
<div>
<strong>Priya Iyer</strong><br />
<span class="role">独立デザイナー · piyer.studio</span>
</div>
</div>
</article>
</section>
<!-- Metrics -->
<section class="metrics">
<div class="stat">
<div class="label">毎週リリースしているチーム</div>
<div class="value"><em>2,400</em>+</div>
</div>
<div class="stat">
<div class="label">週あたりの平均削減時間</div>
<div class="value">5.8<em>h</em></div>
</div>
<div class="stat">
<div class="label">継続率 · 2年目</div>
<div class="value">94<em>%</em></div>
</div>
</section>
</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の描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
雑誌の特集記事は、長年かけて「読ませる声の構成」を完成させてきました。大きな引用を主役に据え、小さな声を脇に添え、数値で締める——お客様の声セクションにこの構造を持ち込むのが、エディトリアル・テスティモニアルです。
カード並列が視線を迷わせる
カード型の導入事例は、情報としては整理されています。しかし、すべての声が同じ大きさのカードに収まっていると、訪問者は「どこに視線を置けばいいか」を判断できない。結果、全カードをさっと流し読みして離脱します。雑誌構造では、大見出し・主役の引用・補助の声・数値という情報の重み順がレイアウトそのものに表現されている。視線が自然な順路をたどるため、最後まで読み切る確率が上がります。
崩れる形10件を等価に並べる
情報としては整理されていますが、読み手はどこに視線を置けばいいかを判断できません。結果、全部を流し読みして離脱します。
効く形1件を主役に据える
人は「たくさんの証言」より一つの具体的な物語に動かされます。最も具体的で感情のこもった声を大きく置き、残りは裏付けとして小さく添えれば十分です。
一つの声を主役にする勇気
10件の声を等価に並べるより、1件を大きく主役に据えるほうが記憶に残ります。人は「たくさんの証言」より「一つの具体的な物語」に動かされるからです。主役の引用には、最も具体的で、最も感情のこもった声を選びます。残りはその裏付けとして小さく添えれば十分です。
仕上げの判断軸
eyebrowを「Vol. 04」のような号数表記にすると、シリーズの継続感が出ます。見出しの一番伝えたい後半部分は、イタリックかアクセント色で視線を止める。写真素材がなければ、放射状グラデーションの抽象ポートレートで「人がいる」温度を最安で確保できます。セクション上下の1px罫線は紙面のブロック区切りを模し、カードに塗りや影を使わないためレイアウトが軽いまま。
数値は 94% の記号部分だけを朱色にすると、死んだ数字ではなく声のトーンとして読めます。
見本で試せる範囲
架空の人物・組織・感想を配置した見本です。実際の取材・利用者の証言・評価・効果や掲載許諾の記録ではありません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
お客様の声の構成要素
使いどころ
- 信頼感と情報量の両方が必要な B2B SaaS やプロフェッショナルサービスの導入事例
- 料金ページの直前に挟んで、意思決定の後押しをしたいとき
- デザイン会社やエージェンシーの自社サイトで、センスを滲ませつつ実績を並べたいとき
このデザインの分類
背景と狙いどころ
よくある質問
ポートレート写真を用意できない場合は？
このプロンプトは放射状グラデーションだけでも成立するように作っています。実写を使わずとも「人物がいそう」な温度感が出ます。写真が揃ったら差し替えればOK。
引用は架空のものでも大丈夫？
プロトタイプ段階では構いませんが、本番公開時には必ず実在の顧客の引用に差し替えてください。日本の景品表示法・EUのデジタルサービス法など、架空証言は法的リスクです。
指標の数字はどう作る？
自社データから具体的な数値を出すのが望ましいです。出しにくい場合は範囲表記 （例「2,000+ チーム」） にして精度を下げる代わりに誠実さを保ちます。丸めすぎた数字 (10,000) は逆に疑われます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
余白と墨線で読ませるお客様の声
顔写真も星評価も置かず、明朝体と非対称の配置だけで証言を読ませるお客様の声。欠点に触れた一言をあえて残すことで、他の二つの声の信憑性を上げます。
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
巨大斜体のファッション作品集
写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。