4 指標 KPI バンド

このパーツの使いどころと実装ポイント

導入社数や継続率といった数値を 4 つ横並びで見せる KPI バンドです。レイアウトは grid-template-columns:repeat(4,1fr) で 4 等分し、白いカードの中に各指標を中央寄せで配置しています。数値部分は background-clip:text を使ったグラデーション文字で、太いウェイトと相まって視線を引きつけます。下に小さなラベルを添える 2 段構成で、何の数字かがすぐ伝わる作りです。

向いている場面

サービスサイトの実績アピール、採用ページの会社規模の提示、店舗の利用者数や満足度の表示など、信頼を数字で裏づけたい場面に合います。ファーストビュー直下に置いて、強みを早めに印象づける使い方が効果的です。

カスタマイズの勘所

• 数値は b、ラベルは span という素朴な構造なので、項目の差し替えが簡単です
• JavaScript でカウントアップ演出を足すと動きが出ますが、まずは静的でも十分機能します
• グラデーション文字は読みづらく感じる場合、単色に戻すと視認性が上がります

注意したいのは数字の正確さです。実績値は誇張せず、根拠のある数値を載せてください。レスポンシブは max-width:600px で 2 列に折り返すため、スマートフォンでは 2 段に並んで窮屈になりません。グラデーション文字は一部の古い環境で再現されないことがあるので、色のコントラストにも気を配ると安全です。