データ可視化・ダッシュボード
統計カード
ラベル・大きな数値・前期比の増減（増は緑↑／減は朱↓）・小さなスパークラインをまとめたKPIカード。横に2〜3枚並べてダッシュボードの要約を示します。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
コード（コピーして使えます）
<div class="sc-wrap">
<div class="sc-card">
<span class="sc-label">売上高</span>
<span class="sc-value">¥8.42<span class="sc-value-unit">M</span></span>
<div class="sc-foot">
<span class="sc-delta sc-up">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
<path d="M5 8V2M2.5 4.5L5 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>12.4%
</span>
<svg class="sc-spark" viewBox="0 0 60 20" preserveAspectRatio="none" aria-hidden="true">
<polyline points="0,15 10,13 20,14 30,9 40,10 50,5 60,3" fill="none" stroke="#2a7a45" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<div class="sc-card">
<span class="sc-label">新規登録</span>
<span class="sc-value">1,284</span>
<div class="sc-foot">
<span class="sc-delta sc-up">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
<path d="M5 8V2M2.5 4.5L5 2l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>5.1%
</span>
<svg class="sc-spark" viewBox="0 0 60 20" preserveAspectRatio="none" aria-hidden="true">
<polyline points="0,12 10,14 20,10 30,11 40,8 50,9 60,6" fill="none" stroke="#2a7a45" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<div class="sc-card">
<span class="sc-label">解約率</span>
<span class="sc-value">2.8<span class="sc-value-unit">%</span></span>
<div class="sc-foot">
<span class="sc-delta sc-down">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
<path d="M5 2v6M2.5 5.5L5 8l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>0.6%
</span>
<svg class="sc-spark" viewBox="0 0 60 20" preserveAspectRatio="none" aria-hidden="true">
<polyline points="0,5 10,7 20,6 30,10 40,9 50,13 60,15" fill="none" stroke="#c0492f" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>