事実で語る信頼帯
導入社数の実数・継続率・「No.1」に調査主体の但し書き・テキストロゴの並び。形容詞ではなく、検証できる事実だけで信頼を作る帯です。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
デザインの要点
- 数字には必ず「いつ時点か」を添える（2026年8月末時点）。日付のない数字は更新されていないと疑われる
- No.1 は調査主体・調査名・年月の3点を但し書きに。書けないなら No.1 を出さない
- ロゴは同じ高さ・同じ灰色で揃える。企業ごとの色を出すと帯がにぎやかになり、事実が読めなくなる
- 「多くのお客さま」「圧倒的」のような形容詞は置かない。足すなら事実を足す
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<section class="tbf">
<p class="tbf-lead">数字で見る Hikari 労務</p>
<dl class="tbf-facts">
<div class="tbf-fact">
<dt>導入社数</dt>
<dd><span class="tbf-n">12,480</span><span class="tbf-u">社</span></dd>
<p class="tbf-when">2026年8月末時点</p>
</div>
<div class="tbf-fact">
<dt>年間継続率</dt>
<dd><span class="tbf-n">99.2</span><span class="tbf-u">%</span></dd>
<p class="tbf-when">有料契約・2025年度</p>
</div>
<div class="tbf-fact">
<dt>クラウド労務管理 利用社数</dt>
<dd><span class="tbf-n tbf-n--rank">No.<b>1</b></span></dd>
<p class="tbf-when">※ ミナト総研「クラウド労務管理ソフト市場調査」2026年3月</p>
</div>
</dl>
<p class="tbf-logos-label">ご利用いただいている企業（一部）</p>
<ul class="tbf-logos" aria-label="導入企業">
<li><span class="tbf-logo tbf-logo--serif">MINATO</span></li>
<li><span class="tbf-logo">Aoi Analytics</span></li>
<li><span class="tbf-logo tbf-logo--wide">KESTREL</span></li>
<li><span class="tbf-logo tbf-logo--serif">つむぎ商事</span></li>
<li><span class="tbf-logo">north&co.</span></li>
<li><span class="tbf-logo tbf-logo--wide">SORA</span></li>
</ul>
</section>