お客様の声 · お客様の声
余白と墨線で読ませるお客様の声
顔写真も星評価も置かず、明朝体と非対称の配置だけで証言を読ませるお客様の声。欠点に触れた一言をあえて残すことで、他の二つの声の信憑性を上げます。
プレビュー
概要
侘び寂びは、16世紀の茶の湯で洗練された美意識です。均整より不均整、豪奢より簡素、完成より未完。千利休が茶室を狭くし、道具の景色に価値を見出したのは、引き算によってしか生まれない集中があるからでした。証言を読ませる場面は、この思想が最も効く場所のひとつです。
星と顔写真をやめる
一般的なお客様の声には、丸い顔写真、5つ星、企業ロゴの列が並びます。しかしそれらは、読み手が最初に疑う要素でもあります。星は誰でも書け、顔写真は素材集から買え、ロゴは取引の有無しか示しません。証言の説得力は、文章の質と具体性から生まれます。だからこの設計は装飾を全部外し、明朝体の引用と、姓一文字を入れた落款、所属と利用年数だけを残します。情報を減らすほど、残った言葉が読まれます。
欠点を一つ残す
三つの証言のうち一つは、書き出しに時間がかかる日もある、と製品の弱点に触れています。全部が絶賛の並びは、読み手の頭の中で自動的に「広告」に分類されます。留保が一つ混じると、その人が自分の言葉で話していると感じられ、残りの称賛の信憑性まで上がります。心理学ではこれを両面提示の効果と呼びますが、実務的にはもっと単純で、正直な人の話は信じられるというだけのことです。非対称の配置と、途中で止まる罫線も同じ思想です。整いすぎた面は、作り込まれた面として警戒されます。
崩れる形全部を絶賛で並べる
読み手の頭の中で自動的に広告に分類されます。整いすぎた面は作り込まれた面として警戒され、書かれている内容そのものが疑われます。
効く形留保を一つ混ぜる
三つのうち一つが弱点に触れていると、その人が自分の言葉で話していると感じられ、残りの称賛の信憑性まで上がります。
仕上げの判断軸
明朝体で長文を読ませるには行間2.0前後が必要です。ウェイトは細め、サイズは1.05rem以上を確保してください。
この様式が向くのは、落ち着きが信頼になる相手——工芸、宿泊、士業、長期契約のBtoBです。急いで判断させたいランディングページや、勢いで買わせる商材には向きません。余白は削らないこと。詰めた瞬間に、ただの地味なセクションに落ちます。
お客様の声の構成要素
使いどころ
- 落ち着いた層に向けた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社の導入事例ページの冒頭に向く。
よくある質問
顔写真がないと信憑性が落ちませんか?
欠点を書かせるのは危なくないですか?
明朝体は読みにくくないですか?
なぜ罫線を途中で止めるのですか?
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
雑誌風のお客様の声セクション
メインの引用をアンカーに、3列の小さな声と3つの数値指標を重ねた雑誌調のお客様の声セクション。セリフのイタリック・うっすらした罫線・赤いクォートマークで信頼感と読みごたえを両立します。
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。