お客様の声 · お客様の声
余白と墨線で読ませるお客様の声
顔写真も星評価も置かず、明朝体と非対称の配置だけで証言を読ませるお客様の声。欠点に触れた一言をあえて残すことで、他の二つの声の信憑性を上げます。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/wabi-sabi-testimonial/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
BtoBサービスのお客様の声セクションを、侘び寂びの美意識（余白・非対称・不完全さ）で作ってください。 要件: - 配色: 和紙色 #f3efe7、墨 #23201c、薄墨 #4c463e / #867f74、落款の朱 #9b3b2f。 - 背景は2枚の淡い radial-gradient だけで紙の斑を表す。画像やテクスチャは使わない。 - 本文は明朝体（Hiragino Mincho ProN → Yu Mincho → Noto Serif JP）。名前や肩書だけゴシックに落とす。 - 12カラムのグリッドを敷き、3つの証言を 1/span 7、6/span 7、2/span 7 と**ずらして**配置する。中央揃えにしない。 - 見出しの下に一筆の墨線を置く。border-radius を非対称（60% 40% 55% 45% / 100% 100% 0 0）にして筆の入りと抜きを作る。 - 証言と証言の間には、途中で止まる罫線（幅38%の1px線）を引く。全幅に引かない。 - 話者は顔写真ではなく、落款のような四角い枠に姓一文字を入れる。 - 星評価・数値・ロゴの敷き詰めは置かない。 - 3つのうち1つは、製品の欠点に触れた上でそれでも使い続けている、という内容にする。 - 余白を大きく取る（セクション間 clamp(2.5rem, 7vw, 5rem)）。 - 日本語の letter-spacing は0、引用の行間は2.0。
バリエーション
縦書き版
引用部分を writing-mode: vertical-rl にして右から左へ流す。 話者情報は横書きのまま下に置き、行長は20文字前後で折り返す。
単一証言版
3つを1つに絞り、画面の3分の1だけを使って大きく組む。 残りの余白には何も置かない。1社の導入事例ページの冒頭に向く。
このプレビューのコード
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 {
--washi: #f3efe7;
--washi-2: #eae4d8;
--sumi: #23201c;
--sumi-2: #4c463e;
--sumi-3: #867f74;
--seal: #9b3b2f;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
"Noto Serif JP", "Georgia", serif;
color: var(--sumi);
line-height: 1.85;
background-color: var(--washi);
/* Paper fibre: two very soft radial washes, no image. */
background-image:
radial-gradient(60% 40% at 15% 10%, rgba(150, 138, 118, 0.12) 0%, transparent 70%),
radial-gradient(50% 45% at 85% 80%, rgba(150, 138, 118, 0.1) 0%, transparent 70%);
-webkit-font-smoothing: antialiased;
}
.sheet {
max-width: 1040px;
margin: 0 auto;
padding: clamp(3rem, 9vw, 7rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vw, 6rem);
}
header.head { margin-bottom: clamp(2.5rem, 7vw, 5rem); }
.kicker {
margin: 0 0 1.2rem;
font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
font-size: 0.76rem;
line-height: 1.7;
letter-spacing: 0; /* 和文はトラッキングを開かない */
color: var(--sumi-3);
}
h1 {
margin: 0 0 1.4rem;
font-size: clamp(1.6rem, 4.2vw, 2.4rem);
line-height: 1.5;
font-weight: 400;
}
/* A single brush stroke: a tapered line drawn with border-radius. */
.stroke {
width: clamp(120px, 22vw, 220px);
height: 6px;
background: var(--sumi);
border-radius: 60% 40% 55% 45% / 100% 100% 0 0;
opacity: 0.82;
margin-bottom: 1.4rem;
}
.lede {
margin: 0;
max-width: 42ch;
font-size: 0.98rem;
line-height: 1.95;
color: var(--sumi-2);
}
/* Asymmetric bed — the point of the layout. Nothing is centred. */
.voices {
display: grid;
grid-template-columns: repeat(12, 1fr);
row-gap: clamp(2.5rem, 7vw, 5rem);
}
.voice { grid-column: span 12; }
.v1 { grid-column: 1 / span 7; }
.v2 { grid-column: 6 / span 7; }
.v3 { grid-column: 2 / span 7; }
@media (max-width: 820px) {
.v1, .v2, .v3 { grid-column: 1 / -1; }
}
blockquote {
margin: 0 0 1.1rem;
font-size: clamp(1.05rem, 2.4vw, 1.32rem);
line-height: 2;
text-indent: -0.6em;
}
blockquote::before { content: "「"; color: var(--sumi-3); }
blockquote::after { content: "」"; color: var(--sumi-3); }
.who {
display: flex;
align-items: center;
gap: 0.9rem;
font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.who .mark {
width: 46px; height: 46px;
flex: none;
border: 1px solid var(--seal);
border-radius: 3px;
color: var(--seal);
display: grid;
place-items: center;
font-size: 0.95rem;
line-height: 1.4;
opacity: 0.9;
}
.who .name { margin: 0; font-size: 0.9rem; line-height: 1.7; }
.who .org { margin: 0; font-size: 0.78rem; line-height: 1.7; color: var(--sumi-3); }
/* Hairline rule that stops short — the deliberate incompleteness. */
.voice + .voice { position: relative; }
.voice + .voice::before {
content: "";
position: absolute;
top: calc(-1 * clamp(1.25rem, 3.5vw, 2.5rem));
left: 0;
width: 38%;
height: 1px;
background: var(--sumi-3);
opacity: 0.45;
}
footer.foot {
margin-top: clamp(3rem, 8vw, 6rem);
padding-top: 1.5rem;
border-top: 1px solid rgba(134, 127, 116, 0.35);
display: flex;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
font-size: 0.78rem;
line-height: 1.8;
color: var(--sumi-3);
}
.foot a {
color: var(--sumi);
text-decoration: none;
border-bottom: 1px solid var(--sumi-3);
padding-bottom: 2px;
}
.foot a:hover { border-bottom-color: var(--seal); color: var(--seal); }
[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}
}
</style>
</head>
<body>
<div class="sheet">
<header class="head">
<p class="kicker">お客様の声（架空の見本）</p>
<div class="stroke" aria-hidden="true"></div>
<h1>使い続けた人の、短い言葉</h1>
<p class="lede">
長く使ってくださった三名に、いま感じていることをそのまま伺いました。人物と感想は、配置を示すための架空の文章です。
</p>
</header>
<div class="voices">
<section class="voice v1">
<blockquote>
派手な機能が増えないことが、いちばん助かっています。覚え直さなくていい道具は、それだけで仕事が速くなる。
</blockquote>
<div class="who">
<span class="mark" aria-hidden="true">寺</span>
<div>
<p class="name">寺田 志乃</p>
<p class="org">木工房 みなも · 主宰 / 利用3年</p>
</div>
</div>
</section>
<section class="voice v2">
<blockquote>
導入して半年、社内から質問が来なくなりました。説明しなくても伝わる画面というのは、こういうものなのだと思います。
</blockquote>
<div class="who">
<span class="mark" aria-hidden="true">近</span>
<div>
<p class="name">近藤 亮</p>
<p class="org">株式会社カワセ · 業務改善室 / 利用1年</p>
</div>
</div>
</section>
<section class="voice v3">
<blockquote>
完璧ではありません。書き出しに時間がかかる日もある。それでも戻らないのは、余白の取り方が私の仕事に合っているからです。
</blockquote>
<div class="who">
<span class="mark" aria-hidden="true">大</span>
<div>
<p class="name">大石 真由</p>
<p class="org">フリーランス編集者 / 利用4年</p>
</div>
</div>
</section>
</div>
<footer class="foot">
<span>人物・肩書・感想はすべて架空の見本です。</span>
<a href="#demo-link-0">ほかの声を読む →</a>
</footer>
</div>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の人物・組織・感想を配置した見本です。実際の取材・利用者の証言・評価・効果や掲載許諾の記録ではありません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>ほかの声を読む →の見本</h3>
<p>ほかの声を案内する入口の例です。掲載内容は架空で、実在する利用者の証言を追加取得する機能はありません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
侘び寂びは、16世紀の茶の湯で洗練された美意識です。均整より不均整、豪奢より簡素、完成より未完。千利休が茶室を狭くし、道具の景色に価値を見出したのは、引き算によってしか生まれない集中があるからでした。証言を読ませる場面は、この思想が最も効く場所のひとつです。
星と顔写真をやめる
一般的なお客様の声には、丸い顔写真、5つ星、企業ロゴの列が並びます。しかしそれらは、読み手が最初に疑う要素でもあります。星は誰でも書け、顔写真は素材集から買え、ロゴは取引の有無しか示しません。証言の説得力は、文章の質と具体性から生まれます。だからこの設計は装飾を全部外し、明朝体の引用と、姓一文字を入れた落款、所属と利用年数だけを残します。情報を減らすほど、残った言葉が読まれます。
欠点を一つ残す
三つの証言のうち一つは、書き出しに時間がかかる日もある、と製品の弱点に触れています。全部が絶賛の並びは、読み手の頭の中で自動的に「広告」に分類されます。留保が一つ混じると、その人が自分の言葉で話していると感じられ、残りの称賛の信憑性まで上がります。心理学ではこれを両面提示の効果と呼びますが、実務的にはもっと単純で、正直な人の話は信じられるというだけのことです。非対称の配置と、途中で止まる罫線も同じ思想です。整いすぎた面は、作り込まれた面として警戒されます。
崩れる形全部を絶賛で並べる
読み手の頭の中で自動的に広告に分類されます。整いすぎた面は作り込まれた面として警戒され、書かれている内容そのものが疑われます。
効く形留保を一つ混ぜる
三つのうち一つが弱点に触れていると、その人が自分の言葉で話していると感じられ、残りの称賛の信憑性まで上がります。
仕上げの判断軸
明朝体で長文を読ませるには行間2.0前後が必要です。ウェイトは細め、サイズは1.05rem以上を確保してください。
2.0明朝体の行間。長文を読ませるにはこれくらい要る
1.05rem〜本文サイズ。ウェイトは細めに保つ
1つ混ぜる留保の数。多いと不満の列に見える
この様式が向くのは、落ち着きが信頼になる相手——工芸、宿泊、士業、長期契約のBtoBです。急いで判断させたいランディングページや、勢いで買わせる商材には向きません。余白は削らないこと。詰めた瞬間に、ただの地味なセクションに落ちます。
見本で試せる範囲
架空の人物・組織・感想を配置した見本です。実際の取材・利用者の証言・評価・効果や掲載許諾の記録ではありません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
お客様の声の構成要素
使いどころ
- 落ち着いた層に向けたBtoBサービス
- 工芸・和・食・宿泊などの事業
- 長期利用者の証言を主役にしたい場面
- 士業・コンサルティングの実績紹介
- 派手な訴求を避けたいブランド
このデザインの分類
背景と狙いどころ
よくある質問
顔写真がないと信憑性が落ちませんか？
落款のような記名と、所属・利用年数を具体的に書けば信頼は担保できます。素材写真の外国人が並ぶ方が、かえって疑われます。
欠点を書かせるのは危なくないですか？
全部が絶賛だと広告として読まれます。一つだけ正直な留保を混ぜると、残りの称賛の信憑性が上がります。
明朝体は読みにくくないですか？
行間2.0前後を確保すれば長文でも読めます。ウェイトは細めを選び、文字サイズは1.05rem以上にしてください。
なぜ罫線を途中で止めるのですか？
完全な対称や全幅の線は緊張を生みます。あえて未完のままにするのが侘び寂びの手法で、視線に逃げ場ができます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
雑誌風のお客様の声セクション
メインの引用をアンカーに、3列の小さな声と3つの数値指標を重ねた雑誌調のお客様の声セクション。セリフのイタリック・うっすらした罫線・赤いクォートマークで信頼感と読みごたえを両立します。
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。