事実で語る信頼帯
導入社数の実数・継続率・「No.1」に調査主体の但し書き・テキストロゴの並び。形容詞ではなく、検証できる事実だけで信頼を作る帯です。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 導入社数や継続率の実数を出せる B2B
- No.1 の調査主体・年月を明記できる場合
- ロゴ掲載の許諾がある企業一覧
- 避ける場面
- 時点や出典を書けない数字しか無いとき
- 形容詞（圧倒的・多数）で埋めたい場面
- 構成要素
- 帯の見出し
- 事実カード×3
- 数値と単位
- 時点・但し書き
- ロゴ一覧
- 持っている状態
- 通常
- キーボード
操作要素なし。数値と但し書きを読むだけ
- 支援技術
dl で項目名（dt）→数値（dd）→時点（2 つ目の dd）の順に読まれる。ロゴ一覧は ul に aria-label「導入企業」。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>
<dd class="tbf-when">2026年8月末時点</dd>
</div>
<div class="tbf-fact">
<dt>年間継続率</dt>
<dd><span class="tbf-n">99.2</span><span class="tbf-u">%</span></dd>
<dd class="tbf-when">有料契約・2025年度</dd>
</div>
<div class="tbf-fact">
<dt>クラウド労務管理 利用社数</dt>
<dd><span class="tbf-n tbf-n--rank">No.<b>1</b></span></dd>
<dd class="tbf-when">※ ミナト総研「クラウド労務管理ソフト市場調査」2026年3月</dd>
</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>