統計カード
ラベル・大きな数値・前期比の増減（増は緑↑／減は朱↓）・小さなスパークラインをまとめたKPIカード。横に2〜3枚並べてダッシュボードの要約を示します。
プレビュー
操作動きのない質感・レイアウトの見本です。
使いどころ
KPIダッシュボードの先頭に2〜3枚並べて「今の数字」と「前期からの変化」を一目で示す用途に向く。売上・新規登録・解約率のように、単体の数値だけでなく増減の方向が意思決定に直結する指標に適しており、逆に増減に意味がない指標（在庫の内訳など）には過剰な演出になる。sc-wrapがflex-wrapで折り返す設計なので、画面幅に応じて2列・3列と自動で調整され、ダッシュボードの他パーツとレイアウトを揃えやすい。この部品はラベル・数値・増減・スパークラインの4要素で構成が固まっており、長い説明文を追加で入れる余地は想定されていないため、詳細な内訳を見せたい場合はカードのクリックで詳細ページやモーダルへ遷移する動線を別途用意した方がよい。
仕組み
カードはCSSのみで構成されておりJSは持たない静的な表示部品。sc-valueにfont-variant-numeric: tabular-numsを指定しているのは、数字が並ぶダッシュボードで桁位置がガタつかないようにするためで、等幅数字フォントを使わない環境でも桁揃えが安定する。増減の矢印はSVGのpathで上向き（M5 8V2M2.5 4.5L5 2l2.5 2.5）と下向き（M5 2v6M2.5 5.5L5 8l2.5-2.5）を描き分け、色はsc-up（#2a7a45の緑）とsc-down（#c0492fの朱）のクラスで切り替える。スパークラインはpolylineのpoints属性に座標を直書きした静的SVGで、実運用では過去N日分の数値配列から"x,y x,y..."の文字列を生成する関数に置き換える必要がある。狭い画面（340px以下）ではsc-sparkをdisplay: noneで消し、数値の可読性を優先するメディアクエリが入っている。
実装の注意
最大の注意点は、増減の方向が色とSVGアイコン（ともにaria-hidden="true"）だけで表現されており、テキストとして読まれるのは"12.4%"のような数値だけで、増えたのか減ったのか一切伝わらないこと。数値の前後に+/-の符号も入っていないため、色覚特性によっては緑と朱の判別がつきにくい人にとっても同様の問題が起きる。次に、sc-labelはtext-overflow: ellipsisで長いラベルを省略するが、title属性のようなフルテキストを補う手段が無く、省略後の全文を確認できない。またsc-valueの単位（M や %）はsc-value-unitとして別spanに分離しているが、これも文字サイズの大小差だけで意味づけしており、読み上げでは"8.42"と"M"が連続して読まれるため文脈次第で誤解を招く。
アクセシビリティ
現状の実装はsc-deltaのSVGを全てaria-hidden="true"にして装飾として隠しているが、その結果「増加」「減少」を伝える情報がテキストから完全に欠落している。改善するなら、視覚的には隠したspan（クリップで隠す等の一般的な手法）に「増加」「減少」の文言を数値の前に足すか、sc-delta自体にaria-label="前期比12.4%増加"のように数値と方向をまとめて上書きするのが定石。色だけに頼らない伝達という観点では、緑/朱の彩度差に加えてアイコンの向き（上向き/下向き三角）は既に用意されているので、その情報をテキストとしても渡す作業だけで解決する。スパークラインはaria-hidden="true"のままでよい。装飾的な傾向表現であり、同じ情報はsc-deltaの数値で代替されているため、二重に読み上げさせる必要はない。
調整して使う
調整しやすいのは3点。カード内の要素構成で、スパークラインを外して数値と増減だけのミニマルな見た目にすると、4枚以上並べても窮屈にならない。次に増減の表現で、色付き矢印だけでなく背景を薄く色付けした丸ピル形式（badge部品のbg-pillに近い形）に変えると、より強い注意喚起になる。最後にsc-cardのborderとbox-shadowの強さで、白背景のダッシュボードならborderだけを残してshadowを消すとフラットな印象になり、暗いテーマの画面ではshadowを強めてカードを浮かせた方が数値が視認しやすい。数値の桁数が指標ごとに大きく変わる場合は、sc-valueのfont-sizeをclamp()で可変にしておくと桁あふれを防げる。
コード（コピーして使えます）
<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>