お客様の声 · お客様の声

余白と墨線で読ませるお客様の声

プレビュー

vibe.itlibra.com/preview/wabi-sabi-testimonial/

概要

侘び寂びは、16世紀の茶の湯で洗練された美意識です。均整より不均整、豪奢より簡素、完成より未完。千利休が茶室を狭くし、道具の景色に価値を見出したのは、引き算によってしか生まれない集中があるからでした。証言を読ませる場面は、この思想が最も効く場所のひとつです。

星と顔写真をやめる

一般的なお客様の声には、丸い顔写真、5つ星、企業ロゴの列が並びます。しかしそれらは、読み手が最初に疑う要素でもあります。星は誰でも書け、顔写真は素材集から買え、ロゴは取引の有無しか示しません。証言の説得力は、文章の質と具体性から生まれます。だからこの設計は装飾を全部外し、明朝体の引用と、姓一文字を入れた落款、所属と利用年数だけを残します。情報を減らすほど、残った言葉が読まれます

欠点を一つ残す

三つの証言のうち一つは、書き出しに時間がかかる日もある、と製品の弱点に触れています。全部が絶賛の並びは、読み手の頭の中で自動的に「広告」に分類されます。留保が一つ混じると、その人が自分の言葉で話していると感じられ、残りの称賛の信憑性まで上がります。心理学ではこれを両面提示の効果と呼びますが、実務的にはもっと単純で、正直な人の話は信じられるというだけのことです。非対称の配置と、途中で止まる罫線も同じ思想です。整いすぎた面は、作り込まれた面として警戒されます。

崩れる形全部を絶賛で並べる

読み手の頭の中で自動的に広告に分類されます。整いすぎた面は作り込まれた面として警戒され、書かれている内容そのものが疑われます。

効く形留保を一つ混ぜる

三つのうち一つが弱点に触れていると、その人が自分の言葉で話していると感じられ、残りの称賛の信憑性まで上がります。

仕上げの判断軸

明朝体で長文を読ませるには行間2.0前後が必要です。ウェイトは細め、サイズは1.05rem以上を確保してください。

2.0明朝体の行間。長文を読ませるにはこれくらい要る
1.05rem〜本文サイズ。ウェイトは細めに保つ
1つ混ぜる留保の数。多いと不満の列に見える

この様式が向くのは、落ち着きが信頼になる相手——工芸、宿泊、士業、長期契約のBtoBです。急いで判断させたいランディングページや、勢いで買わせる商材には向きません。余白は削らないこと。詰めた瞬間に、ただの地味なセクションに落ちます。

お客様の声の構成要素

お客様の声の構成要素 氏名・所属 顔写真・ロゴ 氏名・所属 顔写真・ロゴ 出自の書けない声は、載せないほうがよい 「A社 担当者様」は、誰も検証できないので信頼の材料にならない
お客様の声で効くのは文章の巧さではなく誰が言ったかが分かることです。氏名・所属・顔のうち、出せるものを最大限出してください。

使いどころ

  • 落ち着いた層に向けたBtoBサービス
  • 工芸・和・食・宿泊などの事業
  • 長期利用者の証言を主役にしたい場面
  • 士業・コンサルティングの実績紹介
  • 派手な訴求を避けたいブランド

このデザインの分類

カテゴリ
お客様の声
スタイル
侘び寂び / ミニマル / エレガント / ソフト / エディトリアル

背景と狙いどころ

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社の導入事例ページの冒頭に向く。

よくある質問

顔写真がないと信憑性が落ちませんか?
落款のような記名と、所属・利用年数を具体的に書けば信頼は担保できます。素材写真の外国人が並ぶ方が、かえって疑われます。
欠点を書かせるのは危なくないですか?
全部が絶賛だと広告として読まれます。一つだけ正直な留保を混ぜると、残りの称賛の信憑性が上がります。
明朝体は読みにくくないですか?
行間2.0前後を確保すれば長文でも読めます。ウェイトは細めを選び、文字サイズは1.05rem以上にしてください。
なぜ罫線を途中で止めるのですか?
完全な対称や全幅の線は緊張を生みます。あえて未完のままにするのが侘び寂びの手法で、視線に逃げ場ができます。

この画面を実装する

動くサンプルとコピペできるコードを、技術別にまとめています。