§11-01
Testimonial カード
利用者の顔写真と引用コメントをカードで見せる。
導入前の訪問者に第三者の評価を示して不安を減らす。料金表や申し込みの直前など、判断を迫る場面に向く。
実装のポイント引用は具体的な数値や変化を含むものを選び、氏名・役職・顔写真をセットで出して信憑性を担保する。写真がない場合はイニシャルのアバターで代替する。
- CSS のみ
§11
信頼形成・ソーシャルプルーフ
Trust
- Patterns
- 12
- Demos
- 12
§11-03
数字 hero ("10,000+ users")
実績の数字を大きく掲げて信頼を示す。
利用者数や処理件数を一目で伝え、初めて訪れた人の不安を減らす。数字に根拠があり、更新し続けられるときに使う。
実装のポイント数値は tabular-nums で桁幅を揃え、「+」や単位で丸めた値に出典や集計日を添える。カウントアップ演出を入れるなら prefers-reduced-motion で無効化する。
- CSS のみ
§11-04
レビュースコア (★)
星の平均点と件数で評価を示す。
他の利用者の評価を数字と件数で示し、選ぶ前の判断材料にする。商品や店舗の一覧で、候補を比較する手がかりが欲しいときに置く。
実装のポイント平均値だけでなく星ごとの分布と件数を併記すると偏りが伝わる。星は四捨五入せず端数を部分塗りで表し、スクリーンリーダー向けに「5 点中 4.6」をテキストで持たせる。
- CSS のみ
- アクセシビリティ
§11-06
ケーススタディ / 事例
導入事例を課題と成果の記事として見せる。
似た状況の顧客がどう使って何を得たかを具体的に示す。導入検討者が自社に当てはまるか判断する材料になる。
実装のポイントカード全体をリンクにするなら a に href を与え、見出しを中心に読み上げられるよう構造を保つ。成果は数字 2〜3 個に絞ってファーストビューに出す。
- CSS のみ
§11-07
アワード / バッジ
受賞や認定のバッジで第三者評価を示す。
第三者の評価を短く示し、自己申告の説明より納得を得やすい。比較検討中の訪問者が判断材料を探す場面に置く。
実装のポイント受賞名・主催者・年を必ずセットで出し、古い受賞は年で判断できるようにする。公式バッジ画像を使う場合は利用規約とリンク先の表記に従う。
- CSS のみ
§11-08
Verified バッジ
本人確認済みのアカウントにチェック印を付ける。
本人や公式であることを示し、なりすましと見分けられるようにする。著名人や企業が投稿する場で、情報源の信頼を担保したいときに使う。
実装のポイントバッジは名前の直後に置き、アイコン単体では意味が伝わらないので aria-label や title で「認証済み」をテキスト化する。偽装を防ぐため絵文字や文字では代替しない。
- アクセシビリティ
残り 4 件のパターン実績数字 (commits/streak) / ステータスページ / プレス露出 / "as seen in" …
§11-09
実績数字 (commits/streak)
コミット数や継続日数などの実績を数字で示す。
積み重ねた成果をひと目で示し、継続の動機にもなる。プロフィールや公開ページで、本人の活動量を第三者に伝えたいときに使う。
実装のポイント大きな数値は 12.3k のように短縮し、正確な値は title やツールチップで補う。数値と単位ラベルを縦に並べ tabular-nums で桁幅を揃えると並べても崩れない。
- CSS のみ
§11-11
プレス露出 / "as seen in"
掲載されたメディアのロゴを並べて示す。
第三者に取り上げられた事実で信頼を補う。知名度がまだ低く、名前だけでは安心してもらえない段階で効く。
実装のポイント掲載媒体名は実際の記事へのリンクにすると裏付けになる。ロゴ画像は彩度を落として統一し、hover で元色に戻すとページの主張を邪魔しない。
- CSS のみ
§11-12
透明な pricing
追加費用や条件を隠さず価格と並べて示す。
後から費用が増える不安を取り除き、契約前に総額を把握できるようにする。価格比較で選ばれる段階の離脱を減らす。
実装のポイント税込/税抜、初期費用、解約料、超過料金を価格のすぐ横に明記する。注釈や小さな文字に回すと信頼を損ねるため、本文と同じ階層で並べる。
- CSS のみ