生きた数字のヒーロー

見出しの上に、小数点以下まで動き続けるカウンタ（今この瞬間の処理件数）。色の見せ場は右の斜めリボン1箇所に絞り、リードは本文級の大きさで読ませます。

ENGLISH

Live Counter Hero

約79行画面のかたち / 実用サンプル: LP・マーケページの一覧 →

プレビュー

自動再生

操作自動で再生されます。

デザインの要点

数字は飾りではなく事実の窓。小数点以下まで動かすと「いま生きている」ことが伝わる。手書きの数字は動かさない
色の見せ場はリボン1箇所。見出し・本文・ボタンは墨と白で、グラデーションと競わせない
リードは 18px 前後の本文級で。ヒーローの説明文を小さく薄くすると「読まれない前提」が透ける
数字は tabular-nums で桁幅を固定し、更新のたびに文字が左右へ揺れないようにする

プロのサイトでの実例

Stripe別サイト ↗「Global GDP running on Stripe」の小数7桁の生きた数字を見出しの上に置き、色の見せ場を右のリボンに絞る

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

数字は実データ（API の集計値）から出す。デモは基準値＋経過時間の疑似カウンタなので、実装では取得値と単位時間あたりの増分をサーバーから受け取る。

コード（コピーして使えます）

<div class="hln">
  <div class="hln-ribbon" aria-hidden="true">
    <div class="hln-card">
      <span class="hln-card-label">支払い完了</span>
      <strong>¥12,800</strong>
      <span class="hln-card-sub">ミナト工房 · 3 秒前</span>
    </div>
  </div>
  <div class="hln-body">
    <p class="hln-live"><span class="hln-live-dot" aria-hidden="true"></span>いま Rivet を通過した決済 <span class="hln-num" aria-live="off">1,284,532.0417</span> 件</p>
    <h1 class="hln-title">インターネットの<br>決済インフラ。</h1>
    <p class="hln-lead">スタートアップから上場企業まで、数百万の事業者が Rivet で売上を受け取り、送金し、新しい収益モデルを作っています。</p>
    <div class="hln-actions">
      <a class="hln-cta" href="#">今すぐ始める<span class="hln-cta-arrow" aria-hidden="true">→</span></a>
      <a class="hln-ghost" href="#">営業に相談する</a>
    </div>
    <p class="hln-fine">導入は最短 10 分。初期費用・月額固定費はありません。</p>
  </div>
</div>